Unity Tutorials: How to make a MINIMAP in 10 Minutes

  Game Development

Most games (like First Person Shooter games) provide a map that allows the player to determine his/her current position.

Call of Duty gameplay with minimap

 

But, how do game developers actually create such a minimap?


In this tutorial, we’re gonna be looking at how to make a minimap in 10 minutes.

WHAT? 10 minutes?

You see? Creating a minimap does NOT actually take that much time. In fact, you can create this system in less than 10 minutes. However, time depends on how much detail you want your minimap to be.

So to make things fast and easy, we’ll create a very simple minimap like below.

Getting Started

Going back to the tutorial, we’ll start this project with the following scene.

Low poly third person player controller in unity

Feel free to use your pre-made scene but we highly recommend that your scene contains a player character that can move around so you know that the minimap is working.

Setting up the camera

Most minimaps are created using two cameras. One is for the player which could be like what the character above is using (Third person camera) or a first-person camera.

The second camera is for the minimap which is mostly placed above the player and pointed towards the player. This is what we’re going to do as it is much faster and easier to customize.

Navigate to your hierarchy and create a new camera.

creating a custom camera in unity

Now, the next thing we need to do is to make sure that the position of this camera is the same as our player.

So go ahead and select your player, navigate to its inspector, and copy its transform position by clicking on the 3-dotted button and selecting Copy Component.

copying values of components in unity

Next, let’s apply the copied values to our camera.

To do that, select the camera that we created earlier. Go to its inspector, click again the 3-dotted button and select Paste Component Values.

copying values of components in unity

The next is to make the camera placed above our player and pointed towards our player.

So go to your scene view and drag the camera in Y-axis and rotate its X-axis to 90 degrees.

Setting up minimap camera in unity

And this is our minimap camera looks like in the game view.

minimaps in unity

Now, it’s starting to look like a minimap but not yet.

Let’s set our camera’s projection to orthographic instead of perspective so it will look more flat than a 3D perspective.

unity camera projection settings

Awesome! Now it’s time for us to use this camera for our minimap.

 

Setting up the minimap

Now that we have our camera, it’s time for us to create the minimap. We’ll start by creating the heads-up display.

Navigate to your hierarchy and create Raw Image by selecting UI > Raw Image.

unity raw image ui

Next, let’s position our Raw Image somewhere in the bottom-right corner of our game screen. To do that, select the Raw Image and select an Anchor Preset in the inspector. Don’t forget to HOLD ALT key before selecting the preset.

unity anchor presets

Now, if you’re wondering why we chose the Raw Image instead of the Image, it is because Image UI can NOT accept render textures.

Render Textures are special types of Textures that are created and updated at run time. To use them, you first create a new Render Texture and designate one of your Cameras to render into it.

In other words, render textures will display what the camera is looking at.

With all that being said, let’s create a render texture by going to your Project window and selecting Create > Render Texture and we’ll name it Minimap.

creating unity render texture

Next, select the render texture and navigate to the inspector and set the render texture size to 100×100 (or to the size of your Raw Image).

Don’t forget to set the Depth Buffer to No Depth Buffer.

render texture settings in unity

Now that we have our render texture, it’s time for us to pass the data from our camera to this render texture.

To do that, simply select the Camera in the hierarchy and drag the Minimap render texture to Camera’s target texture variable.

using render texture in unity camera

Now, if we apply the Minimap render texture to our Raw Image, we should be able to see what the camera is looking at.

applying render textures to raw images in unty

And as you can see, the raw image object is finally showing us what the camera is looking at.

unity minimap tutorials in 10 minutes

There you go! Now we have the minimap.

However, there’s a bit of an issue with our minimap. If you run the game and walk around the environment, our minimap camera will not follow our player.

Technically, this is alright when your minimap is supposed to show the entire map. However, if you want to make a minimap where the player is always at the center of the map then you have to make sure that the camera is following the player.

To make this work, we’ll have to create a minimap script.

Create a new C# script and name it Minimap.cs and copy the following code:

using System.Collections; using System.Collections.Generic; using UnityEngine; public class Minimap : MonoBehaviour { private Transform _player; void Start() { _player = GameObject.FindGameObjectWithTag("Player").transform; } void LateUpdate() { Vector3 playerPosition = _player.position; playerPosition.y = transform.position.y; transform.position = playerPosition; } }

For the code above, all we wanted to do is to get the position of our player and apply it to our minimap camera without changing its Y-axis value.

Save the script and apply this script to the minimap camera.

Make sure your player tag is set to Player.

unity player tag

And if you try the game, you should see that our minimap is following our player.

 

Designing the minimap

Our minimap looks really boring! Let’s make it look awesome.

First off, let’s select our Raw Image object and rename it to Minimap. Then resize its width and height to 200.

Don’t forget to resize the Minimap render texture too!

unity raw image transform

If the raw image started to move outside the game screen, just re-select the bottom-right anchor preset and that should fix its position.

Now we have a much bigger map.

unity minimap tutorials

Next, let’s make our minimap circle. To do that, we’ll need to use a mask.

Download the following asset as we’ll use this as our mask texture.

Once the package is imported, double-check that the image has the following settings applied.

  • Alpha is Transparency is checked
  • Generate Mip Maps is disabled
masking raw images in unity

Next, select the Minimap (Raw Image) game object and duplicate it. Rename the duplicate Minimap Mask.

Then, select the Minimap Mask game object and apply the MinimapMask texture to the Texture variable.

raw image minimap mask unity

Next, click the Add Component button and look for Mask.

mask for minimap component

Then, drag the Minimap game object to the Minimap Mask game object to make it as its parent object.

minimap game objects hierarchy unity

By doing so, you should see that the map became circle.

unity circle minimap tutorial example

How about a border? How can we add a border to our minimap?

That’s actually pretty simple.

All we need to do is to just duplicate the Minimap game object. Let’s rename it Minimap Border.

Then, replace the texture with any texture you want. We’ll just use the same texture we used for our mask.

unity minimap circle border tutorial example

Then, drag the Minimap Border out of the Minimap Masked game object. This will make our Minimap Border game object independent.

minimap border unity game object

Also, make sure that the Minimap Border in the hierarchy is above the Minimap Masked game object. This way, our border will be displayed behind our minimap.

Next, let’s resize our border to 210 for width and height.

This should give us the following

unity minimap with border example

Conclusion

So there you have it. You have finally created a very simple minimap in less than 10 minutes. Obviously, there are still too many things to work on for this minimap. That’s why in our next lesson, we’ll be taking a deeper look at how to create an advance minimap where you can change the player’s icon, change the ground, and more.

But for now, we hope that you learn from us and got the idea of how to create a very simple minimap.

If you have encountered any issues, don’t hesitate to let us know in the comments below.

Disclosure: This article may contain affiliate links, which means we may receive a commission if you click a link and purchase something that we have recommended.

React to this topic
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments