Preface
Minimap is a very common tool in games. This time the practice project has the realization of this requirement. I thought about the realization method by myself. The first idea of realization was to create a second camera to draw an aerial top view. Mounted to the corner of the GUI, but got stuck in the implementation of the mount, so after some searching, I got some new knowledge points and found a solution. I will record it here.
Implementation
Camera settings
As mentioned earlier, our first step is to create another camera ,
rename it to MiniMapCamera to distinguish it from the main camera,
then place it directly above the operating object and rotate it directly in front of it along the Y axis Looking down and looking down,
we will get this picture:
This is the prototype of the minimap.
So, the next thing to do is to shrink its screen to the corner of the screen, and you can create its container through the GUI
Create a Canvas, and then create a Panel on it,
zoom out and drag it to a suitable location :
OK, the effect is good, rename it to MiniMap as the area for placing our small map, remember to set the transparency in the Color panel Is 0 .
The next step is the highlight-put the camera picture in this area:
To put it simply, the imaging principle of the unity camera is to convert the scene seen on the front of it into a picture and present it on the screen , and then continue to refresh it. After understanding this, the idea of realization appears. In fact, it is A picture is displayed on an object.
Create a new Render Texture file in Assets
and rename it to MinimapRenderTexture to
get the following:
Click the previously created second camera MiniMapCamera, and
first set the Target Texture item in its Camera component to MiniMapRenderTexture .
Go back to the Hierarchy window,
create a new Raw Image object under
MiniMap, change the name to MiniMapContent,
adjust the size to coincide with MiniMap, and
select its Texture as MiniMapRenderTexture to
get the following:
Yes! It is very close to the idea, but there is still something wrong. What we want is a small circular map to continue to adjust.
Similarly, create another Image object under MiniMap,
its size also coincides with MiniMap, and
rename it to MiniMapMask to serve as the mask for our minimap .
Set the Source Image of MiniMapMask to any solid circular image (note that the background needs to be transparent),
then put MiniMapContent under MiniMapMask to become its child,
and add a Mask component to MiniMapMask ,
and then the minimap is Will become like this:
Great! The basic framework of the minimap has been out, the next step is to add the friend or foe logo.
Add friend or friend
Here we simply use the red circle and the green circle to indicate friend or foe .
First add a Cube as Enemy on the map,
then add the red circle to the Scene in the form of a 2D Sprite object
and rename it to EnemyIcon.
Then, in order to simply follow, we can directly set EnemyIcon to Enemy For sub-objects,
set the EnemyIcon's Position to (0,2,0),
and do the same for the player Cube :
It seems that the logo is a bit too big, then adjust the camera position and image size:
It’s very close to the idea, but not only in the small map, we can also see the logo in the main camera screen, and then in the small map we can also see the entity of the original object, which is obviously not the effect we want. In order to solve these problems, we also need to modify the camera settings and the object's Layer layer.
Add a Layer layer for identification,
named MiniMap,
and put EnemyIcon and PlayerIcon in it.
Add a Layer layer for players and enemies, the
name is Creature,
put both players and enemies in this layer
Then modify the Camera component of the
camera, uncheck the MiniMap layer in the Culling Mask of the main camera, and uncheck
the Creature layer in the Culling Mask of the MiniMap camera :
Great, you're done! A simple circular minimap with the identification of friend or foe is realized.