A cheat for seamless hex tiles

Making a seamless hex tile is a lot of work, especially if you want to rotate your tiles.

In some cases you can get away with letting the engine do some of the work.

Here is the strategy:

[dropcap style=”dark”]1[/dropcap]Take the texture you want to use for the tile. This texture need not be seamless.

[dropcap style=”dark”]2[/dropcap]Apply a hex mask such as the following to the texture:

mask mask2

This will give you tiles that look like this:

grass_hex sand_hex water_hex

[dropcap style=”dark”]3[/dropcap]In your game, let the tiles overlap slightly.

That’s it!

Here is how this looks for the three tiles above:

grass

sand

water

In the images above, I rotated the tiles randomly so that repetitive patterns are less obvious.

You can color your tiles procedurally to add a bit of depth:

sand_colored

The tiles can also be used in the same image:

all

You can combine the two effects as well:

full

full_zoomed_out

The problem with adjusting tile colors or using different tiles is that the resulting shapes are irregular, but not irregular enough that you can get away with it.

One way to get around this problem is to make your mask have jagged edges, so that the the overall shapes are irregular enough not to be displeasing.

blend_smooth2

screen_10

This technique works well when there are regions of identical tiles. If we adjust the colours as before, this technique is not so effective.

screen_11

1 thought on “A cheat for seamless hex tiles”

  1. Pingback: Tiles | Pearltrees

Comments are closed.

Scroll to Top