How do I make a seamless hex tile that can be rotated?

In this post, I describe one way of making a hex tile that can be tiled seamlessly, even when the tiles are rotated by (different) multiples of 60 degrees. This is a quick-and-dirty method, and works well only for certain types of tiles.

[dropcap style=”dark”]1[/dropcap]Make a seamless hex tile as explained in How do I make a seamless hex-tile? But do not perform the final crop. If you used the second method, you will have a diamond-shaped image, like this:

bricks_diamond

[dropcap style=”dark”]2[/dropcap]Duplicate the layer until you have six. Rotate the layers as follows:

6 (Top) 300
5 240
4 180
3 120
2 60
1 (Bottom) 0

bricks_star

(I usually duplicate the top layer, turn it by 60 degrees, and repeat until I have 6 layers).

[dropcap style=”dark”]3[/dropcap]Set the layer opacities as follows:

6 (Top) 16.6%
5 20%
4 25%
3 33.3%
2 50%
1 (Bottom) 100%

This will make all 6 layers equally visible.

bricks_star_transparent

[dropcap style=”dark”]4[/dropcap]Flatten the layers.

[dropcap style=”dark”]5[/dropcap]Crop the hexagon from the center of the image. If you used Method 2 for creating the seamless hex tile, your hex will have half the height of the diamond you started with.

bricks_seamless

Enhancements

Other transparency modes

You can use other transparency modes, but you have to make sure that each layer has equal weight in the final composite. For example, if you use addition, you need not set the opacities. (You would probably make the layers much darker, to prevent oversaturation). Here is an informal guide to blending layers for this purpose:

  • Normal, Dissolve: Opacities from bottom to top: 100%, 50%, 33.3%, 25%, 20%, 16.6%.
  • Addition, Lighten, Screen: All opacities 100%; make images darker.
  • Multiplication, Darken: All opacities100%; make images lighter.
  • Difference, Exclusion: All opacities 100%. (The result does not resemble the original at all).
addition ligten darken
Addition Lighten Darken

Putting in a central feature

Apply a circular gradient mask to the original texture, and overlay it over the seamless tile.

mask feature feature_alpha
Mask Feature Feature combined with seamless tile.

 

You can also use this with tiles made with a different blending scheme:

feature_addition feature_lighten feature_darken
Feature combined with seamless addition tile. Feature combined with seamless lighten tile. Feature combined with seamless darken tile.

 

Here is how this looks tiled:

tiled

2 thoughts on “How do I make a seamless hex tile that can be rotated?”

  1. Pingback: Tiles | Pearltrees

  2. Pingback: A cheat for seamless hex tiles | Gamelogic

Comments are closed.

Scroll to Top