Frogatto implements a common feature in modern tile-based games, called “auto-tiling.”  For those who aren’t familiar, here’s a quick description.

a typical 8-bit brick tile

The earliest tile-based games, usually 8-bit or pre-8-bit games like super-mario brothers, had very simple tiles.  For a given kind of tile, they typically only had a single image.  They didn’t have borders, they didn’t have edges; no variations.  Just one, single image which would get repeated over and over again.  This was about all they could achieve with the limited graphics and memory on ancient systems; with the few colors available onscreen, and with tools to make game graphics in their infancy, it was more of an achievement to ship a game at all, than to try the herculean task of trying to make it look good.

Borders:

some early, bordered tiles from frogatto

The next obvious step was making tiles that had visible borders  Rather than drawing just one tile, you would draw a set of tiles that had a visible edge on them.  The set of possible arrangements of one tile next to the surrounding 8 is finite, and can be completely drawn;  the set of common arrangements is even smaller, and if you choose to draw only those, it actually becomes trivial (perhaps only some dozen unique tiles to provide all the common arrangement).  After that, perhaps you would make a few unique variations of common tiles; alternate versions of a tile to be randomly used to make something more organic.

The problem:

To anyone who has worked on creating levels for a videogame, this creates a great deal more work, not merely in making the graphics, but in editing the levels.  Editing the levels is much like using a simple bitmap graphics program (like ms-paint), you select a type of tile to place, and you click to ‘draw’ them with a pencil tool.  The problem is each different border tile gets treated as a separate thing you have to choose to place.  Where before you had only one ‘brick’ tile, you now have over a dozen of them, each representing a possible border arrangement.  You have to constantly flick back and forth between your palette of tiles and the level you’re placing them on, whereas before you could just select one tile, and freely paint a whole section filled with it.  It’s a classical “efficiency expert’s” nightmare.

The Solution:

What autotiling automates.

The first thought that popped into anyone’s mind, frustrated by this, was “geez, can’t we program a computer to do this for us?”  Given the simple, mathematical nature of the problem, the answer was “yes”.  Autotiling is exactly that.  It is a system where, as you draw tiles onto a level, the game automatically checks the surrounding tiles and places the border tile appropriate to that spot.  All you have to do is select a general type of tile, such as brick, or grey stone, and draw in the arrangement you would like;  the game automagically picks the correct arrangement of borders appropriate for what you placed.

An set of the components needed to freely arrange borders.

In an upcoming post, I’ll describe how frogatto’s auto-tiling system works from the programmer’s point of view.