Build a UI Minimap in Unity

There are a lot of tutorials out there that show how to build a minimap. Today I will show you how to build one using the UI system.

To start with I have a new scene with a canvas that holds an image mask for the map, an image for the actual map image, an image for the player position, and an image for the enemy position. Then I have a plane, a capsule for the player, and another one for the enemy.

The key is to have the image be a child of the mask and the image needs to be larger than the mask.

The next part is to be sure that the enemy is a child of the map image to get the correct movement.

Now I created the script to control the UI and named it MiniMap. I also created a game object called Manager and added the script to this object. I need to add my variables to get started.

Then I will fill the fields with the correct properties.

I will be moving the map around the player when the player moves. The reason for this is that I want the player to stay in the center of the map at all times.

I use the player position x value and the z value since I only want to move the map on the x and y values. I also need to use the negative value otherwise the map will move in the opposite direction of the player. I put this code in the update method so that it gets updated whenever the player moves around.

The player’s position is updated on the map. Now it is time to get the enemy position updated.

I do not need to use negative values for the enemy because the enemy’s image will move in the correct direction on the map.

Now that both are working properly here is the full script to get the minimap working.

Let’s see how it looks all together now.

Now it is your turn to get out there and make your minimap on your UI!!!!