What is a tile map in 2D video games? A plain guide

If you have ever asked what is a tile map in 2D video games, the short answer is this: a tile map is a level built from a grid of small, reusable squares. Each square holds one kind of tile, such as a wall, a floor, or water. The game stores the grid as numbers or letters, draws the right picture in each cell, and applies the right rules to it. This guide explains how that works, why it matters for gameplay, and how the two games on Tank City Reboot build their battlefields this way.

What is a tile map in 2D video games?

Picture a sheet of graph paper. Fill each square with a symbol: # for wall, ~ for water, . for open ground. That sheet is a tile map. The game reads it and turns every symbol into art and behavior.

Here is a tiny five by three map written as text:

  • Row 1: #####
  • Row 2: #.~.#
  • Row 3: #####

That is a room with walls all around and a puddle in the middle. Fifteen characters describe the whole level. A designer can change the level by changing one letter. That is the core appeal: a tile map is small, easy to edit, and easy for the game to reason about.

Tiles, tilesets, and the grid: the three building blocks

Every tile map rests on three parts.

  • The tile. One square of art plus the rules that go with it. A brick tile looks like brick and blocks movement.
  • The tileset. The full collection of tiles a level can use, usually packed into one image. Tile 0 might be grass, tile 1 brick, tile 2 water.
  • The grid. The layout itself: a fixed number of columns and rows, where each cell points to one tile in the tileset.

The grid does not store pictures. It stores references. That is why a tile map stays light even when the level is large. A hundred brick cells all point to the same brick image.

Tile-based is not a kind of game. It is a way of building the playing area, and very different games, from maze games to role-playing and strategy games, draw their worlds as tiles. Players often never notice.

Diagram of a 7 by 7 tile map stored as letters and the same map drawn as firewall, silicon, coolant and core tiles

How a game draws a tile map on screen

Drawing a tile map is a loop. For each row, for each column, the game looks up the tile number, finds that tile's picture in the tileset, and places it at a screen position. The position comes from simple math:

  • screen x = column × tile width
  • screen y = row × tile height

So with 16 pixel tiles, the cell at column 3, row 2 lands at x 48, y 32. The game can also run the math backward. If a tank sits at pixel x 50, its column is 50 ÷ 16, rounded down, which is 3. That reverse step is what makes collision cheap, as you will see next.

Because the grid is regular, a game can also work out exactly which rows and columns are on screen, and draw only those.

Collision and gameplay: why tiles are more than art

The real power of a tile map is that each tile carries rules. Games store this extra information about each tile, such as collision and damage, in a second grid or alongside the first. When something moves, the game converts its position to a grid cell and asks one question: what kind of tile is here?

The answer decides what happens. A wall tile stops movement. A water tile might stop tanks but let bullets fly over. An ice tile might keep you sliding after you let go. Instead of testing every object against every shape on screen, the game can check the few cells near the moving object.

This also makes rules easy to learn. Once you know what a tile type does, you know what it does everywhere it appears. Players read the map like a board game.

Layers and destructible tiles

A simple tile map uses one grid. Two common extensions:

  • Layers. One grid for the pictures and another for the rules, or a ground grid with walls drawn on top. Each grid stays simple.
  • Destructible tiles. Since the map is just data, the game can change a cell while you play. Shoot a brick tile and the game rewrites that cell as empty ground. The art and the collision update together, because both come from the same grid.

Tile maps vs. procedural generation: how they work together

A hand made tile map is drawn by a designer. A generated one is written by code. They are not rivals: a generator can simply write its output as a tile map, because a grid is easy for code to fill in and check. If you want the bigger picture, read what procedural generation is in video games.

A typical generator works like this:

  1. Start from a seed number.
  2. Use it to feed a random number generator, which picks tiles cell by cell or shape by shape.
  3. Check the result against rules, such as "the player must be able to reach the exit."
  4. If the map breaks a rule, throw it away and draw again.

The seed matters because a random number generator started from the same seed gives the same sequence of numbers, so the same seed gives the same map. For how those numbers come about in the first place, see how video games make random numbers.

How Tank City Reboot uses tile maps for its battlefields

Both games on Tank City Reboot are built on tile maps, and they show the hand made and generated approaches side by side. It is a game, not a course in game making, but it is a clear place to see tile rules at work.

The first game: six fixed 13 by 13 maps

In Tank City Reboot, every stage is a 13 by 13 grid of tiles. Your antivirus tank defends the CPU core at the bottom middle, and malware tanks enter from three gates along the top. Each tile type is named for a real computing idea and has one clear rule:

  • Firewall breaks under fire, a block at a time. This is the destructible tile.
  • Silicon stops every shot until your cannon is fully overclocked.
  • Coolant blocks tanks, but shots fly over it.
  • Encrypted zone hides any tank inside it. Shots still pass through.
  • Data bus is slippery. Your tank slides about three quarters of a tile after you let go.
The five terrain cards on the Tank City Reboot page: firewall, silicon, coolant, encrypted zone and data bus, each with its rule and real idea

Only firewall, silicon, the CPU core, and the map edge stop a shot. That one rule tells you a lot about how to read each map. The six stages use the tiles in different ways. COOLANT has two coolant rivers across the map, each with one gap on the left and one on the right, so tanks funnel through narrow crossings. ENCRYPTION is full of encrypted zones, including one right above the core, which means an enemy can sit hidden near your base. DATA BUS has a ring of data bus lanes, so you need to start braking early.

Try this as a worked exercise. On COOLANT, stand near a river gap instead of chasing tanks. Tanks cannot cross coolant, so a tank heading for the core has to come through one of those gaps, while your shots cross the water freely. You are using the tile rules, not just reacting to enemies.

Zero Day: a fresh generated arena every wave

Tank City Zero Day keeps the 13 by 13 grid but generates a new arena for every wave. The process follows the steps above closely:

  • Each arena is drawn from a seed and mirrored left to right, so both sides match.
  • The generator keeps clear the three enemy gates on the top row, your start spot, and the wall around the CPU core.
  • It then runs a fairness check: every gate and your start must be able to reach the core going around silicon and coolant. Firewall counts as open, since any tank can shoot through it.
  • If the arena fails, it is thrown out and drawn again.

Some upgrades change the tile rules for you: at level 2, Pipelining shots break silicon, and Hot patch builds the core wall as silicon in every arena.

Frequently asked questions

Why do retro games use tile maps?

Much game hardware from the late 1970s to the mid-1990s could show tiled screens with little work from the processor. The arcade game that introduced the tile map in 1979 needed 64 times less memory and processing than drawing every pixel of the screen on its own.

What size should a tile be?

8 by 8 pixels has been the most common tile size since that first tile-map game used it. Pick a size that suits your art, and keep one size across the whole tileset.

What tools make tile maps?

Engines such as Godot, GameMaker, Construct and RPG Maker are built for tile-based games. For a small project, a text editor works: one character stands for one tile.

Can a tile map be randomly generated?

Yes. Code can fill a grid from a seed, then check it against rules and redraw any map that fails. Tank City Zero Day does exactly this for every wave.

Get started

The fastest way to understand a tile map is to play on one and watch how each tile changes your choices. Start with the first game and learn the five terrain rules on its hand built stages, then switch to Zero Day and see how a generator mixes the same tiles into a new arena each wave.

Play Tank City Reboot: it is free, plays in your browser on a computer or a phone, and needs no account.

0 likes

Comments

No comments yet.

Sign in or make an account to comment.