Unity 3D Minimap Tutorial

NSDG | Nov 30, 2019 | 0 Comments
Unity 3D Minimap Tutorial
146

Game Levels come in many shapes and forms, from a simple 2D levels to a more complex 3D levels with vast spaces and corridors.

The later usually comes hand in hand with a minimap - a small area on a screen (usually in the corner) which shows the player position on the map.

In this tutorial I will be showing how to make a minimap in Unity 3D using UI canvas.

Steps

For testing purposes I will be using FPS Controller from this tutorial.

  • Open the Scene with your game level
  • Create new UI Canvas if you don't have any (GameObject -> UI -> Canvas)
  • Create new Image by right clicking on Canvas -> UI -> Image
  • Assign the sprite below to the image

  • Change its alignment to top left and the pivot to (0, 1)

  • Create new Raw Image by clicking on Canvas -> UI -> Raw Image (Make sure the Raw Image is placed before the Radar Image in Hierarchy, so it's rendered behind).

  • Create new Camera, name it "Minimap_Camera", place it above your player then point it down
  • Remove Audio Listener from "Minimap_Camera"
  • Create new Render Texture (In Project view Create -> Render Texture) and name it "MinimapTexture"
  • Assign newly created Render Texture to "Minimap_Camera" Target Texture

  • Assign "MinimapTexture" to Raw Image Texture

Now we need to add sprite mask so the image is nicely cropped:

  • Duplicate the radar image and change its texture to the sprite below:

  • Add Mask component to the mask image

  • Move the Raw Image with Render Texture inside the mask image

The final image should be cropped now:

As you can see the minimap Camera shows the map as it is, including the player and any dynamic objects, but that's not what we want, we what to show just the map without any dynamic objects.

  • Take a screenshot of the top view of the map (Before doing so, deactivate any dynamic objects such as players, enemies etc.)

  • Create new Quad (GameObject -> 3D Object -> Quad) and place it under the map like this:

  • Assign the map screenshot to the Quad and change the material Shader to "Unlit/Texture"
  • Make sure the screenshot position on the Quad matches the map:

  • Change minimap Quad layer to "UI"
  • In "Minimap_Camera" change Culling Mask to "UI"
  • Create another Quad and move it inside "Minimap_Camera" object, assign the image below to it:

  • Change the Shader on arrow Quad to "Unlit/Transparent"

  • Change the arrow Quad layer to "UI"

Here is the final result:

  • Create new script, name it "SC_MinimapCamera" and paste the code below inside it:

SC_MinimapCamera.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class SC_MinimapCamera : MonoBehaviour
{
    public Transform target;

    float defaultPosY;

    // Start is called before the first frame update
    void Start()
    {
        defaultPosY = transform.position.y;
    }

    // Update is called once per frame
    void Update()
    {
        // Apply position
        transform.position = new Vector3(target.position.x, defaultPosY, target.position.z);
        // Apply rotation
        transform.rotation = Quaternion.Euler(90, target.eulerAngles.y, 0);
    }
}
  • Attach SC_MinimapCamera script to "Minimap_Camera" object.
  • Assign your player to Target variable in SC_MinimapCamera.

The minimap is now ready!