Layers & Display Order — Scratch L2

The finished, shipped scene: the cat host stands in front of the guests, the banner reads Selamat Datang, and everyone is posed, dressed and layered. After this lesson you save the .sb3 and (optionally) share it online.

Learning Goals 3 min

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

Explain what a layer is on the Scratch Stage and why two overlapping sprites need an order.
Use go to [front v] layer and go to [back v] layer to push a sprite all the way to the top or bottom of the stack.
Use go [forward v] (1) layers and go [backward v] (1) layers to nudge a sprite one step at a time without disturbing the rest of the stack.

Warm-Up — the sun and the cloud 7 min

Aisyah is making a sky scene. She drags in two sprites — a yellow Sun and a fluffy white Cloud — and positions them on top of each other in the middle of the Stage. Then she clicks the flag and stares. Something looks wrong.


when flag clicked
go to x: (0) y: (0)

The Cloud sprite's script. The Sun has the same script. Both end up at the centre.

The Cloud is sitting in front of the Sun. The Sun is mostly hidden. Aisyah wanted the Cloud to drift across the Sun, partly covering it — like a real sky.

What's going on?

On the Stage, every sprite has a layer. When two sprites overlap, the one on a higher layer covers the one on a lower layer. Scratch decided that the Cloud, which Aisyah dragged in last, sits on top. There's nothing wrong with the position blocks — the script puts both sprites at the centre correctly. The fix isn't in where they are, it's in who is in front.

Today's lesson is the four Looks blocks that let you decide, in your script, who sits in front of whom — and how to nudge that order whenever you need to.

New Concept — the Stage is a stack of layers 15 min

Pretend the Scratch Stage isn't a flat picture, but a pile of see-through plastic sheets. Each sprite lives on its own sheet. The sheet on top of the pile is in front of all the others. The sheet at the bottom is behind everything. When two sprites overlap, the higher sheet covers the lower one.

Why this matters

Every game and animation you'll ever build has overlapping sprites. The player walks past a tree — should the tree cover the player, or the player cover the tree? A speech bubble appears over a character's head — it must be in front, or you can't read it. A spaceship flies over the moon — moon behind, ship in front. Without layers, every sprite would be a confusing jumble.

Four blocks, two pairs

All four layer blocks live in the purple Looks palette, near the bottom. They come in two pairs:


go to [front v] layer
go to [back v] layer
go [forward v] (1) layers
go [backward v] (1) layers

The four layer blocks. The first two are jumps; the second two are nudges.

Jumps: go to [front v] layer sends this sprite to the very top of the pile — in front of everything. go to [back v] layer sends it all the way to the bottom — behind everything.
Nudges: go [forward v] (1) layers moves this sprite up by one layer. go [backward v] (1) layers moves it down by one. The number can be any whole number.

Fixing Aisyah's sky

Aisyah's Sun needs to sit in front of the Cloud — wait, no. She actually wants the Cloud in front. So we put a layer block on the Cloud's flag script:


when flag clicked
go to [front v] layer
go to x: (0) y: (0)

The Cloud now decides, every flag click, "I belong in front." No matter what Aisyah drags in later, the Cloud will be on top.

Or, equally valid, we put the opposite block on the Sun:


when flag clicked
go to [back v] layer
go to x: (0) y: (0)

The Sun says "I belong at the back." Same end result — Cloud in front of Sun.

When to nudge instead of jump

Use the nudge blocks when the stack has many sprites and you only want to move one a little. If you have a player, three trees, and a flying bird, sending the player go to [front v] layer puts him in front of the bird too — which looks wrong. Instead, go [forward v] (1) layers moves the player one step up so he covers the tree he's next to, without leapfrogging the bird.

Common mistakes

Forgetting to re-set the layer on flag click. Scratch remembers the layer order between runs of your project. If your friend ran the project and dragged a sprite to the front in the editor, that order sticks. Put your layer block under when ⚑ clicked so every run starts the same way.
Putting go to [front v] layer on the wrong sprite. The block always means "I, this sprite, go to the front." It can't move other sprites. Check the sprite selected in the sprite list before you drop the block.
Confusing layer with the Backdrop. The Backdrop is its own thing — it's always behind every sprite. Sending a sprite "to the back" sends it behind the other sprites, but still in front of the Backdrop.
Using a giant nudge number. go [backward v] (999) layers works, but if you only have four sprites, the same effect is achieved by go to [back v] layer — and that's clearer to read.

