Tileable textures and tilesets

Why you need this

A game world is thousands of screens of ground, wall, and water, and nobody draws thousands of screens. You draw a handful of tiles and the engine repeats them. Stage 4 of the pipeline, build the world, is mostly this page: tiles that repeat without a visible seam, a transition set that lets two terrains meet, and a few habits so the eye never notices the grid. The map generators in the Dynamic map generation cluster assume the tiles they place already obey these rules.

The idea

Seamless means the edges continue

A tile is a small square image, 8, 16, or 32 pixels on a side, placed on a grid. A tile is seamless when its right column of pixels continues naturally into its own left column, and its bottom row into its own top row. That is the whole definition. When the engine places the same tile twice side by side, pixel $(7, y)$ of the left copy sits next to pixel $(0, y)$ of the right copy, so any mark that touches the right edge must resume on the left edge in the same row.

An 8-pixel grass tile, with one dark tuft deliberately split across the vertical seam:

g g g g g g g g
d g g g g g g d
g g l g g g g g
g g g g g d g g
g g g g g g g g
g l g g g g g g
g g g g g g l g
g g g d g g g g

g grass #4c8a3a, d dark grass #2e5c2a, l light grass #74b64a.

Row 1 has d at column 0 and at column 7. Placed side by side, those two pixels meet and form one 2-pixel tuft, and nothing says where one tile stopped. A tile with no marks near its edges is trivially seamless, but it also looks empty. The skill is putting marks across the edge on purpose.

The offset test

You cannot see a seam while it sits on the border of your canvas. Shift the tile by half its width and half its height, wrapping the pixels that fall off one side back onto the other. For an 8-pixel tile that is a shift of $(4, 4)$. The four old edges now meet in a cross through the middle of the canvas, where you can see them and paint them. A tile with a bad top edge, a light row that nothing on the bottom row continues:

l l l l l l l l
g g g g g g g g
g g d g g g g g
g g g g g l g g
g g g g g g g g
g d g g g g g g
g g g g g g g g
g g g g g g g g

The same tile shifted by $(4, 4)$:

g g g g g g g g
g g g g g d g g
g g g g g g g g
g g g g g g g g
l l l l l l l l
g g g g g g g g
g g g g g g d g
g l g g g g g g

g grass, d dark grass, l light grass.

The light row now cuts the tile in half, exactly as it would cut the map every 8 pixels. Paint over it here, break it into two or three short dashes, and shift back, or do not bother: a wrapped tile is the same tile.

Hiding the repeat

Seamless is not enough. A tile can join its neighbors perfectly and still shout "grid", because the eye finds repetition. Four rules:

1. No strong feature. One bright flower in a grass tile lands on a lattice every tile width. Six copies of a 4-pixel tile with a single flower:

. . F . . . F . . . F .
. . . . . . . . . . . .
. . . . . . . . . . . .
. . . . . . . . . . . .
. . F . . . F . . . F .
. . . . . . . . . . . .

. grass, F a bright flower.

2. Low contrast inside the base tile. Two or three values one step apart on the ramp. Save the ends of the ramp for edges and decor.

3. Two to four variants. Copy the base tile and move the tufts. Place variants at random from a seeded generator, so the map is reproducible.

4. Decor on its own layer. Flowers, rocks, and cracks go on a layer above the ground, placed by hand or by the generator, not baked into the base tile. The grid cannot show through a thing that is not on the grid.

From one base tile to the transition set

Two terrains meeting, grass on dirt, need transition tiles: grass tiles with dirt along one or more edges. The order you draw them in decides how much you redraw.

1. Base grass. Above.

2. Base dirt. Its own texture, same rules:

. . . . . . . .
. . o . . . . .
. . . . . , . .
. . . . . . . .
o . . . . . . o
. . . . . . . .
. . . , . . . .
. . . . . o . .

. dirt #8a6a44, o dark pebble #5c4430, , light speck #b08c5c.

3. The four straight edges. Dirt along the top, right, bottom, or left of a grass tile. The boundary is three pixels thick: two rows copied from base dirt, then a rim. Top edge:

. . . . . . . .
. . . o . . . .
. . e . . . e .
e e e e e e e e
g g g g g g g g
g g l g g g g g
g g g g g d g g
g g g g g g g g

. dirt, o pebble, e grass rim #2e5c2a, g grass, l light grass, d dark grass.

The top two rows come from base dirt and the bottom four from base grass, so this tile already joins both bases. The rim wobbles by one pixel in two places so it does not read as a ruler line, and the wobble stays away from columns 0 and 7, so the edge tile repeats horizontally.

