Introduction
Hexagon shaped tiles are often used for tabletop role playing games or turn based games on PC. Finding a texture that can be tiled along six different sides can prove difficult, since your average seamless texture is often square. I’d like to cover a few simple ways to create your own seamless hexagon textures, or even tilesets. Even more convenient, our favorite free map editor (Tiled) is perfectly capable of creating maps using a hexagonal tile grid. Creating seamless hexagon textures is actually far simpler than it seems! There are a few different ways to achieve a seamless hexagon texture, and I’ll be compiling them here! I’ve personally chosen a particular orientation and specific proportions to keep things simpler, so I’ll be using multiples of 32 instead of any odd dimensions. But you are free to experiment!
Method 1: Scale and Crop
For this example, I have selected a 128×128 seamless texture of a brick wall, but feel free to use any texture you like. The one detail that matters is that this texture is seamless to begin with! There are a few tricks to making seamless textures, but that is for another day.
The first thing to do once you have selected or created your seamless texture is to scale the texture down so that it can be tiled and cropped in a particular fashion. The formula I use to determine this size is rather simple:
Height/2, Width*0.75
With a texture that is 128×128, if we multiply the width by 0.75, the result is 96 (Essentially scaling it down by 32 pixels) Now if the height is divided by 2, the resulting texture should be 96×64.
Scaled Down Texture
The reason for this funky resizing comes down to how the hexagons themselves actually line up with one another. The hexagonal grid on a map is staggered, so every tile lines up with the next tile shifted up or down by half a tile-width (in this case, that would be 64 pixels) To get an idea of how this little texture is going to form the finished hexagon, here is an example showing the way the texture is tiled across multiple hexagons.
Interlocking Hexagons
The next step is to tile the texture so that it can be cropped into hexagons! This time, we want to tile the texture along both axes, so the image size is essentially doubled in both directions. We want the height to be the same size as our original texture, and our width to be twice the size of our smaller rescaled texture. For our 96×64 texture, tiling along both directions gives us a resulting size of 192×128
Final Tiled Texture
The hardest part is now over! Resizing and tiling the texture takes all of 30 seconds, but the final step is to crop it into a hexagon! All that is left is to select an area anywhere on this texture and crop a 128×128 hexagon from it, and the result will be a lovely seamless tile.
Cropped Hexagon Tile
The resulting hexagon can now be tiled along every axis and easily imported into Tiled Map Editor. Check out the result:
Final Seamless Hexagon
While not required, you can also add outlines to the hexagons to make them form a grid when placed on a map. I tend to use a 1px wide line. This will create a 2px wide line wherever two tiles line up next to each other. Feel free to make the line thicker if you’d prefer to have a more visible grid.
Final Seamless Hexagon with Outline
This method allows for quick and easy creation of seamless hexagons where you aren’t too worried about repeating patterns in your textures. You can always bring them back into your favorite graphics editing software to further edit things to your liking.
Method 2: Tile and Rotate
This next method is a little bit different, and typically works well when you want more detail, but due to the way the texture is rotated in the process, you may not wish to use textures with patterns or straight lines. To give an example of this, I will use the same brick texture from above so the difference will be quite noticeable. Instead of resizing the texture this time, we are going to increase the size of the canvas to twice the height and width of the original texture. If we are using the same 128×128 texture from Method 1 above, our new canvas size will be 256×256. This also means that the increase itself is equal to half the size of the original texture (64px in each direction)
Enlarged Canvas by a factor of 2
This leaves a bunch of empty space that now needs to be filled with copies of our original 128×128 texture. You can do this however you wish, from selecting the entire texture and simply placing copies around the edge, or you can slice it into halves and duplicate those, but the end result will be the same. All that is important is that you tile the original texture inside the newly created space on the canvas.
Texture Tiled in Each Direction
Now the tricky part for this technique is the rotation. You need to use a tool that has smooth 45 degree rotation or you could end up with some strange effects or distortion. I highly recommend a tool like like Aseprite for this step, but you can use GIMP or any other graphics software you like. The 256×256 large texture created in the last step needs to be rotated by 45 degrees. It doesn’t matter which direction, but for this tutorial, I’ll be rotating to the left.
Rotated Texture
This rotated texture now needs to be scaled a certain way, following another formula. For the width, add the width of the original texture (128) to the width of the larger tiled texture (256) and we get the number 384. For the height, simply scale down to the height of the larger tiled texture (256.) Since we started with a 128×128 texture, the resulting diamond will be 384×256. So remember:
Width = Original Texture Width + Tiled Texture Width
Height = Tiled Texture Height OR Original Texture Width / 2 + Original Texture Width
Texture Resized to 384×256
All that is left now is to crop a 128×128 hexagon out of this diamond and the resulting tile will be completely seamless! For your convenience, here is my favorite 128×128 hexagonal cropping mask:
Cropping Mask
Feel free to right click and save this cropping mask to use in your graphics program of choice. If cropped directly from the center of the texture above, you should end up with something that looks like this:
Finished Seamless Hexagon
As you can see, this is not ideal for every type of texture, but works great with terrain or water, or any texture you would not like to repeat so many times. Method 1 results in a more noticeable tiling, while Method 2 allows for more detail. Now go forth and create as many seamless hexagons as you wish! Or you can simply download some free, premade Seamless Hexagon Tiles from Screaming Brain Studios to start messing around without the fuss of having to make your own!