Hexagonal Grid Overlay (approaches and implementations)

Hi! This is my first post, apologies if this isn’t the right place (feel free to move it).

I’ve been working on a game concept which uses a hexagonal grid, and hex coordinates – similar to civilization but substantially less complex. I’ve used a bunch of different resources to get to this point (including Amit Patel’s Hexagonal Grids resource, and Catlike Coding’s Hex Map tutorial), but I’m struggling to implement something not quite covered.

What am I trying to achieve?

I’m looking to implement a basic toggleable grid overlay to sit over my terrain. Something akin to the following screenshots… (I love the first, in particular, with the glowing edges)

I don’t necessarily want my grid to follow the terrain (as it does in Catlike Coding’s implementation, part 15), because for my water areas, I don’t actually render any mesh. It’s also important to note that while Catlike Coding instantiates a gameObject for every single cell, I do not. My maps are much larger and this seemed to be a big bottleneck in performance.

My Best Approach

So far the closest I have gotten to my desired results is a large plane over my world, with a grid texture applied, and the unlit shader subtracting (discarding) pixels that are of a certain color.

Unfortunately this makes the edges of my hex lines very pixelated, which obviously doesn’t look fantastic. I’ve not had much luck with other approaches, but performance is a concern because the map will be very large.

I’m wondering what other ideas people have for achieving what I’m looking for? Essentially I’m looking for very clean white lines depicting a grid, that should be toggleable and also performant.

I thought perhaps I could draw the hex in the shader itself, similar to how it’s possible to draw grid lines purely from within the shader, but I’m very new to shaders in general so haven’t considered how to implement something like this yet.

Appreciate all suggestions and thoughts!

1 Like

Actually Catlike’s tutorial does not use individual game objects for the hexes, that’s just the very first solution, later he replaces all of that with a generated mesh (and more than one after a while).

I suggest to check out the part where he does the outline: Hex Map 16

So it looks like part 16 goes into highlighting individual cells (not drawing the grid), but the grid still uses the same repeated texture, which in my case doesn’t seem to work great because I’m not drawing the texture onto a mesh that has a color. Instead I want to draw my grid on a separate plane (mainly because I don’t want to take any height variation into account).

Unless I’m mistaken as well, the highlight assumes that each cell has a “Hex Cell Label” game object which again doesn’t seem great. I’ll skim through to the end to see if this is addressed at some point…

I also downloaded their final package, and they do actually instantiate a gameObject for each cell - I wasn’t talking about rendering the hex chunk…