Tile Highlight Outline in a Grid System

I'm trying to find a handsome way to highlight tiles in a grid based game.

Examples:

I thought that the easiest way would be to dynamically generate meshes representing the highlighted tiles, and then applying a shader to it. Is that the way to go or am I overlooking something?

I tried it, but getting the UVs to work is really difficult.

Not sure if I'm just incompetent, but it seems kinda impossible to get it to have the UVs to match without seams like that. Maybe I don't need the UVs at all, and there's an easy way to do this? I'm not sure how to approach this, any suggestions? I've looked literally everywhere, but I can't find any ways to replicate that effect.

Thanks a lot in advance!

Both of the above examples are absolutely using bespoke meshes for the outlines. However that doesn't necessarily mean it's constructing a unique mesh for each outline. They may instead be using a set of premade meshes that handle each possible "outline shape" an individual tile might see and either placing those "tiles" down individually, or in part of a mesh generation program. Look into the concept of Wang tiles.

Basically you only need these tiles:

  • U turn
  • Outer convex corner edge turn
  • Single straight edge
  • Two parallel edges
  • Blank inner area

  • Single small corner turn

  • Two small corner turns on one edge

  • Two small corner turns on opposite corners

  • Three small corner turns

  • Four small corner turns

  • Outer convex corner edge turn with one small corner turn

  • Straight edge with two small corner turns

  • Straight edge with one small corner turn

  • Straight edge with one small corner turn on the opposite corner (can be just a mirror)

7424225--908657--upload_2021-8-16_22-59-16.png

With those tiles you can create any structure you need. Or you can simplify it down to quarter sized tiles and then you only need 4 tiles to make everything:

  • Convex corner outer turn
  • Small inside turn
  • Straight edge
  • Blank

7424225--908663--upload_2021-8-16_23-4-47.png

2 Likes

Can’t thank you enough, that’s super helpful! In case anyone else sees this, searching for wang tiles lead me to autotiling which lead me to this tutorial describing exactly how to implement it.

Thanks a lot! It should be smooth to implement from here. Cheers!

1 Like