How do I make a seamless hex tile?

In this post I give two methods for making hexagonal tiles that will tile seamlessly. The methods use any method that can be used to make rectangular tiles that will tile seamlessly, such as the standard filters that come with Photoshop or Gimp.

I adapted the methods below from Turning Square Tiles into Hex. With the original methods, the textures are stretched or rotated in the final result. Here, I added steps to correct this. The original methods was also given for hex tiles that fit in a square; the methods below are for regular hex tiles.

I give two examples for each method. The first image is an actual candidate for a tileable texture; the second one gives more insight in how the method works.

Tips

When you use one of these methods for the first time, use an image like the second one (and use the size 1024×1024) to go through all the steps. It’s tricky to get all the steps right, and using a more structured image will help you find problems faster. You will also be able to compare the dimensions of the image with those given below for each step. Once you have the method down, you can try it on proper textures.
The quality of the end results depends on properties of the base texture you use, and the quality of the algorithm you use for the step where you make the images seamlessly rect-tileable. You should preprocess the texture in the same way as you would making a seamless rect tile. Gimp’s algorithm (used below) is not very good. It uses a overlap-and blend method, which only works well on certain types of textures. The best (as far as I know) way to make a seamless tile is to overlap a tile with itself, and quilt the images together where they overlap, although I am not sure which plug-ins you could use to do this (if you know, please share in the comments!)

Method 1

Take an image you want to use as base. It need not be tileable, but must be at least as big as the final tile you want to make. I show each step with two images.

Let’s assume you want to make a flat hex tile with height S, and that your texture is S × S. In the examples below, I show how to make a hex tile that is 1024 pixels high, so S = 1024.

Step 1

Scale the image to size S × √3S, in other words, scale the width by 173%. The image will now be vertically stretched. Step 3 will fix this distortion.

Step 2

Crop a S x S square anywhere from the image.

Step 7

Step 3

Scale the image to (√3/2)S × (1/2)S, in other words, scale the width by 86.6%, and the height by 50%. You can see in the second image the distortion is now fixed; the squares in the image are square again.

Step 4

Make the rectangle seamless.

For instance, in Gimp, you can run the Make Seamless filter (From Filters | Map | Make Seamless). Or you use the Make Seamless Advanced plugin.

If whatever algorithm / filter you use preserves the tile size, good. If the algorithm or filter reduces the size by the overlapping amount, make sure the overlapping amount for x and y is in the ratio √3/2 : 1/2. (or 1.73 : 1). For example, if the overlapping y is 100 pixels, then the overlapping x should be 173 pixels. This means your image will have the same aspect ratio after the algorithm executed. You can then scale it back to √3/2S × 1/2S without any distortion.

Step 5

Tile the image 2 × 2: repeat the image four times in a 2 × 2 grid.

In Gimp, you can use Filters | Map | Tile. Set the units to %, and set both x and y to 200%.

Your image should now be √3S × S, in other words, the width will be 173% the original width, and the height will be the original height.

Step 6

Now crop a regular hex with height S from it.

The resulting image can now be tiled seamlessly: