Skip to main content

🧱 Lesson 10.3: Tilemaps

Placing a level one sprite at a time is fine for a handful of objects and unbearable for a level. Unity's Tilemap system lets you paint a world instead — pick a tile, drag your mouse across a grid, and the level appears block by block. It's how nearly every 2D platformer, top-down RPG, and puzzle game is built. This lesson covers painting tiles, giving them collision, and layering your world so the visuals and the physics live apart.

🎯 Learning Objectives

By the end of this lesson, you will be able to:

  • Create a Grid with a Tilemap and understand how they relate
  • Build a Tile Palette from a sliced sprite sheet and paint with the brush tools
  • Add collision with Tilemap Collider 2D
  • Merge that collision into one smooth outline with Composite Collider 2D
  • Split a level into background and collision tilemap layers

Estimated Time: 45 minutes  ·  Prerequisite: Lesson 10.2 (Sprite Sheets & Slicing); Fundamentals 2D collider basics

In This Lesson

Grid + Tilemap

Two GameObjects work together. Create them with GameObject ▸ 2D Object ▸ Tilemap ▸ Rectangular and Unity makes both at once:

  • Grid — the parent. It defines the coordinate system: the size and shape of each cell (1×1 by default) and the layout (rectangular, isometric, or hexagonal). Everything painted snaps to this grid.
  • Tilemap — a child of the Grid. It's the actual canvas you paint on, and it holds a Tilemap Renderer (the 2D equivalent of a Sprite Renderer, but for thousands of tiles at once, efficiently). You can have several Tilemap children under one Grid — that's how you build layers.

📖 Definition

Tile: a lightweight asset that references a sprite plus a little metadata (collider shape, optional animation). A Tilemap stores which tile sits in which cell — not thousands of GameObjects. That's why a Tilemap of ten thousand tiles is cheap: it's data in a grid, drawn in a handful of batches, not ten thousand Transforms.

⚠️ Install the 2D Tilemap Editor

Tilemaps need the 2D Tilemap Editor package. It's included in the 2D template, but if the Tile Palette window or the Tilemap menu is missing, add it via Window ▸ Package Manager ▸ Unity Registry. The palette itself opens from Window ▸ 2D ▸ Tile Palette.

The Tile Palette

The Tile Palette window is your paint tray: it holds the tiles you can paint with and the tools to paint them. You build a palette by dragging a sliced sprite sheet (from Lesson 10.2) into an empty palette — Unity turns each frame into a Tile asset and arranges them on the grid automatically. Here is that window, rebuilt faithfully:

Unity's Tile Palette window with a painted grid beside it A recreation of Unity's Tile Palette window. Across the top is a row of brush tools: Select, Move, Brush (highlighted), Box Fill, Picker, and Erase. Below a dropdown shows the active palette named Terrain and an Active Tilemap dropdown set to Ground. The main area shows a palette of terrain tiles arranged in a grid — grass, dirt, stone and edge tiles. To the right, a separate panel shows a small level painted from those tiles: a ground platform with grass on top and a floating ledge. Tile Palette Brush — click a tile below, then paint on the grid Active Palette Terrain Active Tilemap Ground Palette: Terrain Scene — painting on "Ground"
Figure 1: The Tile Palette (faithfully recreated). The brush tool is active and a grass tile is selected; painting drops it into cells on the active Tilemap ("Ground"), building the little level on the right.

Painting with the Brush Tools

The toolbar across the top of the palette holds the tools you'll live in. Pick a tile from the palette, choose a tool, then click or drag in the Scene view to paint onto the Active Tilemap:

  • Brush (B) — paint one tile per click, or drag to lay a line. Your everyday tool.
  • Box Fill (U) — drag a rectangle to flood-fill an area. Great for large ground blocks.
  • Picker (I) — Alt-click a painted tile to make it the active brush (like an eyedropper).
  • Eraser (D) — remove tiles. (Hold Shift with the brush for a quick erase.)
  • Select / Move — grab a region of already-painted tiles and reposition them.

The single most important habit: check the Active Tilemap dropdown before you paint. If you have several tilemap layers, whatever is selected there is what receives your strokes. Painting your ground onto the "Background" layer by accident is the classic first-day mistake.

✅ Pro Tip

Drag a multi-tile selection from the palette (marquee-select several tiles) and the brush paints that whole block at once — perfect for repeating a decorated wall or a tree that spans several cells. Combine with Box Fill to tile a background in seconds.

Collision: Tilemap Collider 2D

Painted tiles are just visuals until you make them solid. Select the Tilemap you want to be walls and floors, and add a Tilemap Collider 2D component (Add Component ▸ Tilemap ▸ Tilemap Collider 2D). Instantly, every painted tile gets a collider matching its shape. Your player's Rigidbody2D (next lesson) will now stand on the ground and bump into walls.

There's a subtlety: by default a Tilemap Collider 2D generates one collider per tile. A ground strip of 200 tiles becomes 200 little box colliders sitting edge to edge. That works, but it's wasteful and can cause a moving character to catch on the invisible seams between them.

📖 Definition

Tilemap Collider 2D: a component that reads a Tilemap and produces collision geometry from its painted tiles automatically. Erase a tile and its collider vanishes; paint one and a collider appears. You never place colliders by hand — the tilemap is the collision.

