Simple Techniques

REFLECTION AND ROTATION

If your tile set allows this, you can reflect and rotate tiles randomly. Although you can store transformed tiles explicitly in memory, you can get these transformations for free (well, almost) by just changing the way you access pixels. For example, the following code will draw a tile reflected about the vertical access

for (i = 0; i < tile_width, i++)
  for (j=0; j < tile_height; j++)
    draw_pixel(tile[tile_width – i – 1][j], i + tile_x, j + tile_y)

Of course, you will typically not draw tiles pixel-by-pixel like this, but similar techniques apply. For example, if you use shaders to draw your tiles, a transformation can be done at the vertex level.

TILE VARIATIONS

Adding variations of tiles can considerably make a tiled world more visually appealing.

A common approach is to have two versions – one is a "filler" tile, the other a tile with an interesting feature. The feature tiles are sprinkled among a set of fillers.

An alternative approach is to have a few tiles that can be interchanged. These are then placed randomly or with some pattern. Both techniques can also be combined.

Above with prominent tiles, below with random tile alternates

TILE LAYERS

Using layers can be a great way to soften the gridiness of a tiled world. For example, stones and flowers can be put over a layer of tiled grass, perhaps using a Poisson distribution.

Transformations that preserve seamlessness

A strategy for creating seamless tiles is to start of with seamless tiles, and then transform them using transformations that keep the seamlessness intact. For example, a seamless tile of Perlin noise is created by this process:

1. Start with 8 tiles of white noise with frequencies 1, 1/2, 1/4, 1/8, …
   
2. Blur each tile (wrapping over edges). The blur radius is proportional to the inverse of the frequencies.
   
3. Add the blurred textures, using the frequency for weights.
   
4. Normalise.

Below is a list of some transformations (it is not a complete list). Many of these operations are trivial, but they form important primitives of more complicated procedures.

STRUCTURAL TRANSFORMATIONS

Reflection: Flip the tile vertically, horizontally, or diagonally.

Rotation: Rotate the tile through 90, 180, or 270 degrees.

Wrapped translation: Tiles can be translated in any direction by any amount.

Flipped, rotated, and translated tiles

COLOR TRANSFORMATIONS

Colour transform

A uniform colour transformation. Adjusting the hue, saturation, contrast, levels, etc.

The following three transformations are especially useful as primitive operations:

• gradient mapping
  
• thresholding, and
  
• normalisation.

Gradient mapping, thresholding and colour (or tone) normalisation

WRAPPED FILTERS

Blurring, sharpening, etc. can be done with convolution. Convolution can be done in Gimp [Filters | Generic | Convolution Matrix…] or Photoshop [Filters | Other | Custom]. Only Gimp allows you to set the filter to wrap. To make it work in Photoshop properly, tile duplicates of the texture in a 3x3 square. Apply the texture, and crop to the original size around the centre (make sure this is exact).

For some examples on image convolution, see here. (The numbers below the images represent a 3x3 matrix around the centre of the matrix that you can enter into Gimp or Photoshop.) If you are interested in implementing convolution, see Digital Image Filtering (PDF) for a readable introduction.

COMBINING MORE THAN ONE TILE

If two tiles are seamless, the following operations will yield a seamless tile:

• a weighted sum
  
• a weighted multiplication

If three tiles are seamless, one can be use to weigh a sum of the others, to yield a tile that is also seamless. This is very useful for creating more complicated effects using the simpler transforms described above.