T1-L12 — Tilemap & Level Design Tutorial

1

What Is a Tilemap?

~10 min

+10 XP

▶

Key Vocabulary

Tilemap: A grid-based system for building game levels using small square images (tiles).
Tile: A small square image (e.g. 16x16 or 32x32 pixels) that represents ground, wall, etc.
Tile Palette: A toolbox where you pick which tile to paint with — like a painter's palette.
Tilemap Collider: Automatically adds collision to your tilemap so the player can walk on it.
Rule Tile: A smart tile that automatically changes its appearance based on neighbours.

1.1

What is a Tilemap? A tilemap is like digital LEGO for game levels. You have a grid, and you "paint" small tiles onto it to build floors, walls, platforms, and decorations. Almost every 2D game uses tilemaps — Mario, Celeste, Hollow Knight, Stardew Valley.

Why tilemaps? (1) Build huge levels quickly. (2) Memory efficient — reuse the same tiles. (3) Easy to edit — just paint over. (4) Collision can be added automatically.

1.2

Create a Tilemap:

In Hierarchy: Right-click → 2D Object → Tilemap → Rectangular
Unity creates a Grid parent with a Tilemap child
The Grid defines cell size; the Tilemap holds your tiles
Rename the Tilemap to "Ground"

1.3

Import a Tileset: Download the tileset from Google Classroom (or use a free one from kenney.nl).

Drag the tileset PNG into your Sprites folder
Select it → Inspector → Sprite Mode = Multiple
Set Pixels Per Unit to match your tile size (e.g. 16 for 16x16 tiles)
Open Sprite Editor → Slice → Grid By Cell Size → set tile size → Slice → Apply

1.4

Open the Tile Palette:

Go to Window → 2D → Tile Palette
Click Create New Palette → name it "LevelTiles"
Choose Grid → Rectangle, Cell Size → Automatic
Save in a new folder called "Palettes"
Drag your sliced tileset sprites INTO the Tile Palette window
Save each tile asset in a "Tiles" folder when prompted

✓ Checkpoint: I have a Tilemap in my scene and tiles loaded in the Tile Palette.

2

Paint Your Level

~15 min

+10 XP

▶

2.1

Select your tools: In the Tile Palette, use these tools (top toolbar):

Paint Brush (B) — paint one tile at a time
Box Fill (U) — drag to fill a rectangle
Eraser (D) — remove tiles
Eyedropper (I) — pick a tile that's already placed
Flood Fill — fill an area with one tile

2.2

Paint the ground:

Select a ground/dirt tile from the palette
Make sure the "Ground" Tilemap is selected in the Hierarchy
In the Scene view, click and drag to paint a flat ground across the bottom
Use Box Fill (U) to quickly fill large areas

2.3

Add platforms: Paint some platforms above the ground at different heights. Think about:

Can the player reach each platform with their jump?
Is there a path from start to finish?
Are there gaps to jump over?
Is there a risk/reward — harder path = better reward?

2.4

Delete your old placeholder ground: If you still have the default square sprites from earlier lessons, delete them from the Hierarchy. The tilemap replaces them!

💡 Level Design Tip: Start simple! A flat ground with 3-4 platforms is a perfect first level. You can always add complexity later. Test as you build — press Play often!

✓ Checkpoint: I have a ground layer and several platforms painted with tiles.

3

Tilemap Collider & Layers

~10 min

+10 XP

▶

3.1

Add collision to your tilemap:

Select the "Ground" Tilemap in the Hierarchy
Add Component → Tilemap Collider 2D
Add Component → Composite Collider 2D (this merges tiles into one smooth collider)
Unity will auto-add a Rigidbody 2D — set it to Body Type = Static
On the Tilemap Collider 2D, tick "Used By Composite"

Why Composite? Without it, each tile has its own collider — the player can get "caught" on edges between tiles. The Composite merges them into one smooth shape.

3.2

Tag the Tilemap: Set the Ground tilemap's Tag to "Ground" so your jump detection still works!

Your OnCollisionEnter2D checks for "Ground" tag. The tilemap needs this tag to trigger isGrounded = true when landing.

3.3

Test! Press Play. Your player should walk on the tilemap ground and jump between platforms.

Player falling through? Check: (1) Tilemap has Tilemap Collider 2D. (2) Composite Collider 2D is added. (3) Rigidbody 2D is Static. (4) Player has a Collider2D and Rigidbody2D.

3.4

Create a Background Tilemap:

Right-click the Grid in Hierarchy → 2D Object → Tilemap → Rectangular
Rename it "Background"
In Tilemap Renderer, set Sorting Layer or Order in Layer = -1
Paint background tiles (sky, clouds, distant mountains)
Do NOT add a collider to the background!

✓ Checkpoint: Player walks and jumps on tilemap. Background tilemap renders behind.

4

Level Design Lab

~25 min

+10 XP

▶

4.1

Level Design Principles: Great levels follow these rules:

Teach through play: The first section should teach the mechanic safely (e.g. small gap before a big gap)
Escalating difficulty: Start easy, get harder (remember the flow channel from L09!)
Visual language: Players should "read" the level — spikes look dangerous, coins look collectible
Risk vs reward: Hard-to-reach areas should have better rewards
Breathing room: Give rest areas between challenging sections

4.2

Build Level 1: Using your tilemap, build a complete first level:

Start zone: Safe flat area where the player spawns
Tutorial zone: Small gap to jump, easy platform
Challenge zone: Multiple platforms, bigger gaps, enemies/hazards
Reward zone: Place coins on difficult platforms
End zone: Clear goal (door, flag, or exit area)

4.3

Place game objects: Add your prefabs from L10 to the level:

Drag Coin prefabs to strategic locations (on platforms, above gaps)
Place your CoinSpawner if you have one
Add Enemy prefabs in the challenge zone
Position the DeathZone below the level
Set the player's starting position at the Start zone

4.4

Playtest your level! Press Play and try to complete it. Ask yourself:

Can I reach all platforms? (adjust jumpForce if needed)
Is the first section too hard? (add stepping stones)
Is there a clear path from start to end?
Is it fun? Does it feel like a real game level?

4.5

Camera follow (optional but recommended): If your level is bigger than the screen, you need the camera to follow the player. Create a new script called "CameraFollow":

using UnityEngine;

public class CameraFollow : MonoBehaviour
{
    public Transform target;
    public float smoothSpeed = 5f;
    public Vector3 offset = new Vector3(0, 2, -10);

    void LateUpdate()
    {
        Vector3 desired = target.position + offset;
        transform.position = Vector3.Lerp(transform.position, desired, smoothSpeed * Time.deltaTime);
    }
}

Attach this to your Main Camera. Drag your Player into the "Target" field. The camera smoothly follows the player! LateUpdate runs after Update so the camera moves AFTER the player.

✓ Checkpoint: I have a complete level with ground, platforms, coins, hazards, and a clear path from start to end.

5

Extension Challenges

~15 min

+10 XP

▶

🏆 Challenge 1: Multiple Tilemap Layers — Create separate tilemaps for: Ground (collision), Decoration (no collision), Hazards (different tag). Use Sorting Layers to control draw order.

🏆 Challenge 2: Moving Platforms — Create a platform prefab (not tilemap) with a script that moves between two positions using Vector3.MoveTowards. The player rides on it!

🏆 Challenge 3: Parallax Background — Create multiple background layers that scroll at different speeds as the camera moves. Distant layers move slower = depth illusion. Search "Unity 2D parallax" for tutorials.

🏆 Challenge 4: Second Level — Create a new Scene (File → New Scene). Build a harder Level 2. Add a trigger zone at the end of Level 1 that loads Level 2 using SceneManager.LoadScene("Level2");

🚀 Boss Challenge: Build a complete 3-level game. Level 1 = tutorial. Level 2 = challenge. Level 3 = boss fight. Each level loads the next. Include a start menu and game over screen!

TILEMAP & LEVEL DESIGN

Key Vocabulary

Submission Guide

Quick Reference

Progress Tracker