Multi-Backdrop Levels — Scratch L3

Where we are now: scrolling ✅, gravity ✅, jumping ✅. Today the level variable drives backdrop switches so levels change as the cat advances.

Learning Goals 3 min

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

Store the current level in a level variable and use it to switch the Stage's backdrop with switch backdrop to ().
Detect when the player reaches the right edge of the Stage and advance to the next level by combining change [level v] by (1) with a switch backdrop.
Use the Stage's when backdrop switches to () hat to re-setup the player and any enemies whenever a new level loads — including reloading the current level after the player dies.

Warm-Up — one level, no future 7 min

By now your platformer has a player that walks, jumps, and lands on platforms (SCR-L03-40). But there is only one screen. The brown rectangles never change. The player can run back and forth all day with nowhere to go. Predict: what's the simplest way to add a second screen?


when flag clicked
go to x: (-200) y: (-100)

Today's project still starts the player on the left side of one single Stage backdrop.

Reveal the answer

You could try to draw a much bigger world and scroll it — that's a heavier project we'll meet in a later cluster. The much simpler trick is to use Scratch's multiple backdrops feature. The Stage can hold any number of backdrop images; switching between them is one block. Each backdrop becomes a self-contained "screen" — one level. When the player reaches the right edge, you change the backdrop and bounce the player back to the left side. Voilà — Level 2.

Today you'll add three backdrops (level1, level2, level3), a level variable, and the tiny bit of glue that lets the player walk from one to the next.

New Concept — backdrops as levels 15 min

The Stage in Scratch isn't just one background image. It's a list of background images called backdrops. You can give each one a name, switch between them with code, and listen for "when this backdrop loads" events. That's everything you need to build a level system.

The Stage's backdrops tab

Click the Stage thumbnail in the bottom-right. The middle pane changes to show Backdrops instead of Costumes. Whatever backdrops live there are the levels available to your project. Today we'll start with three: level1, level2, level3. Each one is just an image — solid background plus the brown platforms drawn in place.

The switching blocks

There are three Looks blocks that change which backdrop is showing:

switch backdrop to [level1 v] — jump straight to a named backdrop.
switch backdrop to (next backdrop v) — advance one step through the backdrop list.
next backdrop — same as above, shorter name.


when flag clicked
set [level v] to (1)
switch backdrop to [level1 v]

Start of every game. Variable to 1, backdrop to level1. Always reset both together so they can never disagree.

The level variable as the source of truth

It is tempting to ask Scratch "which backdrop is currently showing?" via (backdrop number) and use that. Don't. You want your own variable that you control. Backdrop numbers can change if you reorder the backdrop list; your level variable cannot. The rule is: change the variable, then switch the backdrop to match. Never the other way around.

Advancing to the next level

The player should advance when they walk off the right edge of the Stage. The right edge is around x = 240. Put this check inside the player's existing forever loop:


if <(x position) > (235)> then
  change [level v] by (1)
  switch backdrop to (join [level] (level))
end

One walk-off-edge → one variable bump → one backdrop switch. The join glues the word "level" to the number, building level1, level2, etc.

Wait — the player sprite can't switch the Stage's backdrop directly with the dropdown variant, but they can use the join-string variant from any sprite. The string level2 matches the backdrop named level2. Scratch finds it and swaps.

The "when backdrop switches" hat

Putting the player at x: −200 in the new level should happen once the moment the backdrop loads, not every frame. The Stage has a hat block for exactly this — listen on the Stage's scripts area:


when backdrop switches to [level1 v]
broadcast [setup-level1 v]

One hat per backdrop on the Stage. Broadcast a unique message so each sprite can react.

Then on the Player sprite:


when I receive [setup-level1 v]
go to x: (-200) y: (-100)
set [velocity-y v] to (0)

Reset position and velocity. Without the velocity reset, the player keeps last level's downward momentum and falls through the new floor before frame 1 finishes.

Reloading after death

If the player touches an enemy or falls off the bottom (y < −180), you don't change the level variable — you simply re-switch to the same backdrop. The "when backdrop switches" hat fires again and the level resets:


if <(y position) < (-180)> then
  switch backdrop to (join [level] (level))
end

Same level number, same backdrop name. The switch retriggers the setup broadcast, which respawns the player at the start.

Common mistakes

Naming backdrops inconsistently. Level1 with a capital L doesn't match the string level1. Pick one casing and stick to it everywhere.
Forgetting to reset velocity-y on a level switch. The player arrives with last level's downward speed and falls clean through the new floor.
Bumping the level variable on every frame the player is past x: 235. Without a single-fire guard, the player skips from level 1 to level 5 in three frames. Quick fix: also reset the player's x to −200 in the setup broadcast — they're no longer past the edge.
Using (backdrop number) as the source of truth. Reorder your backdrops list and the whole game breaks. Always store level in your own variable.
Switching backdrop without a "when backdrop switches" hat. The new level loads with the player stuck wherever they were standing, possibly mid-air, possibly inside a wall.

