So I’ve been experimenting a lot lately with rendering lines on the ground, for the map in strategy and tactics games. Last post I already had this effect working for a square grid, but it wouldn’t work for hex grids because it was dependent on drawing pixels to match the grid. I ended that post by brainstorming ways to support hex grids, and have had great success working on the problem since then.
I uploaded a WebGL demo to try, and here’s a video showing the territory outlines shader working on both square and hex grids:
To start with, I started building a hex grid mesh by following this tutorial series. I was intending to use vertex colors on this mesh instead of the texture from before, but then I realized the colors wouldn’t work out correctly for hexes on the edge of a block of territory. The problem is somewhat subtle to explain, but basically for individual hexes on the edge, all the perimeter vertices would be black, resulting in those hexes being outlined separately from the rest of the territory block.
So that approach wasn’t gonna work. However, in the course of experimenting with that, I realized the zig-zaggy lines I saw last post were due to compression artifacts. doh, the blurred texture I tested with had compression on in the import settings! Once I set it to uncompressed, the lines smoothed right out.
Once I got over feeling sheepish about that mistake, I realized I could use the hex grid with vertex colors to render a blurry texture. Thus, while the original purpose of the hex grid didn’t work out, I still used it to accomplish this effect. Here’s a gif showing the hex tiles turning white when clicked on:
I setup an orthographic camera facing down to render the black and white grid to a RenderTexture, put a blur effect on that camera, and then assigned that texture to the outline shader. The video at the top shows the result!
