Design your map in Mapbox and integrate it in Unity

Overview

This article explains you the procedure to design a map in Mapbox and then implement the Mapbox services in Unity3D.

What is Mapbox?

Mapbox is one of the best location data platform targeted for mobile and web applications.
You can use these services in Unity and create your own location and map based games.

Maps and location data optimized for Unity. Written from the ground up in C#, the Mapbox Unity SDK unlocks global data to generate custom 3D worlds, power location lookup, and incorporate traffic-based directions in your next Unity project.

The best part is that you can use the services for free until you cross the 50,000 monthly active mobile platform users mark.

First of all you have to sign up to get your account in Mapbox.
Now, Let’s design a map in Mapbox Studio and then use it in Unity.

Sign in and navigate to the Mapbox Studio to create a new basic Map Style.

You can see your map. We will change its look and feel by altering values in different Layers.

Scroll down in Layers section -> click on background -> change it’s color value to hsl(112, 80%, 71%)

Similarly change color values of below layers.
You will need colors for roads,buildings,land and water.

“background” - hsl(112, 80%, 71%)
“water” - hsl(190, 93%, 54%)
“road_major” - hsl(165, 39%, 45%)
“road_minor” - hsl(165, 43%, 56%)
“landuse_park” - hsl(141, 43%, 53%)
“bridge_major” - hsl(165, 56%, 33%)
“tunnel_major” - hsl(165, 38%, 31%)
“building” - hsl(240, 23%, 31%)

Change the Opacity field value of “building” layer to value 0.3

Fiddle around the color and opacity value of various layers in order to achieve your desired map look.

Your map should now look something like this.

Now let us add borders to our roads.
We will duplicate the “road_major” layer and rename it to “road_major border”.
“road_major” layer will stay on top of the “road_major border”.
Set the widths of both the layers in order to give it a border effect.

Do a similar procedure for “road_minor” layer.

Fiddle around the values to get your desired road border effect.
While increasing the width values make sure that the roads don’t overlap over each other.

For now, your road-border should look like this.

Now let us add a texture to the water layer.
Download the water.svg texture file and drag and drop this texture file into mapbox studio.
Duplicate the “water” layer. Add the water texture to the Pattern field with opacity of 0.1

You may replicate the same process for roads & buildings using road.svg and building.svg file.

Make additional adjustments to the map to get your desired look and then publish the map.

Congratulations! You successfully created a simple map style for your location-based game. You can now use this style with Mapbox Unity SDK, GL JS,iOS SDK, Android SDK .

We will now use this awesome map in Unity.

Integration of Mapbox with Unity

Pre-requisites
1.) Unity 5.6.0f3 or later.
2.) Download the Mapbox Unity SDK.

Create a new project in Unity and import the Mapbox Unity SDK package.
Create a new scene and save it.
Search for the “Attribution” prefab inside “Assets/Mapbox/Prefabs” and add it to our scene.

Before integrating the sdk we will get a new access token.
Navigate to Tokens and click “Create a new token” button.
Select scopes:list & styles:list and click “Generate” button.
Copy the new token and open Unity.
Select Mapbox > Configure to add your new access token.

Below are few scripts/assets from the SDK that we will be using to generate our Map in Unity.

• Abstract Map
• Abstract Tile Provider
• Location Provider Factory
  • Device Location Provider
  • Editor Location Provider
  • Transform Location Provider
• Map Visualizer
  • Flat Terrain Factory
  • Map Image Factory
  • Vector Tile Factory
• Build Map At Location
• Position With Location Provider
• Player Tile Provider

Add this PlayerTileProvider.cs script to your project

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using Mapbox.Unity.Utilities;
using Mapbox.Unity.Map;
using Mapbox.Utils;
using Mapbox.Map;

public class PlayerTileProvider : AbstractTileProvider {

    [SerializeField]
    private Transform locationMarker;

    [SerializeField]
    private AbstractMap map;

    [SerializeField]
    private int _visibleBuffer;

    [SerializeField]
    private int _disposeBuffer;

    private bool _initialized = true;
    private Vector2d _currentLatLng;
    private UnwrappedTileId _currentTile;
    private UnwrappedTileId _cachedTile;

    void Start() {
        Initialize (map);
    }

    internal override void OnInitialized() {
    }

    float _elapsedTime;

    [SerializeField]
    float _updateInterval;

    private void Update() 
    {
        if ( !_initialized ) return;

        _elapsedTime += Time.deltaTime;
        if (_elapsedTime >= _updateInterval)
        {
            _elapsedTime = 0f;
            _currentLatLng = locationMarker.position.GetGeoPosition ( map.CenterMercator, map.WorldRelativeScale );

            _currentTile = TileCover.CoordinateToTileId ( _currentLatLng, map.Zoom );

            if ( !_currentTile.Equals ( _cachedTile ) ) 
            {
                for ( int x = _currentTile.X - _visibleBuffer; x <= (_currentTile.X + _visibleBuffer); x++ ) 
                {
                    for ( int y = _currentTile.Y - _visibleBuffer; y <= (_currentTile.Y + _visibleBuffer); y++ ) 
                    {
                        AddTile ( new UnwrappedTileId ( map.Zoom, x, y ) );
                    }
                }
                _cachedTile = _currentTile;
                Cleanup ( _currentTile );
            }
        }
    }

    private void Cleanup( UnwrappedTileId currentTile ) {
        var count = _activeTiles.Count;
        for ( int i = count - 1; i >= 0; i-- ) {
            var tile = _activeTiles[i];
            bool dispose = false;
            dispose = tile.X > currentTile.X + _disposeBuffer || tile.X < _currentTile.X - _disposeBuffer;
            dispose = dispose || tile.Y > _currentTile.Y + _disposeBuffer || tile.Y < _currentTile.Y - _disposeBuffer;

            if ( dispose ) {
                RemoveTile ( tile );
            }
        }
    }
}

Go through this video for further steps.

That’s it.
Finally you can see that your map is loaded inside Unity.
You can replace the cube with a 3D Character.

Build the project to a phone and you can see the map loaded in your phone.
Make sure the location services and internet connection is enabled.
Go for a walk and you will see the cube following your path in the Map.

Congratulations!
You should now be capable of integrating Mapbox maps inside Unity and you can use it for your next location & map based game.

In the next tutorial, I will explain the procedure to add various custom dataset points in our map and then use the same points to the map loaded in Unity.

Meanwhile, If you have an idea for your next game and need any help in executing your concept, we will be more than happy to make it a reality. Contact Us