"Rounded" hexagon terrain. How to?

Until now I have simply rendered my ground as textured quads, offset in a hex pattern:


I thought it’d be cool to make adjacent tiles join together to form bigger shapes: deserts instead of plots of sand, etc.

Figured if I render hex-meshes instead of quads, I could give those hex-vertices color-key information to use as masks in the shader, for deciding what texture goes where.

And to soften up that unnatural hexagon look I figured I could average the colors on the corners of the hex meshes with the adjacent tiles to create smoother transitions between the “color-keys” / “masks”:


I haven’t tried to add textures back to the mix yet but I started to doubt this approach.

It looks quite washed out. I’m going for pretty defined borders between the different groups of tiles, but without that clearly hexagonal look.

Basically, I’m trying to figure out how can I create masks with shapes like these:


Should I be looking at marching squares?

How did they achieve this in Civ 5 and 6?


I dont know:)

But over at cat like coding thay have a very extensive tutorial on hex maps. It’s for Unity but the technics should be the same i think.

I know they cover serveral ways of soothing but I dont know if it holds the answer you seek as I havent read the whole thing.


Tons of useful information there, thanks mate.

The way i handled this is to actually use square tilemaps that overlap and are offset to hex positions on odd even y index.

There is a skeleton example below that could be extended to do the above although that topic focused on performance. The basic structure lends itself to this topic.

What you see in the image is most likely overlapping hex map with multiple layers were the top layer is mostly transparent with edges that are not. Most likely the selected tile is based on hex sides that connect and the tile used is automatically selected.


Thanks @willmotil!

I think I have a solution.

It’s a bit of a hack, if it works at all. We’ll find out…

As long as we never overlap the inner radius of adjacent tiles of another type we’re golden.

With this little shape (and a circle) we should be able to combine our way to those, and any other combination of tiles.


We will simply sample it once per tile plus once for every adjacent tile of the same type, and rotate accordingly.

I think we will be able to loop through every tile this way once, and generate one big texture mask for all tiles, add some blur to it and then use it in shader to mask the right texture.


I fear that one big texture mask for all tiles™ might be problematic though. But in my case I will have pretty small maps, so should be fine.

There might be tons of other reasons why this is a bad idea. I’ll find out the hard way…


So far so good:


That looks pretty cool. Good work on your solution.

I’ve always been a fan of the “Don’t make everything scale up until you need to scale up” approach.

1 Like

Thanks @ikanreed, and yes. They say “good is the enemy of great” but for me “great” is the enemy of “finishing this game”.

This approach is surely not even close to whatevers going on in CIV but it’s enough to break up the hex-look quite a bit:


As a bonus the blurry edges of the mask can be used as a built-in poor mans flow map to give the water a wave effect at it’s edges. two-for-one!

Good enough for me! :slight_smile:


Looks fantastic. Good work.

1 Like

For someone coming here in the future this might be relevant:

Noisy Hex Rendering

1 Like