[SOLVED] How to tackle a world map for a Metroidvania?

Hi,
I've been making a 2D Metroidvania game for some time now but now I'm stuck on the making of the world map. I want to have a map where it automatically zooms in to the area where the player is in the game and scroll to zoom to the mouse position. Currently, I just use an image with a Scroll Rect.

This is what it looks like right now:
https://i.gyazo.com/f316fd0e92ce2be12dc308a987f33247.gif

This is the code I already have:

Code (CSharp):

1. using System.Collections;
2. using System.Collections.Generic;
3. using UnityEngine;
4. using UnityEngine.UI;
5. using TMPro;
6.  
7. public class WorldMap : MonoBehaviour
8. {
9.  
10.     AreaController ac;
11.     public PlayerController pc;
12.  
13.     bool isOpen;
14.     public bool canOpen;
15.  
16.     public GameObject mapUI;
17.     public ScrollRect mapScrollRect;
18.     public Image mapImage;
19.  
20.     public TextMeshProUGUI areaName;
21.  
22.  
23.     void Awake()
24.     {
25.      
26.     }
27.  
28.     void Start ()
29.     {
30.         ac = GameObject.Find("Area Controller").GetComponent<AreaController>();
31.         //pc = GameObject.FindGameObjectWithTag("Player").GetComponent<PlayerController>();
32.     }
33.  
34.  
35.     void Update ()
36.     {
37.         if(Input.GetButtonDown("Map"))
38.         {
39.             if(!isOpen)
40.             {
41.                 OpenMap();
42.             }
43.             else if(isOpen)
44.             {
45.              
46.                 CloseMap();
47.             }
48.         }
49.  
50.         Zoom(Input.GetAxis("Mouse ScrollWheel"));
51.     }
52.     void Zoom(float increment)
53.     {
54.         float currentScale = mapImage.rectTransform.localScale.x;
55.         float minScale = 1;
56.         float maxScale = 4;
57.         currentScale += increment;
58.         if (currentScale >= maxScale) {
59.             currentScale = maxScale;
60.         } else if (currentScale <= minScale) {
61.             currentScale = minScale;
62.         }
63.         mapImage.rectTransform.localScale = new Vector3(currentScale, currentScale, currentScale);
64.     }
65.  
66.     void OpenMap()
67.     {
68.         pc.canMove = false;
69.         isOpen = true;
70.         areaName.text = ac.currentArea;
71.         mapUI.SetActive(true);
72.     }
73.  
74.     void CloseMap()
75.     {
76.         pc.canMove = true;
77.         isOpen = false;
78.         mapUI.SetActive(false);
79.  
80.     }
81. }

I'm not asking for full scripts I just want to know how I could tackle this.

 

You could use a Camera which outputs to a RenderTexture (theres a field for one on the camera, you just have to create a RenderTexture asset to hold the data), and then you can display that RenderTexture with a RawImage component in the UI.

This way you can control what gets rendered into the map via culling layers on the camera, and you can have the camera reposition to the player & handle zooming.

Just make sure you disable the camera when the map is not in use to save on performance.

Also make sure you configure your RenderTexture to be the proper resolution/format for your needs.

 

Thanks this helped me a lot!