Create a UI Minimap in Unity 2021 URP
Initial Scene Setup
For the initial setup of this project, we’ll add a cube with 100, 5, 100 scale to be used as a floor.
We will also import Unity’s Third Person Controller asset from the Unity Asset Store.
For more information on how to import the Third Person Controller package from the Unity Asset Store, please see the article above.
As the Third Person Controller package uses the new Input system, we’ll have a small issue when we add our Canvas element to the Hierarchy.
Select the EventSystem object and click the button shown above to correct this issue.
Add another 3D cube to the scene and rename it as “Enemy”.
Add 4 UI images under Canvas, rename and set child as shown above.
On the Canvas settings, set the UI Scale Mode under Canvas Scaler to “Scale With Screen Size” and a resolution of 1920 x 1080.
Set the alignment to the top-right corner as shown above.
Click the top right alignment box once with left click, and then again with Alt + left click.
Set the position and size fields as appropriate, this is what worked for me.
Also, add the Mask component to the Image_Mask element.
Leave the “Show Mask Graphic” setting as disabled for now.
We’ll then add a sprite to serve as our minimap’s background image.
I’m just using what is already in my project from previous articles.
We’ll then oversize the Image_Map so that there quite a bit of room for the player and enemy image representations on the map to move around.
Speaking of which, let’s add those representations!
Set their alignment anchor to the top right and use Alt to also lock in the position to the top right anchor.
Resize the Image_Player and Image_Enemy elements as needed, 10 x 10 worked for me.
Due to the brownish orange background of my minimap, I used yellow to represent the enemy.
Place the Image_Enemy anywhere on the mini map for the time being.
On the 3D cube we’ve renamed Enemy, let’s create a new red material and apply it.
Now place the Enemy cube somewhere in the scene away from the Player.
The MiniMap Class/Script
Create a new folder called “Scripts” and create a new script in it named “MiniMap”.
Create a new Empty Game Object and name it “Manager_MiniMap” or whatever you like.
Assign your script to the new Manager game object.
We’ll start by adding a using statement for Unity’s UI library and then we’ll declare some class variables to hold all of the relevant information.
In Update(), we’ll modify the Image_MapBG element’s Rect Transform component.
Next, assign all of the relevant objects/elements to the appropriate fields on the Manager_MiniMap.
Note that you need to select the “PlayerArmature” game object that is childed to the “Player” game object.
This is because the Player game object’s transform position will not change when the PlayerArmature game object moves.
If we put our scene view in a top down view, we can see that when the player character moves forward, our minimap shows him moving backwards.
When they move left, it shows movement right.
This is an easy fix.
Simply set the MiniMap Move Speed field on Manager_MiniMap to be negative (-5).
This will invert the directions we move the UI image, “Image_MapBG”.
That’s much better!
We’ll add another line of code to tie our minimap image of the enemy to the actual enemy game object.
Note that we need to multiply the position values by the negative value of the movement speed to make this work correctly.
As such, I revised the script to use a positive MiniMapMoveSpeed value and added a negative multiplier when moving _mapBG in the Update() method.
This seemed to make more sense, and any third-party game designer might be confused by a negative value in the inspector.
Now the _minMapEnemy position only needs to be multiplied by the _miniMapMoveSpeedValue without any negative multiplication.
Now if we hit play, we should have a working minimap prototype!
See you in the next article!