Worked Example — choreograph the kampung cast 12 min

Open your Kampung-Stage-Scene project. The cast is posed and dressed, but the guests overlap untidily. We layer them — host in front, guests behind — to finish the scene. Eight steps.

Stage plan. You give the cat host a go to [front v] layer (see the ✏️ badge) and send each guest to the back, so the host clearly leads the open house.

Step 1 — Open the arc project

Open Kampung-Stage-Scene. The cast — cat host, Aisyah, Wei Jie, Priya — is posed and dressed from the last three lessons.

Step 2 — Decide the order

The host should lead, so he sits in front. The three guests sit behind him, in the order they stand.

Step 3 — Host goes to front

Click the cat host. Add one layer block to the top of its flag script:


when flag clicked
go to [front v] layer
go to x: (-130) y: (-60)

The host claims the front every flag click, whoever was on top before.

Step 4 — Aisyah goes to back

Click Aisyah. Add a layer block to her flag script:


when flag clicked
go to [back v] layer
go to x: (10) y: (-60)

Step 5 — Wei Jie nudges forward of Aisyah

Click Wei Jie. He should sit just in front of Aisyah but still behind the host. Use a nudge, not a jump:


when flag clicked
go to [back v] layer
go [forward v] (1) layers
go to x: (80) y: (-70)

Back first, then one nudge forward — so he ends up one layer ahead of Aisyah.

Step 6 — Priya stays where she lands

Click Priya. She needs no layer block — she falls between Wei Jie and the host:


when flag clicked
go to x: (135) y: (-55)

Step 7 — Click the flag

Host in front. Aisyah at the back. Wei Jie one nudge ahead of her. Priya in the middle. The open house finally looks staged, not piled.

Step 8 — Make the host step in front of a guest

Drag the host so he overlaps Priya. Click the flag — the host snaps to his spot and jumps to the front, covering her edge. The choreography holds every single run.

The full assembled scene

Four sprites, four short scripts. The host claims the front, two guests claim the back (one nudged ahead), and Priya falls into place. That is the simplest layer pattern: the leaders stake the front and back, everyone else falls between.

Try It Yourself — three layer drills 15 min

🟢 Easy

Goal: Add a Ball sprite and a Bowl sprite. Make the Ball sit inside the Bowl (so it looks like the Bowl is holding the Ball). The Bowl must be in front.


when flag clicked
go to [front v] layer
go to x: (0) y: (-50)

On the Bowl sprite. The Ball needs no layer block.

Think: Could you instead have put go to [back v] layer on the Ball? Yes — same end result. Two ways, one outcome.

🟡 Medium

Goal: Build a scene with the cat in front of a tree, but when you press the down arrow, the cat ducks behind the tree. Press up to come back in front.


when flag clicked
go to [front v] layer
forever
  if <key [down arrow v] pressed?> then
    go to [back v] layer
  end
  if <key [up arrow v] pressed?> then
    go to [front v] layer
  end
end

On the cat sprite. Two if-thens from the upcoming lessons — but you can read them already.

Think: The Tree is the only other sprite, so "back" means "behind the tree" and "front" means "in front of the tree". With more sprites you'd need nudges, not jumps.

🔴 Stretch

Goal: Make four falling fruits (Apple, Banana, Orange, Watermelon) drop down from the top. Every time the user clicks a fruit, that fruit should pop to the very front — even if it was at the back before. Use when this sprite clicked.


when this sprite clicked
go to [front v] layer
say [Picked me!] for (1) seconds

On each fruit. Identical script copy-pasted into all four sprites.

Think: Click an Apple. It jumps to the front. Click a Banana. Now the Banana is in front of the Apple. The most-recently-clicked fruit is always on top — like shuffling a deck of cards by always pulling one to the top.

Mini-Challenge — Daniel's flickering plane 5 min

"Why is the plane jumping?"

Daniel has built a scene with three sprites: a Mountain (back), a Cloud (middle), and an Airplane (front). He wants the Airplane to fly across, always in front. But the Airplane keeps flickering behind the Cloud as it moves. Here is the Airplane's script:


when flag clicked
go to x: (-200) y: (100)
forever
  change x by (3)
  go to [back v] layer
