Day 12, 13, and 14. Unity, Mapbox and #WorldMapCup

So I thought it would be fun to build a game for the Mapbox World Cup Map contest. Being that today it my 12th day in playing with Unity (click on my profile to read about the previous days) I thought I should go for something simple. You get to read about the steps I have to try to create a game in 3 days.

My game concept

Let us see how far I can get in 3 days.

Day 12

My very first game in Unity involved you being the ball. You can follow the tutorial here and make it yourself.

Make the Soccer Ball

Being that its soccer I am going to go ahead and turn the ball into a soccer ball.

Lets go ahead and google fifa soccer ball design and copy the design. I think this was the design for the Brazilian FIFA World cup. But until I find the 2018 design I will leave this for now.

Next drag and drop it into Unity. Then drop it onto the Player or ball.

Now you have a soccer ball!! I increased the X, Y, and Z so that we can see the ball.

Time Spent: 30 minutes

Day 13

Lets add Mapbox

Download the Latest Unity Package from Mapbox

Install the Maps SDK for Unity

Following the steps add the Access Token. And Select the Map you want to add. For the purposes of this game we are going to use City Simulator

The only thing we are going to need is the CitySimulatorMap so we can drag and drop that element into the Roll-a-ball tutorial. (Please note that my version of roll-a-ball became corrupted so I downloaded a new version.)

This is what your screen will look like.

We are now going to make the ball into the soccer ball again and make it larger.

It looks like our mapbox map does not have a physical element so we need to give it a collider.

I learned about this from a helpful Mapbox employee who told me about what I need to do.

Hey there, Jon.

Sadly the link is dead on their web page probably because they are constantly updating it.

I informed them on their slack channel https://mapbox.slack.com and by the time you read this it should be correct.

Doing a simple google search for “Data Explorer Mapbox” brings me to the webpage.

Data explorer

I switched out the map to the DataExplorer Map (Dragging and dropping, if you need more help with this I am sure I can share a screen shot)

So in the Terrain you click the button of the dataexplorer for the collider

Also give the buildings a Box Collider

It started messing around with the size of the ball and made it too big and my laptop doesn’t have enough computing software to render all the tiles.

This would be a gif if my computer didn’t freeze

Time Spent: 1 hour

Day 13.5

The green squares are trees/parks

I went ahead and discovered different features deciding what would look best for the game. I made the ball larger but not as large as when I crashed Unity setting.

I also made the player(ball) start at an elevation of 30 (y) as well as the ground being set to 25 (y) so that the ball doesn’t get stuck on any buildings when they load.

I removed a bunch of elements that were not needed (walls, info panels, ect.) I also shrank the group layer since it doesn’t look nice.

I also changed the area of the game to Moscow, Russia since the world cup is taking place there. The player also has the option in game to change the area of play to wherever they want.

Moscow Idaho is a fantastic college town

It works!!

excitment

Time spent: 1.5 hours

Day 14

Modify the camera

Currently the camera moves to let you move around the map. It is controlled by some C# script found within the Main Camera asset. To make it follow the ball we are going to change out the C# script that of the Roll-A-Ball Tutorial.

using UnityEngine;
using System.Collections;

public class CameraController : MonoBehaviour {

    public GameObject player;

    private Vector3 offset;

    void Start ()
    {
        offset = transform.position - player.transform.position;
    }
    
    void LateUpdate ()
    {
        transform.position = player.transform.position + offset;
    }
}

Now the Camera is much better at following the ball around.

so smooth and clean

Make the Map Prettier

The large amount of white space hurts my eyes plus its hard to see the count of yellow boxes you pick up.

We are going to go ahead and add the “Mapbox Satellite” images onto the map to give it a feel of going around downtown Moscow in a very large soccer ball.

We are also going to turn off the streets. They don’t look very nice and aren’t needed.

Point of Interests

I haven’t gotten to this part of the Udemy course however I am going to try to add POIs anyhow instead of having the circle of yellow boxes. We are going to have them appear at locations of interest.

Lets go ahead an Add Layer add also add the POIs in the checkbox.

We are going to leave it on default. We are also going to set the POIs as the Pickup object in the roll-a-ball game.

So turning on the map it appears that the Pickup never scaled up

So Tiny

So in the Asset box we are going to increase the Scale within the Transform of the Pick Ups to 5s instead of 1s. We are also going to remove the Pick Ups assets that are currently in the game since they aren’t needed anymore.

Way to many yellow pickups

So I ended up scaling down the density of points to a more reasonable level

(Density = 4)

I changed the density to 4

Now I need to verify that if you collect enough it displays You Win!

Export

Now that I am satisfied with mediocre game built in 4 hours. Im ready to export. I am going to choose WebGL, its the new flash of web browser based games.

O fudge looks like I got a bunch of compiling errors

Its exporting as a standalone Windows file. You can download the game and play it by clicking here and downloading all the files:

https://github.com/jwitcoski/jwitcoski.github.io/tree/master/UnityGames/RollABallMapbox

Fun with mapbox and soccer balls

Total Time: 4 hours

Entire Time playing with Unity: 16 hours

If you would like to know more about building your own game in Mapbox, join me in taking the free Udemy course. I’m about 1/5th of the way thru the class.

Unity 3D location based game development with Mapbox

Extra:

If I was going to continue this game I would want to do the following

1. Make the map only render 10 tiles around the ball.
2. User moves the map instead of the ball

Here is a youtube videos on how to do #2.