Choose a Backdrop

Learning Goals 3 min

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

1. Find the Stage panel in the bottom-right corner of the editor.
2. Open the Backdrops tab and add a backdrop from the library.
3. Run last lesson's script and see the cat now sits on a real scene, not a blank white box.

Warm-Up 7 min

Last lesson you taught the cat to show, hide, and stack above other sprites. Today, the Stage itself gets dressed up — and you'll pick the kampung scenes that set the mood for your whole arc story.

Quick-fire puzzle

Faiz built this script and clicked the green flag. What does the cat do — and what does the Stage do?

when flag clicked
show
move (50) steps
        

New Concept — the Stage has its own wardrobe 15 min

Every sprite has costumes — different outfits it can wear. The Stage has the same idea, but the outfits are called backdrops. A backdrop is the picture behind all your sprites. It sets the scene: a forest, a kitchen, a beach, a starry sky.

Where the Stage lives

Look at the bottom-right corner of the editor. You'll see two cards side by side:

Click the Stage card. Three things change:

• The Stage card lights up with a blue border.
• The middle tabs change from Code · Costumes · Sounds to Code · Backdrops · Sounds.
• The Blocks Panel hides the Motion blocks — the Stage cannot move.

The four ways to add a backdrop

Hover the small blue picture icon at the very bottom of the Stage panel. Four buttons pop up:

The Stage is sprite-like, but different

The Stage is the only "sprite" that has Backdrops instead of Costumes. It also can't move and has no Motion blocks. Everything else (Looks, Sound, Events, Control) works the same.

Why it matters

A backdrop turns a tech demo into a story. The same "cat walks 50 steps" looks like a maths lesson on a blank Stage and like a jungle adventure on the Forest backdrop. Designers call this setting — and Scratch makes it a one-click change.

Worked Example — give the cat a forest 15 min

Open Scratch. The cat sits on a plain white Stage. We'll add a forest behind it — no code blocks at all in this lesson.

Step 1 — Click the Stage card

Look at the bottom-right of the editor. To the right of the Sprite list, find the Stage card. Click it. Its border turns blue.

Step 2 — Open the Backdrops tab

Look at the middle column at the top. The tabs now read Code · Backdrops · Sounds. Click Backdrops. You'll see one item in the left list — backdrop1 — and it's blank white.

Step 3 — Hover the blue picture icon

Look at the very bottom-right of the Stage panel. There's a small blue picture icon. Hover (don't click yet) — four buttons pop up.

Step 4 — Click "Choose a Backdrop"

Click the magnifier button. The Scratch backdrop library opens — rows and rows of pictures.

Step 5 — Pick "Forest"

At the top of the library, type Forest into the search box. A few results appear. Click the green forest picture labelled Forest.

Step 6 — Look at the Stage

The Stage now shows the Forest backdrop. Your cat is still right where it was — at the centre — but now standing in front of trees and grass.

Step 7 — Re-run last lesson's script

Click the cat in the Sprite list. Click the Code tab. Your script from last lesson is still there. Click the green flag.

when flag clicked
show
move (50) steps
        

What changed: compared to last lesson, the Stage now has a real picture behind the cat. The script ran the same way. Backdrops are decoration, not behaviour — they don't change what your blocks do.

Your finished setup

Stage panel: 1 backdrop — Forest. Sprite list: 1 sprite — the cat (or Aisyah's Cat). Script: the same 3-block stack above. The cat hops 50 pixels right across a forest scene every time you click the flag.

Try It Yourself — three small builds 12 min

when flag clicked
show
move (50) steps
          

when flag clicked
move (10) steps
          

when flag clicked
move (50) steps
          

Mini-Challenge — three backdrops in one project 5 min

"A cat with three homes"

Using only the Backdrops tab (no new code blocks), give your project three different backdrops: one from the library, one from Surprise, and one from Paint. Then run the same 3-block script you used in the Worked Example.

It works if:

• The Stage panel shows the number 3 at the top-left of its card.
• Each backdrop has a different style (library, surprise, painted).
• When you click any backdrop in the list, the Stage updates to show it.
• The cat still moves 50 steps on green flag click — the script is unchanged.

Recap 2 min

Today you met the Stage panel, the Backdrops tab, and the four ways to add a backdrop: library, paint, surprise, upload. Backdrops are the Stage's costumes — they change the scene without changing the script. The cat sits on top, the backdrop sits behind.

Backdrop

A picture that fills the Stage and sits behind every sprite. The Stage's version of a costume.

Stage panel

The card in the bottom-right corner of the editor that shows the current backdrop and the backdrop count.

Backdrop library

The pop-up window of ready-made scenes (forest, beach, city, theatre, and more) that opens when you click "Choose a Backdrop".

Surprise

The magic-wand button that picks a random backdrop from the library.

Homework 1 min

Backdrop scrapbook. Open Scratch. Add four backdrops to your project — one from each method (library, surprise, upload, paint). Don't worry about code today; this is a tour of the Stage's wardrobe.

1. Add Backdrop #1 from the library — search Beach or Forest.
2. Add Backdrop #2 with the Surprise button.
3. Add Backdrop #3 from your computer — any picture you have (a family photo, a drawing, a screenshot).
4. Add Backdrop #4 by painting one yourself. Use three coloured rectangles. Name it after a Malaysian place (e.g. jalan bukit bintang).

Bring back next class:

• A screenshot of your Backdrops list showing all four backdrops.
• Your written answer: "Which method felt easiest? Which felt hardest? Why?"

Heads up for next class: SCR-L01-31 introduces the switch backdrop to [backdrop1 v] block — your first way to flip scenes from inside a script.