The 5-Tile Solution!

Have you ever wanted to make your own tileset for a procedurally generated game, only to realize that to account for every permutation you’d have to draw out a lot of tiles by hand?

I have. And I thought to myself “Droqen, there has got to be a better solution!” and proceeded to make that better solution.
If you have some programming magic inside of you, then you, too can make this very same solution with five tiles created by you (in this case, created by MrLL!) turned into a tileset that can account for any possibility.

It's an involved process, but if you can pull it off... the benefits are totally worth it!

You can do it too!

The process is a bit in-depth, so those who have heart problems, back problems, or are pregnant may want to get off the ride now.

In some cases, you might need to consider additional cases — but this will bring your tile count to at most eight, still well below the hefty minimum of sixteen you’d have otherwise.



If we make a 10×10 grid of 16×16 tiles, it can be further divided into a 20×20 grid of 8×8 tiles. This is truly the heart of what we’re doing here — instead of manually cutting up quarters of tiles to make all possible combinations ourselves, we’re letting the program do it.

5 becomes 20!

Divided Tiles

See how they’re divided? Now, instead of what would be done normally:

  • That is, checking each tile’s neighbour (each tile has 4-8 neighbours, depending on whether or not you need to check certain diagonals — sides are a given, though) and picking from a large pool (at least 2^4 = 16 different hand-made tiles, and that’s the bare minimum)

We can instead check each corner separately, and that’s effectively allowing us to assume certain sides are touching. Since tiles are 16×16 in size and a corner is just 8×8, we assume three directions (the directions to the other corner tiles) to be filled already.

At most, just three areas to check!

As you can see, if that darker corner piece is the current corner being handled, there are only three areas it cares to consider. Two sides, and the corner. At worst, you would have to make eight different tiles to account for everything, but not every combination is necessary in some cases.

At best, using this method to handle a tileset that only cares about sides means you need to make just 4 tiles — instead of the usual 16.


I hope that got the concept across alright. If you want to see a coded example, I have one made, but it’s in Python. I don’t know who’d be interested :x

I could write another example in FlashPunk, or something.

My code style is not the neatest.

In any case, if you have any questions or concerns, you can contact me any time! This is my first “how to use code to do something” post, so I hope I managed to explain myself well enough.


About Droqen

Droqen is a game designer/developer/creator/etc. from Toronto, Ontario. View all posts by Droqen

2 responses to “The 5-Tile Solution!

  • Zet

    Hello! I would be interested in your example code. Flash w/ FlashPunk or Python works for me. PCG has always been an interest to me. Could you recommend some code snippets or something in that area as well?

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: