Designing a Maze Backdrop — walls live in the picture

Learning Goals 3 min

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

1. Explain why painting maze walls into the backdrop is simpler than building a maze out of separate wall sprites — and faster to draw.
2. Use the backdrop editor's line tool, rectangle tool, and fill bucket to draw black walls with a clearly marked start point and end point on a 480×360 canvas.
3. Predict how next lesson's player sprite will detect walls using touching color [#000000] ? — and what colour rule that imposes on every maze you draw.

Warm-Up — predict the maze problem 7 min

Kelvin wants to build a maze game. He's thinking ahead and asks: "How many sprites do I need?"

He sketches a small maze on paper and counts the wall pieces:

when flag clicked
go to x: (-200) y: (-150)
forever
  if <key [right arrow v] pressed?> then
    change x by (5)
    if <touching [Wall1 v] ?> then
      change x by (-5)
    end
    if <touching [Wall2 v] ?> then
      change x by (-5)
    end
    if <touching [Wall3 v] ?> then
      change x by (-5)
    end
  end
end
        

What goes wrong as he keeps building? (Don't run anything — just predict.)

Today is the design half of that fix: how to actually paint the maze. Next lesson is the scripting half.

New Concept — the backdrop is the level 18 min

In Cluster E your backdrops were just pictures — Title, Play, Paused, GameOver. They told the player what was happening; they didn't do anything. In Cluster F that changes. The backdrop becomes the level itself. Walls are pixels, not objects.

Why the backdrop, not sprites?

• One question, many walls. The player asks touching color [#000000] ? once. Twelve walls or twelve hundred — same one check.
• Redraw freely. Want a harder maze? Erase the backdrop, paint a new one. The script doesn't change.
• Scales to multiple levels. Each level is a different backdrop costume. switch backdrop to [Maze2 v] loads a whole new map in one block.
• Lower sprite count. Scratch is happiest with a handful of sprites, not fifty. Backdrops are unlimited in practice.

The 480 by 360 canvas

The Stage is exactly 480 pixels wide and 360 pixels tall. The backdrop editor uses the same canvas. The centre is x: 0, y: 0; the edges are x: ±240 and y: ±180. Your maze walls are black pixels drawn somewhere on that rectangle.

Opening the backdrop editor

Look at the bottom-right of Scratch. To the right of the sprite list is a smaller panel labelled Stage. Click it. Then click the Backdrops tab (top-left, next to Code and Costumes). You're now in the painting tool. The first costume is usually a blank white rectangle named backdrop1. Rename it Maze1 by clicking the text field.

Tool 1 — the rectangle tool (filled black)

On the left toolbar you'll see icons for rectangle, circle, line, brush, eraser, fill, text, select, and reshape. Click the rectangle. Above the canvas, two important controls:

• Fill — set this to solid black (the colour swatch with the Saturation slider all the way down and brightness at zero).
• Outline — set this to no outline (the white square with the red diagonal slash). You only want fill.

Drag a rectangle on the canvas. You've drawn a wall. Hold shift while dragging if you want a perfect square. Most maze walls are thin rectangles — 10-15 pixels thick, 100-200 pixels long.

Tool 2 — the line tool

For thinner walls (one pixel up to about 8), use the line tool. Set the colour to black, set the line thickness up top (the slider next to the colour) to around 6 to 10 — thin enough to look like a wall, thick enough that the player sprite can't slip through.

Hold shift while dragging to lock the line to horizontal or vertical. Maze walls almost always want this — a wonky 87° wall looks like a mistake.

Tool 3 — the fill bucket (for chambers)

If you want a big black block — say, an entire quarter of the maze is "outside the play area" — draw the outline with rectangles, then click the fill bucket (paint pot icon), set colour to black, and click inside the area. Everything bounded by black lines fills in. Standard paint-program behaviour.

Mark the start and the end

The player needs a known starting cell. Convention: paint a small green square in the start cell (Kelvin's bottom-left) and a small red square in the end cell (Kelvin's top-right). These are just visual markers — they're not walls because they aren't black. The player sprite ignores them.

switch backdrop to [Maze1 v]
        

Worked Example — paint your first maze 12 min

Open Scratch. We'll design a small, beginner-friendly maze called Maze1 in eight steps. No code yet — just painting.

Step 1 — New project, open the Stage

Start a fresh project. Click the Stage panel in the bottom-right. Click the Backdrops tab. You see a blank white canvas. Rename the costume from backdrop1 to Maze1.

Step 2 — Set up the tools

Click the rectangle icon. Up at the colour bar, click Fill, drag the brightness slider to the bottom — that's pure black. Click Outline and pick the no outline option (white square with red slash).

Step 3 — Draw the outer border

Draw four thin rectangles around the edges of the canvas to form a frame. Top wall: thin and wide along y ≈ +170. Bottom wall along y ≈ -170. Left and right walls along x ≈ ±230. Each one about 10 pixels thick. This is the room your player can't escape.

Step 4 — Draw three internal walls

Add three rectangles inside the frame to make corridors. A horizontal one in the middle stopping short of the right edge (so there's a gap to walk through). A vertical one on the left half. A short L-shape near the top-right. Hold shift while dragging to keep lines straight.

Step 5 — Check the path

Trace a route with your mouse cursor from where the player will start (bottom-left corner) to where they'll finish (top-right corner). Did you leave a gap everywhere you needed one? If not, click the eraser, set its size to about 20, and rub out a small opening.

Step 6 — Paint the start marker

Switch the Fill colour to a bright green (high saturation, mid brightness). Pick the rectangle tool. Draw a small square — about 20×20 pixels — in the bottom-left interior cell. This is where the player will spawn.

Step 7 — Paint the end marker

Switch Fill to red. Same shape and size, drawn into the top-right cell. This is the win zone for L03-37.

Step 8 — Save and admire

Save the project as Maze1.sb3. Click the Code tab and then back to Backdrops to confirm Maze1 shows up correctly in the costume list.

What you just built: a level. Not a script that draws a level — an actual level, ready to be walked. Next lesson's tiny player script will work on any maze you can draw using these eight steps. Make ten different mazes and you've made ten levels. That's the power of painting walls into the backdrop.

Try It Yourself — three maze design drills 12 min

Mini-Challenge — the maze that won't work 5 min

"Sara's invisible walls"

Sara draws a beautiful maze. Nice corridors, clear start, clear end. She tests it next lesson and discovers her player walks straight through three of the walls. The other walls stop her fine.

You peek at her backdrop. The walls that work are pure black. The walls that don't — when you click them with the eyedropper — show this:

Wall A (works):     #000000   solid black
Wall B (works):     #000000   solid black
Wall C (broken):    #1a1a1a   very dark grey
Wall D (broken):    #0a0512   nearly black, faint purple
Wall E (broken):    #000301   black with a green hint
        

What happened, and how does Sara fix all three walls in one go?

Recap 3 min

You met the Cluster F design pattern: paint the maze walls right into the backdrop, mark a start (green) and end (red), keep every wall the same pure black, and make the walls at least 8-10 pixels thick. The Stage is a 480×360 canvas; the backdrop editor's rectangle, line, and fill-bucket tools are all you need. No code today — only design choices. Next lesson the player learns to ask one little hexagonal question, and these hand-drawn walls become a real game.

Backdrop-based maze

A maze where the walls are painted into the Stage's backdrop image, not built from sprites. One sensing block on the player handles collisions with all walls at once.

Stage canvas

The 480-pixel-wide, 360-pixel-tall rectangle on which all backdrops are drawn. Centre is x: 0, y: 0; corners are at ±240, ±180.

Pure black

The colour #000000 — saturation 0, brightness 0. The only colour touching color [#000000] ? matches. Off-by-one-digit "near black" colours don't count.

Wall thickness

How many pixels thick a maze wall is drawn. Must be larger than the player's movement step (8-10 pixels is safe for 5-pixel movement) or the player will tunnel through.

Start / end marker

Small coloured squares (green for start, red for end) painted into the backdrop as visual cues. They're not walls because they aren't black; the player ignores them as obstacles.

Costume swap (for levels)

Using multiple backdrop costumes (Maze1, Maze2...) as separate levels. switch backdrop to [Maze2 v] loads a whole new maze without changing a single script.

Homework 2 min

Design three mazes by next class. All in the same project, as three backdrop costumes. No code needed — just the artwork.

1. Maze1 — Easy. One straight-ish path, three or four corners. Should take an adult about 5 seconds to solve.
2. Maze2 — Medium. More turns, maybe a dead end. Adult finishes in 15 seconds.
3. Maze3 — Hard. Multiple dead ends, two valid paths (one short, one long). Adult takes 30+ seconds.

For all three: thin black walls (8-10 pixels minimum), green start in the same corner across all three, red end in the same corner across all three. Save as HW-L3-32-ThreeMazes.sb3.

Bring back next class:

• The .sb3 file with three maze backdrops.
• Your answer to: "Which maze took you longest to draw, and which would take you longest to solve? Are they the same one? Why or why not?"

Heads up for next class: SCR-L03-33 wires up the player. You'll meet touching color [#000000] ? and four tiny scripts (one per arrow key) that make your hand-painted walls behave like real walls.