Tile grids for artists

Why you need this

Stage 4 of the art pipeline builds the world out of tiles, small squares that repeat. The grid they sit on constrains everything you draw for it: where a character's feet go, how tall a door is, which tiles may sit next to each other. This page is the grid from the artist's side. The programmer's side, how a generator picks which tile goes where, is the Dynamic map generation cluster's "Tilemaps and autotiling" page.

The idea

Tile size

A tile is a square image, 8, 16, or 32 pixels on a side, and a tilemap is a grid of tile ids the engine draws as a floor, a wall, or a background. The size trades detail against screen coverage. At 8 pixels a tile holds a single symbol: a brick, a blade of grass. At 16 it holds a recognizable object: a bush, a crate, a door. At 32 it holds texture and shading inside the object. Coverage goes the other way. A phone screen 360 pixels wide at 1x shows 45 tiles across at 8 pixels, 22 at 16 (360 / 16 is 22.5, so 22 whole tiles and half of one), and 11 at 32. At a 3x display scale the same phone shows 7 tiles of 16 pixels across, about one room. The running example packs are 16 and 32.

The grid as a constraint

Everything in a tiled world lines up to tile edges. A wall ends on a tile boundary. A door is 1 or 2 tiles wide. Characters are usually 1 tile wide and 1 to 2 tiles tall, so a 16-pixel grid gives a 16 by 16 to 16 by 32 character, with the feet on a tile edge so the collision box matches the floor. Anything that does not line up either gets its own free-positioned sprite or reads as a mistake. The constraint is also the gift: because everything is on the grid, a map generator can place tiles by id without knowing what they look like.

Tile sheets and ids

Tiles are stored together on a tile sheet, one image holding a grid of tiles, and each tile has an integer id saying where on the sheet it is. With $C$ tiles per row and tile size $s$, id $i$ is at column $i \bmod C$, row $\lfloor i / C \rfloor$, top-left pixel $(s \cdot (i \bmod C),\; s \cdot \lfloor i / C \rfloor)$. On a 16-pixel sheet 8 tiles wide, id 19 is column $19 \bmod 8 = 3$, row $\lfloor 19 / 8 \rfloor = 2$, pixel $(48, 32)$. The sheet's layout is part of the contract: moving a tile changes its id and every map that used it.

Seams

A seam is a visible line where two tiles meet. Because a tile repeats, any error at its edge repeats at every copy: one column of pixels a step too light on the right edge of a grass tile becomes a faint vertical stripe every 16 pixels across the whole field. The test is to place the tile in a 3 by 3 block of itself and look for the grid. Tileable textures and tilesets covers making edges that wrap.

Edge signatures

Each of a tile's four sides has a signature: the material that reaches that edge. A plain grass tile is grass on all four sides. A transition tile might be grass on its north and west sides and dirt on its south and east. The rule that makes a map look right is that only matching sides may touch: grass against grass, dirt against dirt. Every tileset is, underneath, a list of tiles and their four signatures, and a map generator uses exactly that list to decide which tiles can be neighbors. When you draw a tileset you are drawing that list, whether or not you write it down.

The 16-tile autotile set

An autotile set lets the engine pick the right transition tile by looking at a tile's four neighbors, north, east, south, west (the von Neumann neighborhood, 4 cells). Each neighbor either is the same terrain or is not, so there are $2^4 = 16$ cases and one drawing per case. Give north the value 1, east 2, south 4, west 8, and add up the neighbors that match; the sum is the tile's index. The full drawing list for a grass region on dirt, where a letter means that neighbor is also grass:

Index	N	E	S	W	What the tile shows
0					Lone island, dirt border on all four sides
1	N				South end of a vertical strip
2		E			West end of a horizontal strip
3	N	E			Bottom-left outer corner, borders on S and W
4			S		North end of a vertical strip
5	N		S		Vertical strip, dirt on both sides
6		E	S		Top-left outer corner, borders on N and W
7	N	E	S		West edge, border on W only
8				W	East end of a horizontal strip
9	N			W	Bottom-right outer corner, borders on E and S
10		E		W	Horizontal strip, dirt above and below
11	N	E		W	South edge, border on S only
12			S	W	Top-right outer corner, borders on N and E
13	N		S	W	East edge, border on E only
14		E	S	W	North edge, border on N only
15	N	E	S	W	Full interior, no border

