Implementation of Unity small map

Regarding the picture display in the mini-map, I used thumbnails, which is actually a direct top view to cut a picture of the scene and use it as a mini-map. Other methods include RenderTexture, etc., but you need to create a camera to follow, which is good for large open-world scenes. But for smaller scenes, it is better to take a picture directly, which is low-cost and convenient.

The scene is a free scene in the official store. First, take a screenshot as a minimap:

Create a new Canvas, create an Image named Minimap under it, use it as the background, make it transparent, and adjust it to a suitable position, then under the Minimap Create an Image named Border as the border of the minimap:

Create an Image under Minimap, name it Mask, use a round white image, adjust the size to just fit within the Border, add the Mask component to the Mask, and uncheck it Select Show Mask Graphic, so that when the small map is dragged to the border, the background color will be displayed instead of white. Create an Image under the Mask, name it map, assign the previous small map to it, and then create the perspective dir and the character arrow arrow. In addition, two buttons can be added under the Minimap to control the zooming of the minimap, and the UI part is completed.

Since it is a small map, it must follow the character, so how do you know the positional relationship between the small map and the character at a certain moment? For scenes that are not very large, you can directly create a cube and place it under the map as a BoundingBox, you can cancel its Mesh Renderer, and only need the collision body for subsequent calculation of the positional relationship between the small map and the character: Next,

create A Minimap script, mounted on Minimap, the content is as follows:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class Minimap : MonoBehaviour
{
    
    
    public Collider minimapBoundingBox;

    public Image minimap;

    public Image arrow;

    public GameObject dir;

    public Transform playerTransform;

    // Start is called before the first frame update
    void Start()
    {
    
    
        this.InitMap();
    }

    void InitMap()
    {
    
    
        this.minimap.SetNativeSize();
        this.minimap.transform.localPosition = Vector3.zero;
    }

    // Update is called once per frame
    void Update()
    {
    
    
        float realWidth = minimapBoundingBox.bounds.size.x;
        float realHeight = minimapBoundingBox.bounds.size.z;

        float relaX = playerTransform.position.x - minimapBoundingBox.bounds.min.x;
        float relaY = playerTransform.position.z - minimapBoundingBox.bounds.min.z;

        float pivotX = relaX / realWidth;
        float pivotY = relaY / realHeight;

        this.minimap.rectTransform.pivot = new Vector2(pivotX, pivotY);
        this.minimap.rectTransform.localPosition = Vector2.zero;
        this.arrow.transform.eulerAngles = new Vector3(0, 0, -playerTransform.eulerAngles.y);
        this.dir.transform.eulerAngles = new Vector3(0, 0, -Camera.main.transform.eulerAngles.y);
    }
    
    public void OnClickAdd()
    {
    
    
        minimap.transform.localScale += minimap.transform.localScale * 0.2f;
    }

    public void OnClickReduce()
    {
    
    
        minimap.transform.localScale -= minimap.transform.localScale * 0.2f;
    }
}

The declared variables are bounding box, minimap image, character arrow, view direction and character coordinate position. When initializing the minimap, set the image to its original size and the local coordinates to 0. In each subsequent frame, calculate the real width and height of the bounding box and the relative coordinates between the smallest point of the bounding box and the character, divide the relative coordinates by the real width and height, and use this value as the pivot coordinate of the minimap, which is the real coordinate axis of the model position, and then set the local coordinates of the minimap to 0 to realize the movement of the minimap following the characters. Then change the direction of the character's arrow in real time to be consistent with the direction of the character, and the direction of the viewing angle to be consistent with the camera position.

There are two methods set up below, which are to zoom in on the map and zoom out. Just change the LocalScale of the minimap directly, and add corresponding OnClick events to these two buttons in unity. The angle of view of the characters in this map resource is consistent with the angle of view of the camera, so the pointing of the arrow and the pointing of the angle of view in the mini-map are also consistent. If you use the third-person control method mentioned in the previous article, it will appear more like the mini-map in the classic impression.

demo： https://github.com/zwjzwk/Unity-Minimap