We have used tiles to decorate our living spaces for more than 4000 years. Tiles have several properties that make them attractive for use:

• they can be mass-produced;
  
• they are easy to build with (because of their geometric properties); and
  
• combinations of tiles lead to a huge number of decorative options.

Early game makers recognised that these advantages of tiles also apply to tiles in computer graphics, and using tiles was (and still is) a popular way to make game graphics.

In computer terms, here are the advantages of a tile system:

• it is efficient,
  
• it is easy to program,
  
• and a few tiles give you a huge number of possible game maps.

The last point is really the one that makes tiles shine, and it really comes to its full with procedural content generation. We can create vast worlds, and have them beautifully drawn with handcrafted tiles.

But tiled games can also suffer from some defects:

• the geometric regularity of tiles might be less appealing than organic design; and
  
• the repetition can be jarring.

This tutorial addresses these two problems, with heavy focus on seamless tiles.

Some Tile Basics

GRIDS

Square grids are the easiest to work with, and are by far the most common. Choosing a different grid will have a considerable impact on the game, and can go a long way to make your world more organic. Two other tile-systems are commonly used: hexagonal tiles, and triangular tiles. All three systems can be scaled, sheared or rotated without affecting the basic principles.

The algorithms in this tutorial are described for square tiles, but they can all be modified for triangular or hexagonal tiles.

Other tilings are possible, but are complicated to implement – perhaps too complicated for a game. For instance, Penrose tiling uses two simple tiles, but it leads to some seemingly irregular patterns. I know of no computer game that uses this tiling for map layout, but several puzzle games use the intricacies of Penrose tiling as a play mechanic.

A FEW DEFINITIONS

region: In this article, we will use the term "region" to describe a contiguous area that is covered with the same "texture", such as grass, sand or wall. Regions might be made up of several tiles, and, as will be discussed below, need not cover all tiles fully.

logical grid: This is the grid used to store information about the world. For instance, this grid might contain information on whether a character may move into this cell or not, or the type of cells.

tile grid: This grid contains information about the tiles used to represent the cells in the logical grid.

It is possible to combine the two grids, but it is often not advisable. For instance, a cell might be a grass cell in the logical grid, but can be one of three variations of tiles. Using two separate grids allows you to "paint" the tile grid (based on the info in the logical grid) according to some rule, without the cells in the world grid having to know anything about the surrounding cells. Some algorithms require separate grids.

SYMMETRIES

It is important to understand the symmetries of your tiling system. You can take advantage of symmetry to optimise algorithms and add variety. You should carefully consider (and then specify) the symmetries that your tiles will have before you start making them.

There are three symmetries to consider.

Symmetries

• Tile shape symmetry. Ignoring any image on the tile, how can it be rotated or reflected?
  
• Tile match symmetry. This is the symmetry of tiles as they can be aligned. For example, you can make a tile that is asymmetric, but can still tile seamlessly with a copy of itself rotated through any multiple of 90 degrees. A tile cannot have more match symmetries than shape symmetries.
  
• Tile image symmetry. This is the actual symmetry of the image of the tile. A tiles cannot have more image symmetries than tile match symmetries.

For example, the tile inset has:

• no image symmetry;
  
• 5 match symmetries (4 axes of reflection, and rotation through 180 degrees); and
  
• 7 shape symmetries (4 axes of reflection, and rotation through 90, 180 and 270 degrees)