end

Daniel's Airplane script. Read it carefully — what does the last block inside the forever loop do?

Why does the Airplane keep dropping behind the Cloud, and what should Daniel change?

Reveal one valid solution

Inside the forever loop, Daniel wrote go to [back v] layer. That sends the Airplane to the back on every loop tick — many times a second. The Airplane briefly appears in front (because it was set up in front in the editor), but the loop immediately shoves it to the back, then the Cloud sits over it, and the Airplane "flickers" through.

Two fixes work:

Change go to [back v] layer to go to [front v] layer — keeps the plane in front every tick.
Move the layer block out of the forever and put it once at the top, after the flag hat. Then the Airplane goes to the front once and stays there.

Option 2 is the better habit — set layer once, not many times a second. If a layer block doesn't need to change, it doesn't belong in a loop.

🚀 Mission — Ship the Kampung Stage Scene

Time to finish and share the open house you have built over five lessons. Open Kampung-Stage-Scene one last time.

Add a kampung or open-house backdrop, plus a Selamat Datang banner sprite sent go to [front v] layer so it reads clearly over the cast.
Check every actor: posed (L02-03), dressed (L02-04), layered (today) and greeting on the flag (L02-02).
Save the project: File → Save to your computer as Kampung-Stage-Scene.sb3.
Optional share: if you have a scratch.mit.edu account, click Share and add a short project note. Under 13? You need a parent's email to make an account — ask a parent before sharing online. No account is fine; the .sb3 file is your finished work.

✅ Done when: one flag click stages the whole open house — banner on top, host in front, guests posed, dressed and layered behind — and the .sb3 is saved. Going further: give the host a forever wave and let one guest go [forward v] (1) layers when clicked, so the scene is a little interactive.

Recap 3 min

The Scratch Stage is a stack of layers, like a pile of transparent sheets. Every sprite lives on its own sheet, and when two sprites overlap, the higher sheet covers the lower one. The four Looks blocks let you decide where a sprite sits in the pile: jump all the way to the front or back with go to [front v] layer / go to [back v] layer, or nudge one step at a time with go [forward v] (1) layers / go [backward v] (1) layers. Set the layer once at the flag hat — putting layer blocks inside a forever causes flickering and wastes Scratch's time.

Layer: A position in the front-to-back stack of sprites on the Stage. Higher layers cover lower layers when sprites overlap.
Display order: The full top-to-bottom arrangement of every sprite on the Stage. Changing one sprite's layer changes the display order.
Front / Back: The two ends of the layer stack. Front is closest to the viewer (covers everything); Back is furthest (covered by everything, but still in front of the Backdrop).
Nudge: An informal name for the go [forward v] (1) layers / go [backward v] (1) layers blocks, which move a sprite one step in the stack without leapfrogging everything else.
Backdrop: The background image. Always sits behind every sprite — no layer block ever moves a sprite behind the Backdrop.

Homework 2 min

The Five-Sprite Sandwich. Build one Scratch project with five sprites stacked at the centre of the Stage. Use all four layer blocks at least once across the project.

Add five sprites of your choice. Drag them so they overlap heavily in the middle of the Stage.
Sprite 1: at the flag, go to [back v] layer. This sprite is "the floor."
Sprite 2: at the flag, go to [front v] layer. This sprite is "the ceiling."
Sprite 3: leave alone — it will land somewhere in the middle. Add when this sprite clicked + go [forward v] (1) layers so clicking it nudges it up one step at a time.
Sprite 4: same as Sprite 3 but with go [backward v] (1) layers. Clicking nudges it down.
Sprite 5: pick a Malaysian snack image (kuih lapis, teh tarik glass — your choice). Give it when ⚑ clicked + go to [front v] layer. Even though Sprite 2 also goes to the front, whichever runs second wins.

Save as HW-L2-05-Sandwich.sb3. Click the flag, then click Sprites 3 and 4 several times each — watch the order shuffle live.

Bring back next class:

The .sb3 file.
Your answer to: "Sprites 2 and 5 both run go to [front v] layer at the flag. Which one actually ends up on top, and why?"

Heads up for next class: SCR-L02-06 meets the if <> then C-block — your first decision block. Pairs perfectly with sprite-clicked layer changes from today's homework.