Composite Collider 2D

The fix for those 200 seams is the Composite Collider 2D. It merges all the individual tile colliders into a single, smooth outline around the solid area — one clean collider for the whole platform instead of hundreds. To set it up on your collision tilemap:

  1. Add a Composite Collider 2D component. Unity auto-adds a Rigidbody2D alongside it (the composite needs one to exist).
  2. Set that Rigidbody2D's Body Type to Static — the level doesn't move or fall.
  3. On the Tilemap Collider 2D, tick Used By Composite. Its per-tile shapes now feed the composite and merge into one outline.

Here's how those three components stack on one collision tilemap:

flowchart TB subgraph TM["GameObject: Tilemap_Collision"] A["Tilemap
(the painted solid tiles)"] B["Tilemap Collider 2D
Used By Composite = ✓"] C["Composite Collider 2D
merges tiles into one outline"] D["Rigidbody2D
Body Type = Static"] end B --> C C --> D

Figure 2: The three-component collision setup. Tilemap Collider 2D feeds shapes to the Composite Collider 2D, which needs a Static Rigidbody2D to anchor it.

✅ Pro Tip

Composite collision isn't just tidier — it kills the "getting stuck on flat ground" bug. When a character slides across many separate box colliders, tiny gaps at the seams can snag it. One continuous outline has no seams, so movement stays smooth. Always composite your collision tilemap.

Multiple Tilemap Layers

Real levels use several Tilemaps under one Grid, each with its own job. Right-click the Grid ▸ 2D Object ▸ Tilemap ▸ Rectangular to add more children. A common split:

  • Background — distant scenery (sky, hills, far walls). No collider. Lowest Sorting Layer so it draws behind everything.
  • Ground / Collision — the solid tiles the player walks on and bumps into. Has the Tilemap + Composite Collider setup from above.
  • Foreground — decoration painted over the player (grass tufts, pillars in front). Highest Sorting Layer, no collider.

Each Tilemap has its own Tilemap Renderer, so you set its Sorting Layer and Order in Layer exactly like a Sprite Renderer (Lesson 10.1). That's how you guarantee the background stays behind the player and the foreground drapes in front. Separating collision onto its own layer also means you can retheme the visuals without ever touching the physics.

💡 Why not one tilemap for everything? Because visuals and physics have different needs. A pretty background shouldn't be solid, and a collision layer shouldn't care what it looks like. Splitting them lets each layer do one job well — and lets you toggle the collision layer's visibility while you playtest.

Hands-on Challenge

🏋️ Exercise 1: Paint a platform with solid ground

Objective: Build a small level with working collision, ready for a character next lesson.

  1. Create a Grid + Tilemap (GameObject ▸ 2D Object ▸ Tilemap ▸ Rectangular). Rename the tilemap Ground.
  2. Open Window ▸ 2D ▸ Tile Palette, create a new palette, and drag your sliced terrain sheet in.
  3. With the Brush and Box Fill, paint a ground strip and a floating ledge or two.
  4. On Ground, add Tilemap Collider 2D and Composite Collider 2D, set the auto-added Rigidbody2D to Static, and tick Used By Composite.
  5. Select the tilemap and confirm a single green outline hugs the whole solid area — not one box per tile.
💡 Hint: I see a collider on every tile, not one outline

You almost certainly forgot to tick Used By Composite on the Tilemap Collider 2D. Without it, the per-tile colliders don't feed the composite. Also confirm the Composite Collider 2D component is actually present and its Rigidbody2D is Static.

✅ Success check

With the tilemap selected, the Scene view shows one continuous green collision outline. Erasing a tile removes that part of the outline automatically, and painting one adds it back.

🏋️ Exercise 2: Layer it

Add two more Tilemaps under the Grid: Background and Foreground. Give each the right Sorting Layer (Background behind, Foreground in front) and paint scenery on them — without adding colliders. Switch the Active Tilemap in the palette as you go, and confirm your Ground layer is still the only solid one.

🎯 Quick Quiz

Question 1: What is the relationship between a Grid and a Tilemap?

Question 2: Why add a Composite Collider 2D to your collision tilemap?

Question 3: Your tiles paint onto the wrong layer. What should you check first?

Summary

🎉 Key Takeaways

  • A Grid defines the cells; one or more child Tilemaps are the canvases you paint on.
  • Build a Tile Palette by dragging a sliced sheet in; paint with Brush, Box Fill, Picker, and Eraser onto the Active Tilemap.
  • Tilemap Collider 2D turns painted tiles into collision automatically.
  • Add Composite Collider 2D (with a Static Rigidbody2D and Used By Composite) to merge tiles into one seamless outline.
  • Split levels into background / collision / foreground tilemaps, each with its own Sorting Layer — only the collision layer needs a collider.

🚀 What's Next?

You now have a solid, layered world. Time to put a character in it that actually moves and jumps. In Lesson 10.4: 2D Physics — A Platformer Base (Mini-Project) you'll add a Rigidbody2D, wire movement and a jump through the new Input System, and detect the ground your tilemap provides.

🧱 You can paint a level now

Grid, Tilemap, palette, brush, and a composited collider — that's a complete, solid 2D world built in minutes instead of hours.