4. The four outer corners. Dirt on two adjacent sides. Top-left outer corner:

. . . . . . . .
. . . o . . . .
. . . e e . e .
. . e e e e e e
. . e g g g g g
. . e g l g g g
. e e g g g d g
. . e g g g g g

Same legend.

Its right column reads dirt, dirt, dirt, rim, grass, grass, grass, grass, the same as the top edge's left column, so the two join. Its bottom row joins the left edge's top row the same way. If you drew the edges first, the corners are mostly copying.

5. The four inner corners. Grass on three sides, dirt in one corner. Top-left inner corner:

. . e g g g g g
. . e g g g g g
. . e g g l g g
e e e g g g g g
g g g g g g g g
g l g g g d g g
g g g g g g g g
g g g d g g g g

Same legend.

That is 2 + 4 + 4 + 4 = 14 tiles. The two remaining cells of a 16-tile sheet are the diagonals, grass with dirt in two opposite corners, which some sets skip. These 16 cover every way one grass cell can touch dirt when the engine looks at its four edge neighbors and infers the corners. If the engine looks at all eight neighbors, the count rises to 47 distinct tiles, the blob set, because each inner corner now combines with each edge independently.

Do not rotate the edges

Under upper-left light, a grass patch is a slightly raised thing. Its top edge faces the light, so its rim is dark grass over lit dirt. Its bottom edge faces away, and the grass casts a shadow onto the dirt below. Rotating the top edge tile to make the bottom edge puts the lit rim on the shadow side. Bottom edge, drawn rather than rotated:

g g g g g g g g
g g l g g g g g
g g g g g d g g
g g g g g g g g
s s s s s s s s
. s . . . . s .
. . . o . . . .
. . . . . . . .

s shadowed dirt #5c4430, other symbols as before.

The rule for the whole set: every raised thing is lit from the upper left, and every cast shadow falls down and to the right. Shading and lighting covers why.

Cliffs and elevation

A cliff needs a top face, which is a normal ground tile, and a front face: a vertical wall tile that repeats horizontally, and vertically if the cliff is more than one tile tall. The top row of the front face is a lit lip, because that edge faces the light. Where the cliff meets the ground below, darken the top rows of that ground tile as the cast shadow.

Front face:

h h h h h h h h
r r h r r r r r
r r r r r r r r
r k r r r r k r
r r r r r r r r
r r r r k r r r
r r r r r r r r
k r r r r r r k

h lit lip #cbbfae, r rock #9a8a86, k crack #3a2e3f.

Ground below the cliff:

s s s s s s s s
s s s s s s s s
g g g g g g g g
g g l g g g g g
g g g g g d g g
g g g g g g g g
g l g g g g g g
g g g g g g g g

s shadowed grass #2e5c2a, g grass, l light grass, d dark grass.

Keep the shadow tile separate from the wall tile, so a two-tile-tall cliff stacks two walls and one shadow, not two shadows.

Water and other animated tiles

Water is a tile with 2 to 4 frames. Every frame must be seamless on its own, and the last frame must lead back into the first. Move each highlight one pixel per frame, and let one grow while another shrinks so the loop reads as lapping rather than as a conveyor belt. 200 to 300 ms per frame (12 to 18 frames at 60 fps) is a calm pond; faster reads as a current.

~ ~ w w ~ ~ ~ ~ | ~ ~ ~ w w ~ ~ ~ | ~ ~ ~ ~ w ~ ~ ~
~ ~ ~ ~ ~ ~ ~ ~ | ~ ~ ~ ~ ~ ~ ~ ~ | ~ ~ ~ ~ ~ ~ ~ ~
~ ~ ~ ~ ~ ~ w w | w ~ ~ ~ ~ ~ ~ w | w w ~ ~ ~ ~ ~ ~
~ ~ ~ ~ ~ ~ ~ ~ | ~ ~ ~ ~ ~ ~ ~ ~ | ~ ~ ~ ~ ~ ~ ~ ~
w ~ ~ ~ ~ ~ ~ w | w w ~ ~ ~ ~ ~ ~ | ~ w w w ~ ~ ~ ~
~ ~ ~ ~ ~ ~ ~ ~ | ~ ~ ~ ~ ~ ~ ~ ~ | ~ ~ ~ ~ ~ ~ ~ ~
~ ~ ~ ~ w w ~ ~ | ~ ~ ~ ~ ~ w w ~ | ~ ~ ~ ~ ~ ~ w ~
~ ~ ~ ~ ~ ~ ~ ~ | ~ ~ ~ ~ ~ ~ ~ ~ | ~ ~ ~ ~ ~ ~ ~ ~

