◀ 6.57.17.2 ▶

7.1 — Tilemaps: The Level Editor

You are standing in a cave you did not build. The Platformer scene already holds a real cave — a floor, walls, and a way out on the left-hand wall — painted onto a grid before you ever opened the project. And you cannot add a single rock to it, because you have no paint tray and no idea where the art lives. Today you find the art, load the palette, and take ownership of a level that is already half-built. There is no script in this lesson: the editor is where a level actually lives, and today the editor is the work.

In this lesson you will be able to answer“how do I build a level out of tiles?”Outline only
Break It Down~10 minOutline only

You are standing in a cave you did not build, and you cannot add a single rock to it. As one problem that is not startable, because "build a level out of tiles" names nothing you could open: there is no paint tray loaded, no known home for the art, and no way to tell which of the grids under the cave is the one that can stop you.

First, before any code: cut that into parts small enough that you could look each one up on its own.

  1. Find the art the cave was cut from, and load a palettewhat does this part do?Read: the Project window under Assets/Artwork/Platformer/Sliced/, the Window ▸ 2D ▸ Tile Palette menu entry, and the window tour in 1.2
  2. Read the Grid, and treat its cell size as a contractwhat does this part do?Read: the Grid component in the Inspector for Platformer ▸ Grid, and the Inspector reading you practised in 1.2
  3. Decide which tilemap you are painting into — solid, exit, or picturewhat does this part do?Read: the three children under Platformer ▸ Grid, and the tag-versus-layer callout in 6.2 where you put the Ground layer on two of them
  4. Paint with the five tools the palette gives youwhat does this part do?Read: the toolbar of the Tile Palette window, and the build-once-stamp-many habit from 2.4
  5. Prove the paint is real — stand on itwhat does this part do?Read: the three components on Platformer ▸ Grid ▸ Collision in the Inspector, and the ground check and its gizmo from 6.2

Notice what the split is doing: only one of those five parts is about making a picture. The other four are about which of three grids you are writing into, how far apart the cells are, and whether the thing you drew can stop you. That is the shape of every level-building problem for the rest of the year — the drawing is the easy half, and what a drawing means to the physics engine is the half that decides whether you have a level or a wallpaper.

The test: could you look this part up on its own, right now, in one search? "Build a level out of tiles" cannot be looked up. "Which window holds the tray of tiles" can — and so can "which component decides whether a painted tile can stop me", because that one has an Inspector page with three names on it.

Your turn

Pick two of the parts above and say in one line what each one actually does.

The palette holds finished tiles and the tileset folder holds the art they were cut from. Say which one you drag into the tray, and say what a change to the picture would have to travel through to reach every place you have already painted it.

Your grid's cell size is a number somebody chose before you opened the project. Say what would happen to a cave painted at one tile per cell if that number were halved — and say whether the remedy is the grid or the cave.

In the Editor ~30 min

Project window → Assets/_Scenes, and open Platformer.unity. Game view → press Play and walk: you can move, you can jump, and you stand on rock. Now try to change that rock. Hierarchy → select things until you find what the floor is made of. You will land on a Grid with three children under it — and the middle one is the reason this hour is about choosing which tilemap you paint into.

ObjectWhat it is forWhat it already has
Grid The snapping contract. Every child tilemap snaps to its cell size, and every system built on top of the level inherits that spacing. A Cell Size of 1 by 1, and three tilemap children.
Collision (child) The rock you stand on. 75 tiles, filling a box roughly 16 tiles wide and 10 tall — a cave shape, not a solid rectangle. A Tilemap Collider 2D, a Composite Collider 2D, a Rigidbody 2D whose Body Type is Static, and the tag Ground. Physics already works. Leave all of it alone.
Cave Exit (child) The way out. Two tiles, at the far left of the floor — the smallest solid thing in the scene, and the one everybody forgets. The same three components as the floor, and Untagged, because it was built for a different job: SceneSwitch.cs sits on it and sends you to the Overworld when you touch it.
No Collision (child) Pure picture. Backdrop, decoration, anything the player should see but never bump into. It holds 85 tiles — more than the floor does. A Tilemap Renderer, and nothing else. No collider of any kind, so nothing here can ever stop you.

