Tilemaps and Level Design: Building Game Worlds

Game Development Game Development 8 min read 1644 words Beginner ExcellentWiki Editorial Team

Tilemaps are the foundation of 2D game worlds. A tilemap breaks a level into a grid of tiles — each tile is a small graphic that snaps to the grid, making level design efficient, memory-friendly, and highly iterative. From classic platformers to modern RPGs, tilemaps power the visual structure of countless games.

What Is a Tilemap?

A tilemap is a grid-based data structure where each cell stores an index pointing to a tile graphic. The renderer draws only visible tiles, and the designer places content by painting tiles onto a grid rather than positioning individual sprites.

Modern tilemap systems support multiple layers, each serving a different purpose — background, foreground, collision, decorative, and more.

Tilesets

A tileset is a single image (or sprite sheet) containing all tile graphics used in a level. Tiles are arranged in a regular grid within the sheet, each identified by its row and column index.

Tileset Image (256×128 pixels)
┌────┬────┬────┬────┬────┬────┬────┬────┐
│ 0  │ 1  │ 2  │ 3  │ 4  │ 5  │ 6  │ 7  │
├────┼────┼────┼────┼────┼────┼────┼────┤
│ 8  │ 9  │ 10 │ 11 │ 12 │ 13 │ 14 │ 15 │
└────┴────┴────┴────┴────┴────┴────┴────┘
 32px × 32px tiles — 8 columns × 2 rows = 16 tiles

Best practices for tilesets:

Use power-of-two tile sizes (16, 32, 64 pixels) for performance
Keep tiles visually consistent with a shared color palette
Design “transition” tiles (edges, corners, slopes) for organic-looking levels
Include collision metadata for each tile (solid, platform, ladder, water, etc.)

Layers

Tilemap layers stack on top of each other to create depth. Each layer has its own grid and rendering order:

Layer	Purpose	Example
Sky/Background	Far background, parallax	Clouds, mountains
Base Terrain	Walkable ground, walls	Grass, stone, dirt
Details	Decorative overlays	Flowers, cracks, moss
Objects	Interactive elements	Chests, doors, switches
Foreground	Visual overlay in front of player	Leaves, rain, fog
Collision	Invisible walkability data	Solid blocks, triggers

# Pseudocode: tilemap with layers
class Tilemap:
    def __init__(self, width, height, tile_size):
        self.width = width
        self.height = height
        self.tile_size = tile_size
        self.layers = {
            "ground": [[0] * width for _ in range(height)],
            "details": [[-1] * width for _ in range(height)],
            "collision": [[0] * width for _ in range(height)],
        }
        self.tileset = load_tileset("terrain.png", tile_size)

    def set_tile(self, layer, x, y, tile_id):
        self.layers[layer][y][x] = tile_id

    def is_solid(self, x, y):
        return self.layers["collision"][y][x] == 1

Parallax scrolling simulates depth by moving background layers slower than foreground layers.

Collision Maps

While tiles themselves can be marked as solid or passable, complex levels need more granular collision data:

Tile-based collision: Each tile is either solid or empty. Simple but limited — can’t represent half-tile obstacles.
Auto-tiling: Tiles automatically choose the correct graphic based on neighboring tiles. Reduces manual placement.
Collision shapes: Per-tile collision polygons for slopes, one-way platforms, and rounded corners.