Worked Example — three rooms in Kuala Lumpur 12 min

We'll build a three-level mini-platformer. Level 1 is the pasar (market floor), level 2 is the LRT platform, level 3 is the rooftop. Open PlatformerArc.sb3 from SCR-L03-40 — it should already have a working jump engine.

Stage plan. Three backdrops with different platform heights. The cat (✏️ badge) advances to the next level when it crosses the dashed line at x > 235. The level variable watcher (top right) shows which room the player is in.

Step 1 — Three backdrops on the Stage

Click the Stage. In the Backdrops tab, right-click your existing backdrop → Duplicate. Rename the copies level1, level2, level3. Edit each one to have a different layout of brown platforms — same brown colour, different positions.

Step 2 — The level variable

Variables → Make a Variable → name it level → For all sprites → OK. Tick the watcher on while you debug.

Step 3 — Start the game on level 1

On the Player sprite, find your existing when ⚑ clicked stack. At the top, add set [level v] to (1). On the Stage, add a new stack: when ⚑ clicked + switch backdrop to [level1 v]. Now every flag click resets the game.

Step 4 — Set up the Stage's three hat blocks

Still on the Stage, drop three separate stacks: when backdrop switches to [level1 v] + broadcast [setup-level1 v]; the same for level2 and level3. Use the broadcast-new dropdown to create three new messages.

Step 5 — Player reacts to each broadcast

On the Player sprite, add three small stacks: when I receive [setup-level1 v] + go to x: (-200) y: (-100) + set [velocity-y v] to (0). Repeat for level2 and level3 (you can use different starting positions if you like).

Step 6 — Advance on right-edge cross

Inside the Player's main forever loop (the one with the jump engine), add: if (x position) > (235) then → change [level v] by (1) → switch backdrop to (join [level] (level)).

Step 7 — Reload on death

Below that, add another if: if (y position) < (-180) then → switch backdrop to (join [level] (level)). No level change — same backdrop, fresh setup broadcast.

Step 8 — Test the whole loop

Flag. Walk right. Jump across the pasar floor. Reach the right edge — backdrop switches to level2, you spawn on the LRT platform. Reach right edge again — rooftop. Fall off the rooftop into the void — backdrop reloads to level3, you spawn back at the start. Three rooms, one project.

The full assembled stacks