So the level editor already exists and the physics already works. What is missing is everything you need to keep building: the palette — the tray of tiles you paint from, and the home of the art it is made of.

  1. Project window → Assets/Artwork/Platformer/Sliced/. Everything this project owns for the cave is in there. CavesTileSet/ holds the cave sliced into individual Tile assets — 1,829 of them, each a small .asset paired with a sprite. CaveEntranceTileSet/ holds the cave-mouth pieces, 250 of them. The two prefabs beside the folders, Caves and CavesEntrance, are Tile Palettes with those tiles already arranged in a grid, and each carries a Palette Settings component that says so. The raw source sheets live in Assets/Artwork/Platformer/OriginalFiles/ and MainLev2.0.png, for when you need to re-slice. There is no Assets/Sprites folder and no Assets/Tilemaps folder in this project — if you have been told otherwise, that was for a different project.
  2. Window ▸ 2D ▸ Tile Palette → the palette selector, and open Caves. Tiles fill the window. If you would rather build your own tray, create a new palette and drag the Tile assets out of CavesTileSet/ into it — the .asset files, never the raw PNGs, because the slicing is already done and re-slicing a finished sheet is a job you take on deliberately. Save a palette you make yourself in that same folder, beside the art it uses, so it travels with the project.
  3. Hierarchy → select Collision before you paint rock, and No Collision before you paint backdrop. Watch the Hierarchy highlight to confirm which one has focus: painting into the wrong tilemap is the most common first-hour mistake in this unit, and it produces a picture that lies to you.
  4. Tile Palette window → learn the five tools: Paint (drag to draw), Rect (fill a rectangle), Fill (flood a region), Erase, and the Eye Dropper (grab the tile already under your cursor). Scene view → paint a six-tile-wide ledge jutting out of an existing wall, and a two-tile pit floor below it. Then erase half of what you drew and redraw it — the point is the hand, not the level.
  5. Scene view → extend the floor to the right by ten tiles, then Game view → press Play and walk onto your new floor. If you can stand on it, you painted on Collision or Cave Exit. If you fall straight through it, you painted on the third grid — and now you know exactly what "No Collision" means.
In the Code ~10 min

No file today, so this half holds the two specifications instead — answer them in your notes before you touch the palette, because the painting is the easy part and these are the decisions it cannot make for you.

Architectural specification: the palette and the paint.
  • A sprite in this tileset has a Pixels Per Unit in its import settings. What is it, and what does it have to agree with for a painted cell to be one world unit?
  • If a ledge must sit exactly two tiles above a floor so your 6.1 jump clears it, and one cell is one unit, how high is that ledge in world units?
  • What is the difference between a Tile asset and the sprite it points at? Which one do you drag into a palette, and which one do you edit when you want to change the picture?
  • If you delete a Tile asset that a palette uses, what breaks — the palette, the painted tiles, or both? Predict, then test it on a copy.
Architectural specification: what you are extending.
  • When you paint one more tile of rock, which of the three components on Collision notices, and when — immediately, or on the next Play?
  • The tilemap also carries a Rigidbody 2D. A floor that never moves is an odd place for a body to live: what is it doing there, and what does the Inspector do to the Gravity Scale field once the body is Static?
  • Composite Collider 2D is load-bearing and you leave it alone today — you meet it properly in 7.2. For now, say what the cave would be like without it, and why "leave the components you inherited alone" is a rule rather than a superstition.

Socratic: Why a Grid and Not a Pile of Sprites?

  1. Before today every platform in your level was placed by hand — a sprite dragged in and its Transform typed one number at a time. Which two things did you have to do by hand in that world that the Grid now does for you?
  2. A tilemap stores your level as a grid of numbers plus a table of what each number means. What does that buy you that a scene full of loose sprites cannot offer? Think about file size, and think about how a program could read your level.
  3. The scene already has three tilemaps under one Grid, and two of them are solid while the third is only picture. Why would a designer bother splitting one cave into three grids instead of painting everything into one?
  4. The Collision tilemap carries the tag Ground. Tags belong to GameObjects, not to tiles. What does that tell you about how physics and scripting see a whole tilemap — as many objects, or as one?

Checkpoint — before moving on, you must be able to:

Reference Docs

Need a deeper explanation? These pages cover the same concepts:

Next: 7.2 — Tile Collision, Layers & Sorting, where you find out what the three components on Collision have been doing for you all along.

0/7 answered

Answers save on this device as you type. At the end of class, click Download and upload the file to the Canvas assignment.

Saved on this device only — the Dashboard tracks your progress.