collision_map = {
    # tile_id: (solid_top, solid_bottom, solid_left, solid_right, is_platform)
    0:  (False, False, False, False, False),  # air
    1:  (True,  True,  True,  True,  False),   # solid block
    2:  (False, True,  False, False, True),    # one-way platform
    3:  (True,  True,  True,  True,  False),   # slope tile
---

One-way platforms let players jump through from below and land on top. The collision check only activates when the player’s velocity is downward and their previous position was above the platform.

Building Your First Tilemap

Using the Tiled map editor (industry standard), the workflow is:

Create a new map: Set tile size, map dimensions, and orientation (orthogonal, isometric, staggered)
Add tileset: Load your tileset image, set margin, spacing, and tile size
Paint layers: Start with the base terrain layer, then add details and objects
Set collision: Mark tiles as solid or add collision objects on a separate layer
Export: Save as TMX (XML) or TSJ (JSON) for your game engine to load

Advanced Tilemap Techniques

Infinite Worlds (Chunking)

For open worlds, divide the tilemap into chunks (e.g., 16×16 tiles). Load only chunks near the camera and unload distant ones:

class ChunkedTilemap:
    def __init__(self, chunk_size=16):
        self.chunk_size = chunk_size
        self.chunks = {}  # (cx, cy) -> Chunk

    def get_tile(self, world_x, world_y):
        cx = world_x // self.chunk_size
        cy = world_y // self.chunk_size
        if (cx, cy) not in self.chunks:
            return 0  # air for unloaded chunks
        return self.chunks[(cx, cy)].get_tile(world_x, world_y)

    def load_chunk(self, cx, cy):
        if (cx, cy) not in self.chunks:
            self.chunks[(cx, cy)] = generate_chunk(cx, cy)

Rule Tiles

Rule tiles automatically select the correct graphic based on adjacent tiles. For example, a grass tile with a dirt tile to its right automatically shows a grass-to-dirt transition edge.

Animated Tiles

Some tiles cycle through frames for animated effects — water, lava, blinking lights. Store frame durations in the tileset metadata and advance frames based on game time.

FAQ

What is the best tile size for 2D games?

16×16 for pixel-art games with small characters, 32×32 for standard retro-style games, 64×64 for high-resolution pixel art or games with larger characters. Match the tile size to your character’s size — a character should be 1-2 tiles tall.

How do I handle slopes in tile-based games?

Use per-tile collision polygons instead of rectangular collision boxes. Store slope angle and direction in the tile metadata. Implement character movement that follows the slope surface rather than snapping to the grid.

What is the difference between orthogonal and isometric tilemaps?

Orthogonal maps use a square grid and a top-down or side-view perspective. Isometric maps use a diamond-shaped grid with a 45-degree angle, creating a pseudo-3D perspective. Isometric is common in strategy and simulation games.

How do I optimize tilemap rendering?

Use texture atlases, frustum culling (only render visible tiles), and chunk-based batching. For large maps, pre-compute visible chunks and use GPU instancing. Limit the number of draw calls by combining tiles into larger mesh batches.

What tools are available for tilemap creation?

Tiled (cross-platform, free), LDtk (modern, free), Pyxel Edit (pixel-art focused), Aseprite (animation + tileset), and engine-specific tools (Unity Tilemap, Godot TileMap).

Tilemap Fundamentals

Tilemaps represent game worlds as grids of tiles referencing a tileset. Tile dimensions range from 8x8 to 128x128 pixels. Layers separate gameplay: ground, object (walls, water, lava), and decoration (grass, rocks, shadows). Autotiling rules select tiles based on neighbor adjacency using bitmasking (3x3 neighborhood, 47 tile patterns). Rule tiles extend this with conditional logic. Tile collision data marks cells as walkable, blocked, or slippery. Pathfinding algorithms (A*, Dijkstra) operate on the collision grid. Rendering optimization: culling off-screen tiles, texture atlases, mesh chunking. Procedural generation uses Perlin noise for terrain, cellular automata for caves, BSP for dungeon rooms. Tiled map editor (.tmx) is the industry standard.

Procedural Tilemap Generation

Procedural generation creates tilemap content algorithmically rather than by hand. Perlin noise or simplex noise generates height maps for terrain: values below a threshold become water, middle values become grass, and high values become mountains. Cellular automata simulates cave formation: start with random noise, then iteratively apply rules (a cell becomes solid if surrounded by 4+ solid neighbors). BSP (binary space partitioning) generates dungeon rooms: recursively split a rectangle, placing rooms at leaf nodes and corridors connecting siblings. Wave Function Collapse generates tile configurations from a set of example patterns, enforcing adjacency constraints. For each approach, seed the random generator for reproducible levels. Combine techniques: use noise for overworld terrain, BSP for dungeon interiors, and WFC for abstract puzzle rooms. Procedural generation requires careful tuning — test with many seeds and add manual overrides for critical path areas.

Advanced Level Design Patterns

Zelda-style screen transitions scroll between discrete sections. Metroidvania interconnectivity uses locked-door keys. Roguelike rooms use prefabricated templates stitched with corridors. Platformer level pacing alternates safe zones, challenges, and rewards. Parallax scrolling layers create depth. Tile streaming loads chunks based on position. When implementing tile streaming, pre-load chunks adjacent to the camera’s current position and unload chunks beyond a configurable radius. Use object pooling for tile renderers to avoid GC spikes during chunk transitions. For mobile platforms, reduce the render distance and use lower-resolution tilesets for distant chunks to maintain 60 FPS. Profile chunk load times with your engine’s built-in profiler and target load times under 100ms to avoid visible stuttering. For 2D platformers, keep tile dimensions between 16x16 and 32x32 pixels for retro aesthetics, or 64x64 for modern HD pixel art. Match the tile grid to your physics update rate — 60 Hz physics works well with tile sizes that divide evenly into your character’s movement speed to avoid sub-pixel jitter. Use a tile palette in Tiled or your engine’s editor to speed up manual level painting.