Highlight border on tile from GridMap

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By beaverusiv

I am making a 3D isometric game and I want the tile underneath the mouse to have a border highlight on it, like this: Pasteboard - Uploaded Image

The solution needs to work no matter the location or scale of the tile as the camera can pan and zoom. I previously had a rectangle poly I moved over the tile the mouse was over but there must be a nicer way like a shader or 2D UI drawing

:bust_in_silhouette: Reply From: Wakatta

Get the position the mouse is over using ray-casting from the projected position of the camera/viewport.

Compare that position using GridMaps world_to_map(position)

Now you have a few options here

  • Draw directly to the map using a mesh_library
  • Use an upward facing Quadmesh MeshInstance with a Texture
  • Unproject Line2D or a CanvasItem’s drawn Rect2D
  • Use a shader like you mentioned

If you do decide to use a SpatialMaterial with an Albedo_Texture like this

which is the easiest method. Ensure to enable Transparency

I already have the code to intersect a ray, but thanks for mentioning it. I think I will go with a line2D as then I can guarantee visibility and consistent look no matter zoom levels. I will just have to unproject 4 points at each of the corners to calc size (and it’s isometric)

beaverusiv | 2021-04-04 20:02

That part is actually easy, from the world_to_map() position draw each point diagonally based on GridMap’s cell_size

Wakatta | 2021-04-04 20:19

Yup, that was generally my thoughts. From my existing code I already have the centre of the tile in world coords so easy to calc corners from that

beaverusiv | 2021-04-04 20:22