Highlighting Specific Map Regions

Hi,
I'm creating a 2D RPG game and my game map has insanely complex shapes -- I want to have them change color when the mouse hovers over but I'm not sure how since the shapes are so complex.

I attached an example img

I was going to try slicing apart my map into the complex shapes and make each map region (shape) a child of a parent map object, but it feels a bit weird to slice apart the map into separate sprites -- any ideas how to highlight specific regions?

Thank you.

 

Separating it in to different sprites would make it pretty easy to highlight because you could modify the SpriteRenderer.color property.

 

Code (CSharp):

1. using System.Collections;
2. using System.Collections.Generic;
3. using UnityEngine;
4.  
5. // attach PolygonCollider 2D
6.  
7. public class ChangeColor : MonoBehaviour
8. {
9.     SpriteRenderer sprite;
10.     Color m_OriginalColor;
11.  
12.     void Start()
13.     {
14.         sprite = GetComponent<SpriteRenderer>();
15.         //Get original color of GameObject
16.         m_OriginalColor = sprite.color;
17.     }
18.  
19.  
20.     void OnMouseOver()
21.     {
22.        sprite.color = Color.grey; // or any color you want
23.  
24.     }
25.  
26.     void OnMouseExit()
27.     {
28.         sprite.color = m_OriginalColor;
29.     }
30.  
31.  
32. }

https://docs.unity3d.com/ScriptReference/MonoBehaviour.OnMouseOver.html

Got it thanks!

I'm also working on having a little box (GUI???) appear on hover, but I want it to consistently appear to the upper right of the cursor as the cursor moves around the specified region -- any ideas how can I get a GUI with text to follow the cursor around in a specified spot?

Thank you

 

So your cursor moves around in screenspace. The sprite, in contrast, has a transform from which you can access the .position property. That's in worldspace. What you need is to convert between the two.

Code (CSharp):

1. var mouseWorldPos = Camera.main.ScreenToWorldPoint(Input.mousePosition);
2. var screenPos = Camera.main.ScreenToWorldPoint(yourObjectWorldPosition);

You could use one of two approaches: (1) send a ray to detect what's under the mouse (Input.mousePosition) and grab the tooltip info from your object, (2) use your OnMouseHover hook to then supply your UI with its info. Doesn't matter which way. If the mouse's perspective is better ("what's under the mouse right now?"), then use the ray. If it's easier to think about from the object bubbling up a "hey, I need a tooltip" request then use that.

To have something follow the mouse, use Input.mousePosition and move the UI element around with that, plus your offset from the cursor.