BitWithBitePygame Mastery · Quick Reference
Tile Maps Cheat Sheet
In one line: Represent levels as a 2D grid of tile IDs, slice a tileset image into tiles, and render the grid with correct pixel offsets.
Key Ideas
1Grid Representation. A level is a 2D list/array of integers, each ID mapping to a specific tile image.
2Tileset Slicing. Load one tileset image, then slice out each TILE_SIZE x TILE_SIZE region using Surface.subsurface() or blit with a source rect.
3Rendering the Grid. Loop row/col indices, blit each tile at (col*TILE_SIZE, row*TILE_SIZE) — simple multiplication gives pixel position.
4The Tiled Editor. A free visual map editor; exports JSON/CSV your game code loads instead of hand-writing grids.
5Scrolling Maps. Combine with a camera offset (Module 15) so tiles are drawn at world_pos - camera_offset.
6Collision Layers. A separate grid (or a set of "solid" tile IDs) marks which tiles block movement.
Grid Render Pattern
TILE = 32
for row, line in enumerate(level_map):
for col, tile_id in enumerate(line):
img = tile_images[tile_id]
x, y = col*TILE, row*TILE
screen.blit(img, (x, y))
for row, line in enumerate(level_map):
for col, tile_id in enumerate(line):
img = tile_images[tile_id]
x, y = col*TILE, row*TILE
screen.blit(img, (x, y))
grid[row][col] maps to a tile ID — each ID is blit at (col×TILE, row×TILE); the highlighted cell is tile_map[1][2].