~ water #2f5f8f, w highlight #8fd0e8. Three frames left to right; | separates frames and is not a pixel. In frame 2, row 2 has a highlight crossing the seam; in frame 3, the row 4 highlight has grown to three pixels while two others shrank to one.

Palette variants

A seasonal variant is the same tileset with its ramps swapped and no pixel moved. What changes: the hue and value of each ramp. What must not change: the number of steps in each ramp, the spacing between steps, and the shadow depth, meaning how many steps below the base color a shadow pixel sits. If summer shadows are one step down, winter shadows are one step down.

Ramp step	Summer	Autumn	Winter
shadow (s, e, d)	#2e5c2a	#5a3a1e	#7f8ea8
base (g)	#4c8a3a	#8a5a2a	#b4c0d4
light (l)	#74b64a	#b8823a	#dde5f0
highlight	#a8dc6c	#dcb060	#ffffff

With indexed color, where each pixel stores a palette index rather than a color (see Palettes and ramps), a variant is a new palette file and zero redrawing. Snow is the exception: it settles on top faces and not on vertical ones, so a true winter set redraws the cliff top and leaves the cliff face alone.

A checklist for a shippable tileset

• Every tile passes the offset test against itself, and every edge and corner tile joins both bases and the tiles beside it.
• Base tiles use two or three adjacent ramp values, with two to four variants per large terrain.
• Every raised edge is lit from the upper left and every cast shadow falls down-right.
• Animated tiles loop, and each frame is seamless alone.
• The sheet is laid out in the fixed order the engine expects (bases, edges, outer corners, inner corners, diagonals) and exported at 1x (see Sprite sheets and export).

Worked example

Suppose a top-down game on a 16-pixel grid needs grass, dirt, and a one-tile cliff. Count the drawings:

Group	Tiles	Drawn from
base grass + 2 variants	3	scratch, then copies with moved tufts
base dirt + 1 variant	2	scratch, then one copy
grass-to-dirt straight edges	4	base rows plus a rim
outer corners	4	the edges
inner corners	4	the edges
diagonals	2	the inner corners
cliff face	1	scratch
cliff base shadow	1	base grass, darkened
water, 3 frames	3	one frame, then shifted copies
total	24

Of the 24, five are drawn from nothing: two bases, the cliff face, one water frame, and the first rim. The other nineteen are copies, recolors, or edge joins. At 16 pixels the sheet is $24 \times 256 = 6144$ pixels, 6 KB of indexed pixels before compression.

In a game's art pipeline

This is stage 4, build the world. Stage 1 decided the tile size, the palette, and the light direction, and this page assumes all three are fixed. The generators in the Dynamic map generation cluster (its page on tilemaps and autotiling) compute which of the 16 or 47 tiles goes in each cell from a bitmask of its neighbors, so your sheet has to be laid out in the order that bitmask expects. Stage 5 exports the sheet and, when you adapt a purchased tileset, extends it in its own style using the same base-then-edges order (see Adapting purchased packs).

Common mistakes

• A grid of faint lines across the ground. One edge of the base tile does not continue into the opposite edge. Run the offset test.
• A lattice of identical bright spots. A high-contrast feature is baked into the base tile. Move it to a decor layer or drop its contrast.
• The bottom of every grass patch glows. The bottom edge is the top edge rotated, so the lit rim sits where the shadow should be. Redraw the bottom and right edges.
• Water that looks like a conveyor belt. Every highlight shifts the same way each frame. Let some grow and shrink.
• Winter shadows are pale. The variant palette shortened the ramp. Keep the shadow the same number of steps below base.

Cost

The 16-tile transition set is 16 drawings, but the base tile decides all of them: once grass and dirt exist, each edge is two copied bands and a rim, and each corner is a join of two edges, so an artist who has the bases can finish the set in about the time the bases took. The 47-tile blob set is roughly three times the work of the 16-tile set, almost all of it in the inner-corner combinations, and is only worth it when the engine's autotiler reads all eight neighbors. File size is a non-issue: a 47-tile sheet of 16-pixel tiles is about 12 KB of indexed pixels before compression. What hurts is scope: every pair of terrains that meet is another full transition set, so four terrains that all meet each other is six sets, not four.

Going further

• Dithering, for blending two terrains inside a single tile instead of with a hard rim.
• Adapting purchased packs, for extending a bought tileset with the corner it lacks.
• The map cluster's page on tilemaps and autotiling, for the bitmask that picks a tile from your sheet.