Drawing an entire level as a single huge image would be costly in memory and awkward to edit. Since the earliest console and home-computer games, the solution has been to build levels from tiles: small square images reused many times, like the tiles of a floor. The tilemap is the grid that says which tile goes in each cell.
Tileset and map
There are two ingredients:
- the tileset: an image containing all the available tiles, for example grass, earth, bricks, water, each 16 × 16 pixels;
- the map: a two-dimensional array of integers, where each number is the index of a tile in the tileset and zero often means an empty cell.
map = [
[0, 0, 0, 0, 0, 0],
[0, 0, 7, 7, 0, 0],
[1, 1, 2, 2, 1, 1],
[3, 3, 3, 3, 3, 3],
]
A level of 200 × 30 cells takes 6,000 numbers, a negligible amount compared with an equivalent 3,200 × 480 pixel image. And editing the level means changing a few numbers.
Several overlapping layers
A single grid is rarely enough. Several layers are usually used:
| Layer | Content | Collisions |
|---|---|---|
| Background | Sky, distant mountains, decorative walls | No |
| Terrain | Floors, walls, platforms | Yes |
| Decorations | Grass, flowers, cracks, shadows | No |
| Foreground | Elements in front of the character | No |
| Objects | Spawn points, enemies, coins | Handled by code |
The object layer contains not tiles but positions and properties: where the player spawns, where an enemy is and what kind, where a dialogue is triggered. The code reads it on load and creates the corresponding entities.
Tile properties
A tile is not just an image. Properties can be attached to each tileset index:
- solid, passable from below, slope;
- harmful, such as spikes or lava;
- surface type, useful for choosing footstep sounds or friction;
- animated, with a sequence of indices for water and waterfalls.
This way the game logic queries the map: «is the tile under the player's feet ice?» and adjusts behaviour without level-specific code.
Autotiling
Drawing edges, corners and grass-to-earth transitions by hand is slow and error-prone. Autotiling automatically picks the correct tile based on its neighbours. The most common method assigns a bit to each neighbour:
value = 0
if above is terrain: value += 1
if right is terrain: value += 2
if below is terrain: value += 4
if left is terrain: value += 8
tile = table[value]
With four neighbours you get 16 combinations, enough for simple edges. Including the diagonals gives 256 combinations, which reduce to 47 visually distinct cases: this is the basis of so-called «blob» tilesets. The artist draws the cases once, and the level designer paints only «terrain» or «empty».
Efficient rendering
Drawing every tile of a large level every frame is wasteful. Two techniques avoid it.
Draw only what is visible
From the camera position you derive the visible rows and columns, with a small margin. On a 320 × 180 pixel screen with 16-pixel tiles you draw about 21 × 12 cells, whatever the size of the level.
Pre-rendered chunks
For layers that do not change, you can split the map into chunks, for example 16 × 16 tiles, and prepare a texture or a single vertex set for each. Every frame you draw a few chunks instead of hundreds of tiles. When a tile changes, for example a destroyed block, only the affected chunk is regenerated.
Level editors
Writing maps by hand in an array is only useful for prototypes. Tilemap editors, whether standalone like Tiled and LDtk or built into engines, let you paint tiles, manage layers, place objects with properties and export to readable formats such as JSON or XML. It is worth writing the loader for the chosen format early and never editing exported files by hand, to avoid the editor and the game drifting apart.
Beyond the square grid
The same principle applies to other geometries:
- isometric: diamond-shaped cells for an angled top-down view, with attention to drawing order;
- hexagonal: common in strategy games, with six neighbours per cell and dedicated coordinate systems.
The basic logic, a grid of indices plus a set of reusable images, stays the same.
In short
- A tilemap is a grid of indices pointing to a tileset of small reusable images.
- Multiple layers separate background, terrain, decorations and objects.
- Tile properties drive collisions, damage, sounds and friction.
- Autotiling picks edges and corners based on neighbours.
- Drawing only what is visible and using pre-rendered chunks keeps performance high.
