Tuesday, August 09, 2011

Making Seamless Hex Tiles

I know I haven't posted on this blog in ages, but recently I came across a world-building problem for which I could not find a suitable answer on the Internet: How to make seamless hex map tiles.

Where it seems like a very difficult task (matching up 3 pairs of borders) it actually has a very simple and elegant solution.

First, most major image manipulation programs have a "make seamless" feature that tiles and blurs over an image to make it seamless on four sides.

For example: The GIMP's function can take any rectangular image and make it tileable by using the "Make Seamless" command. Unfortunately, it doesn't directly work with other shapes (like our hex) or some arbitrary outline.

However, this filter will work perfectly to give us exactly what we want, as we can "simplify" a hex map into a rectangular map which it *can* make seamless for us.

Imagine a map of tiled hexes and take a close look at the pattern:

It's regular. It repeats.

Since the GIMP can tile rectangles, can we express this sort of repetition as a set of rectangles?

You bet we can:

So now we're dealing with the following rectangular unit to tile:

Assuming your hex occupies a square image, the rectangle is 1 unit long by 1.5 units tall.

So all we need to do is go into the GIMP and make a rectangle that fits those dimensions and make it seamless. In my case, since my hex tiles were 256x256 pixels, this made the rectangle 256x384 pixels:

(Here's the seamless texture. A small plot of grass hit with the Filters->Map->Make Seamless command.)

Next, you'll need to plop the texture down onto a hex outline so that it is flush with both vertical sides. Even though the texture is a full half taller than your hex, it doesn't matter. Provided that the edges are flush and the entire hex is full of the texture, all you need to do is clip it to the hex's outline.

I've done this in Inkscape, where I've made my hex outline using the Polygon tool, and then used the Clip->Set command to trim the duplicated textures to the hex.

VoilĂ ! You now have a seamless, tileable hex!


Labels: , , ,


Blogger Landestroyer said...

This is very helpful, thank you!

8:22 PM  
Blogger Steve Finnell said...


According to Calvinists, God has only offered grace to a select few who were individually predetermined for salvation before man was created. Is this what the Scriptures proclaim? No, they do not.

2 Timothy 3:16 All Scripture is given by inspiration of God..(NKJV)
The words of John Calvin are not Scripture.
The words of the apostle Paul are Scripture.(SEE: 2 Peter 3:15-16)

The apostle Paul wrote the letter to Titus. Titus is Scripture. John Calvin did not pen one single verse of Scripture. Calvin's words were not Scripture. If John Calvin's writings were inspired by God, then they should be included in the Bible.


Titus 2:11 For the grace of God that brings salvation has appeared to all men. (NKJV)

Titus 2:11 For the grace of God has appeared that offers salvation to all people. (New International Version)

Titus 2:11 For the grace of God has appeared, bringing salvation for all people. (English Standard Version)

Titus 2:11 For the all saving grace of God has been revealed to all men; (Aramaic Bible in Plain English)

Titus 2:11 For the grace of God that brings salvation hath appeared to all men, (King James Bible)

The free gift of salvation has been offered to all men who will accept God's terms for pardon.

1. Faith: John 3:16
2. Confession: Romans 10:9
3. Repentance: Acts 3:19
4. Water Baptism: Acts 2:38

YOU ARE INVITED TO FOLLOW MY BLOG. http://steve-finnell.blogspot.com

3:02 AM  
Blogger Fox -AJ- said...

Just found this, a great explanation on how to build tileable assets from complex shapes. It was exactly what I needed. Thanks!

10:40 PM  

Post a Comment

<< Home