Creating a UI Minimap in Unity

A minimap is a common element in many games, usually placed in the corner of the UI to aid players in locating themselves in the game’s world. They often show the player’s location, along with parts of the environment and nearby enemy or NPC locations. Done well, it adds to the enjoyment of the game. Done poorly, it can distract the player and just add clutter to the UI.

Assassin’s Creed IV: Black Flag. Ubisoft, 2013.

Today, I’m going to discuss creating a simple minimap using Unity’s UI system. In my example project, I have a large plane to represent the ground, and two game objects. One will represent the player, and the other for an enemy.

The game world.

My goal is to have a minimap displayed on the upper right corner of the screen, with the map centered on where the player is in the game’s world and showing the relative position of the enemy object. The player will be blue while the enemy will be red. Since my game world is currently consist of an empty green ground, I’ll represent the map as an image that I’ve imported into the game.

An image to represent the map.

Step 1. Create an empty game object to hold the map. I’ve anchored it to the upper-right corner of the UI.

An empty image anchored to the upper right of the UI.

Step 2. Create an image mask to limit the part of the map being displayed and add it as a child of the empty map object. This is just an empty image with a Mask component added.

An image mask for the map.

Step 3. Add an image object to hold the map graphic as a child of the mask object. My play area is 20x20 in size, so I scaled the map to a proportional size, 200x200.

The map image.

Step 4. Create objects to represent the player and enemy locations on the map. In my case, I’ve added two 5x5 images. One blue, and the other red. I’ve made both objects children of the map so that they show up on the screen.

The map image for the enemy.

Step 5. The last step is creating a script to update the locations of the map (because the player will always be in the center) and the enemy. The script is linked to the player and enemy objects, as well as the map and enemy images via SerializeField attributes. The update method simply moves the map and enemy images to the position of where the player and enemy objects are located.

Code to update the map and enemy positions.

When the game is run, the minimap is updated to show the player’s location in the world as well as the relative location of the enemy.

The game running with the map updating.