when flag clicked
set [level v] to (1)
set [velocity-y v] to (0)
forever
  set [on-ground v] to <touching color [#964b00] ?>
  if <<key [space v] pressed?> and <(on-ground) = [true]>> then
    set [velocity-y v] to (12)
  end
  if <(on-ground) = [true]> then
    set [velocity-y v] to (0)
  else
    change [velocity-y v] by (-1)
  end
  change y by (velocity-y)
  if <(x position) > (235)> then
    change [level v] by (1)
    switch backdrop to (join [level] (level))
  end
  if <(y position) < (-180)> then
    switch backdrop to (join [level] (level))
  end
end

when I receive [setup-level1 v]
go to x: (-200) y: (-100)
set [velocity-y v] to (0)

The Player's main loop (top stack) plus one of three setup-receivers. The Stage holds the matching backdrop-switch hats and broadcasts.

What you just built: a state machine. The level variable is the state; backdrops are the visual representation; broadcasts are the transitions. Every multi-screen game — Mario, Zelda, Hollow Knight — works on this exact pattern, just with more states.

Try It Yourself — three level drills 15 min

🟢 Easy

Goal: Add a fourth backdrop called level4 with one super-tall pillar in the middle. Make sure the rest of the game keeps working — when you reach the right edge of level 3, you should arrive at level 4. No code change should be needed if you set things up right.


when backdrop switches to [level4 v]
broadcast [setup-level4 v]

On the Stage. Plus a matching setup-level4 receiver on the Player.

Think: The join [level] (level) expression builds level4 automatically once the variable hits 4. You only had to add the hat and the receiver — the existing forever loop didn't change at all. That's the power of using the variable instead of hard-coding switches.

🟡 Medium

Goal: Add a "previous level" button. When the player presses the left arrow while their x-position is below −235 (off the left edge), go back one level. Make sure level never drops below 1.


if <<(x position) < (-235)> and <(level) > (1)>> then
  change [level v] by (-1)
  switch backdrop to (join [level] (level))
end

The and-gate stops the player going to "level 0" which doesn't exist.

Think: This is the same pattern as the right-edge check, mirrored. Two new bits: the level-greater-than-1 guard, and the −1 change. The setup-broadcast will respawn the player on the right side of the previous level if you set it that way in the receiver.

🔴 Stretch

Goal: Add a victory screen. Make a fourth backdrop called victory. After level 3, instead of trying to load level 4 (which doesn't exist), switch to the victory backdrop and freeze the player. Hint: check if level just became higher than the highest real level.


if <(x position) > (235)> then
  change [level v] by (1)
  if <(level) > (3)> then
    switch backdrop to [victory v]
    stop [other scripts in sprite v]
  else
    switch backdrop to (join [level] (level))
  end
end

Think: The stop [other scripts in sprite v] kills the forever loop so the player can't jump or move on the victory screen. The current script (this if-then) keeps running to its end, but then there's nothing else to do.

Mini-Challenge — Aishah's teleport bug 5 min

"My player skips three levels in one step"

Aishah set up four backdrops and the right-edge check. The first time she tested, the player walked off the right edge of level 1 and immediately ended up on level 4. She added a watcher for level and saw it jumped from 1 to 4 in about half a second. Here is her right-edge stack:


forever
  if <(x position) > (235)> then
    change [level v] by (1)
    switch backdrop to (join [level] (level))
  end
end

Aishah's check. Looks fine. Why does it fire three times?

Think about what x-position the player still has the instant after the backdrop switches. Then think about what the forever loop does on the next frame.

🚀 Mission — Add Levels to the Arc Project

Open PlatformerArc.sb3. The cat jumps and lands — now give it somewhere to go.

Paint three backdrops on the Stage: level1, level2, level3. Same brown platform colour on each, different layouts.
Make a level variable (for all sprites). Set to 1 at flag.
Stage hats: when backdrop switches to [level1 v] → broadcast setup-level1. Repeat for level2, level3.
Cat receivers: go to x: −200, reset velocity-y to 0 on each broadcast.
In the cat's forever: if x > 235 → change level by 1, go to x: −200, switch backdrop to join [level] (level).

✅ Done when: walking off the right edge of level 1 loads level 2, and level 2 loads level 3. Save PlatformerArc.sb3. Going further: add a death respawn — if y < −180, re-switch to the current backdrop so the cat spawns fresh.

Reveal one valid solution

The backdrop switch changes the image but not the player's x-position. The player is still at roughly x: 240 when frame 2 starts. The forever loop checks again — still greater than 235 — bumps level to 3, switches again. Frame 3: still greater than 235 — bumps to 4. By the time the player's setup-broadcast fires and moves them back to x: −200, they've already raced through three levels.

The fix is to make the setup-broadcast move the player before the next frame check. Because broadcasts are processed asynchronously, the cleanest fix is to also reset the player's x inside the same if-then:


forever
  if <(x position) > (235)> then
    change [level v] by (1)
    go to x: (-200) y: (-100)
    set [velocity-y v] to (0)
    switch backdrop to (join [level] (level))
  end
end

Now the player is teleported to x: −200 in the same frame the level bumps, so the next frame's check fails. The setup-broadcast still fires (good — for other sprites), but the player no longer relies on it for the move. State changes should reset the relevant variables in the same atomic block, not via a downstream message.

Recap 3 min

You turned your single-screen jumper into a three-level game using Scratch's multiple-backdrops feature. The level variable holds the current state; switch backdrop to (join [level] (level)) turns that state into a visible level layout; and the Stage's when backdrop switches to () hat fires a broadcast that resets every sprite to the new layout. Reload-on-death is the same code as advance — just without the variable change. Next lesson you'll sprinkle collectible coins onto each level using clones.

Backdrop: An image attached to the Stage. The Stage can hold many; switch backdrop to () chooses which one is showing. Each backdrop is a separate level layout in this project.
State variable: A variable like level that holds "where in the game we are". The backdrop is the visual; the state variable is the source of truth.
Broadcast: A message sent from one stack to all sprites. broadcast [setup-level1 v] tells every sprite "level 1 just loaded — do your start-of-level setup".
When backdrop switches to: A Stage-only Events hat that fires the instant a named backdrop becomes the current one. Use it to broadcast per-level setup messages.
Reload: Re-switching to the same backdrop. The "when backdrop switches" hat fires again, so all the setup happens again. Used here for death/respawn without changing the level number.
State machine: A program that lives in one of several "states" at a time, transitioning between them on specific events. Your level system is a tiny state machine: level1 → level2 → level3.

Homework 2 min

The Kampung Tour. Build a five-backdrop project where the player walks through five different scenes from a Malaysian kampung.

Make five backdrops: level1 (rumah), level2 (sawah padi), level3 (sungai), level4 (hutan), level5 (pantai). Each one is a different background colour with brown platforms in a different layout.
Add the matching five Stage hats and five broadcasts. On the Player, add five setup-receivers that each call go to x: (-200) y: (-100) and reset velocity-y to 0.
The player should advance on right-edge cross, reload on falling below y: −180, and (bonus) reach a victory backdrop after level 5.
Make sure the watcher for level is visible on the Stage during testing so you can see the state change in real time.

Save as HW-L3-41-Kampung-Tour.sb3.

Bring back next class:

The .sb3 file.
Your answer to: "What goes wrong if you remove the set [velocity-y v] to (0) line from your setup-receivers? Try it on level 2 and describe what happens to the player."

Heads up for next class: SCR-L03-42 sprinkles collectible coins onto each of your levels using clones. The coin sprite will spawn copies of itself at preset positions when each level loads, vanish when touched, and update a score variable.