What the 16-set cannot do is inner corners: where a grass region has an L-shaped notch, the diagonal neighbor matters and the 4-neighbor set has no tile for it, so the notch shows a wrong edge.

The 47-tile blob set

The blob set fixes that by looking at all 8 neighbors (the Moore neighborhood). A diagonal only matters when both orthogonal neighbors beside it match, so of the $2^8 = 256$ neighbor patterns only 47 produce a distinct drawing. The extra tiles are the four inner corners and every combination of inner and outer corner on one tile. It is the standard for terrain that curves and pools, and purchased top-down tilesets ship either the 16 or the 47. Artists rarely draw all 47 by hand; they draw corner and edge pieces and assemble the set from them.

Layers

A map is several tilemaps stacked. The ground layer is opaque and covers every cell. The decor layer sits on top: bushes, rocks, signs, drawn on a transparent background so the ground under them shows through around their edges, and one bush tile works on grass, dirt, or sand instead of needing three copies. The collision layer is invisible, one bit per cell, walkable or not, edited alongside the art so a table the player cannot walk through has a solid cell under it.

Worked example

A grass-on-dirt transition set arranged as it would be drawn on the sheet: a 3 by 3 block of 16-pixel tiles with corners, edges, and center in their natural positions. Each character stands for one 4 by 4 block of pixels, so each tile is 4 characters wide.

d d d d  d d d d  d d d d
d g g g  g g g g  g g g d
d g g g  g g g g  g g g d
d g g g  g g g g  g g g d

d g g g  g g g g  g g g d
d g g g  g g g g  g g g d
d g g g  g g g g  g g g d
d g g g  g g g g  g g g d

d g g g  g g g g  g g g d
d g g g  g g g g  g g g d
d g g g  g g g g  g g g d
d d d d  d d d d  d d d d

g grass, d dirt; one character is a 4 by 4 pixel block of a 16-pixel tile.

Against the table: the top row is indexes 6, 14, 12; the middle row 7, 15, 13; the bottom row 3, 11, 9. Together the nine tiles form one grass patch with a dirt border. The remaining seven tiles of the 16-set, the strips and the island (0, 1, 2, 4, 5, 8, 10), go in a second row on the sheet. Every d edge here is a flat 4-pixel band; a real border would be an uneven 2 to 4 pixels with a few stray grass pixels crossing into the dirt, and the north edge of tile 14 must match the south edge of tile 11 pixel for pixel or the patch shows a seam.

In a game's art pipeline

Stage 1 fixes the tile size along with the resolution, because character height, door height, and screen coverage all follow from it. Stage 2 draws each tile to read at 1x inside its own square. Stage 4 is where this page lives: tiles get their edge signatures, the autotile set is completed, layers are separated, and every edge is checked for seams by tiling it 3 by 3. Stage 5 packs the tiles onto a sheet whose layout is now a contract with the engine, and Adapting purchased packs starts by working out which autotile convention a purchased sheet follows.

Common mistakes

• A one-pixel error on a tile edge. Symptom: a faint grid of lines across every large floor, spaced exactly one tile apart.
• Decor drawn on an opaque ground. Symptom: a bush with a square of grass around it sitting on a dirt path.
• Characters not aligned to tile edges. Symptom: feet floating above the floor or sinking into it, and collision that disagrees with the picture.
• Missing inner corners. Symptom: an L-shaped grass region shows a straight edge where the notch should curve; the 16-set is being asked for a 47-set shape.
• Reordering the sheet after maps exist. Symptom: every map shows the wrong tiles, because ids moved.

Cost

A tile takes minutes to draw at 16 pixels and about four times that at 32, since the pixel count quadruples. The multiplier is the set: one material with a 16-tile autotile set is 16 drawings, with a blob set 47, and every terrain pair that touches (grass-dirt, grass-water, dirt-water) needs its own set. On disk the cost is small: a 16-pixel sheet 8 tiles wide holding 48 tiles is 128 by 96 pixels, a few kilobytes as an indexed PNG. It starts to hurt when a game wants many terrains with seasonal variants, which is why purchased tilesets exist and why recoloring a palette is cheaper than drawing a new set.

Going further

• Tileable textures and tilesets, for drawing edges that wrap without seams.
• Adapting purchased packs, for reading the autotile layout of a sheet you did not draw.
• Isometric pixel art, for the same ideas on a diamond grid.
• Tilemaps and autotiling in the Dynamic map generation cluster, for how the engine turns neighbors into an index.