Sprite Costume Library — Scratch L2

Where this arc is heading: a posed kampung open-house with the cast in festive costumes. This lesson dresses each sprite by switching to a chosen costume on the flag.

Learning Goals 3 min

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

Open the Costumes tab at the top-left of the editor and explain that every sprite carries a list of costumes, not just one picture.
Use the costume picker in the bottom-left of the Costumes tab to import from the library, paint, upload, or take photo — and rename each new costume to something meaningful like leg-up.
Switch costumes in two ways: switch costume to [leg-up v] (jump straight to a named costume) and next costume (cycle forward, wrapping back to the first at the end).

Warm-Up — meet the cat's second face 7 min

You've been staring at the same cat since Level 1. Did you know it actually has two faces?

Open Scratch. Click the cat in the Sprite list to make sure it's selected. Now look at the very top of the editor — you'll see three tabs side by side: Code, Costumes, Sounds. You've lived in Code your whole Scratch life. Today click Costumes.

The middle of the editor changes. Down the left side you'll see two little cat thumbnails — labelled costume1 and costume2. The cat has had two costumes the whole time. Click each thumbnail to see them side by side.

What's actually different between the two cat costumes?

They're the same cat in two walking poses: costume1 has the front-left leg forward, costume2 has the back-left leg forward. Flip between them quickly (just click-click-click the thumbnails) and you can see the cat walk in place. That's the trick behind every animated character in Scratch — two or three poses, switched quickly, looks alive.

Click back to the Code tab. Now you know what next costume has been doing all along — it's been flipping between those two cat poses. Today we learn to control which costume, when, and how — and to add our own.

New Concept — the Costumes tab and the costume list 15 min

Every sprite in Scratch carries a list of costumes. A costume is just a picture. The sprite displays one of them on the Stage at any moment — whichever one is currently selected — and your scripts can switch which one is showing.

Anatomy of the Costumes tab

With any sprite selected, click Costumes at the top-left of the editor. You'll see:

Costume list down the left — one thumbnail per costume, numbered 1, 2, 3... and labelled with the costume's name (costume1 by default).
Costume picker at the bottom-left — a row of four small buttons for adding a new costume: cat-with-magnifier (library), paintbrush (paint your own), upload arrow (load from file), camera (take photo).
Drawing canvas in the middle — shows the currently selected costume. You can edit it here (vector tools on the right) but for now we'll only use the picker.

Adding a new costume — four ways

The four costume-picker buttons each give you a new costume:

Cat-with-magnifier opens the Costume library — hundreds of pre-drawn images: animals, food, balls, people, fantasy. Pick one and it lands at the bottom of the costume list.
Paintbrush opens a new blank costume in the drawing canvas. Use the vector tools to draw your own.
Upload opens a file picker — load a PNG or SVG from your computer.
Camera uses your webcam (if your browser allows it) to snap a photo.

Naming costumes well

Every new costume gets a name like costume3, costume4... which tells you nothing. Click the name field at the top of the drawing canvas (above the picture) and rename it. Good costume names describe the pose or moment, not the order:

For a walking cat: leg-up and leg-down (not costume1/costume2).
For a face that changes expression: happy, sad, surprised.
For a goalie diving: standing, diving-left, diving-right.

Switching costumes from scripts — two blocks

The Looks palette gives you two ways to change costumes:


switch costume to [leg-up v]

Jump straight to a named costume. The dropdown lists every costume on this sprite, by name.


next costume

Step forward by one. Position 1 → 2 → 3 → 4 → wraps back to 1 at the end.

Use switch costume to [ v] when you know which pose you want (jump to diving-left when the ball flies left). Use next costume inside a loop when you want a continuous animation (a cat that walks).

Reading which costume is showing

The Looks palette also has a round reporter:


say (costume [name v]) for (2) seconds

The costume [name v] reporter has a dropdown — number or name. Use name when your costumes are properly named; number when you only care about the position.

Drop costume [name v] into a say block and the sprite tells you which costume is currently on screen. Handy for debugging when an animation looks wrong.

Worked Example — dress guest Aisyah for the open house 12 min

Open your Kampung-Stage-Scene project. We give guest Aisyah two named costumes — a plain pose and a festive baju raya pose — then switch her to the festive one on the flag. Seven steps.

Stage plan. You dress guest Aisyah this lesson (see the ✏️ badge): add a festive costume, name it, and switch her into it on the flag.

Step 1 — Open the arc project and select Aisyah

Open Kampung-Stage-Scene. Click Aisyah in the Sprite list, then click the Costumes tab at the top. You see her one default costume in the costume list.

Step 2 — Rename the first costume

Click her costume in the list. Above the drawing canvas, click the name field and change it to plain, hit Enter.

Step 3 — Add a festive costume from the library

Click the cat-with-magnifier button at the bottom-left of the costume list. The Costume library opens. Pick a different pose for Aisyah (any dressed-up person costume works). It lands in the list as costume2.

Step 4 — Rename it

Rename costume2 to baju-raya. Her costume list now reads: plain, baju-raya.

Step 5 — Switch to the Code tab

Click Code at the top. The drawing canvas is replaced by your familiar Script Area.

Step 6 — Dress her on the flag

Find Aisyah's reset-on-flag script from last lesson. Snap one block on the end:

Looks: switch costume to [baju-raya v] — so every flag click shows her festive look, never whatever was last on screen.

Step 7 — Click the green flag

Aisyah snaps to her spot from L02-03 and now appears in her baju-raya costume. Drag her costume in the editor to plain — click the flag — she dresses up again. The script always wins.

The full assembled stack


when flag clicked
go to x: (60) y: (-60)
set size to (80) %
switch costume to [baju-raya v]
say [Selamat Hari Raya!] for (2) seconds

Five blocks on guest Aisyah. She arranges herself, dresses up, then greets — a fully staged cast member.

What you just built: a guest who arranges and dresses herself on the flag. switch costume to [ v] jumps to a named pose — that is how you dress each cast member. next costume instead cycles poses, the heart of every walking animation you meet in L02-26 and L02-27.

Try It Yourself — three costume drills 15 min

🟢 Easy

Goal: Take the default cat. Open the Costumes tab. Rename the two existing costumes to open and closed. Write a script that, on the flag, switches to open, waits one second, switches to closed, waits one second, then loops forever.


when flag clicked
forever
  switch costume to [open v]
  wait (1) seconds
  switch costume to [closed v]
  wait (1) seconds
end

Notice we use switch costume to [ v] by name, not next costume. We want a deliberate blink, not a cycle.

Think: This is the same shape as the warmup, but with a one-second wait — slow enough to look like a blink rather than a buzz. The cat is now staring and blinking at you. Tiny detail, huge feeling-of-aliveness.

🟡 Medium

Goal: Add a basketball sprite from the library. It comes with 5 costumes — different positions of the bouncing ball. Rename them frame-1 through frame-5. Write a flag script that cycles all five with a short wait, so the ball appears to roll in place.


when flag clicked
switch costume to [frame-1 v]
forever
  next costume
  wait (0.1) seconds
end

On the basketball. With 5 costumes and a 0.1 second wait, the ball loops once every half-second — a smooth spin.

Think: The same five-block pattern works with two costumes (blink), four costumes (walk), or twenty costumes (anything). The number of frames is up to you. The animation loop block-shape never changes.

🔴 Stretch

Goal: Aljay is making a quiz-show buzzer. Add the Button sprite (from the library). It has two costumes — pressed and unpressed. Rename them up and down. Write a script: on the flag, costume is up. When the space key is pressed, switch to down for 0.3 seconds then back to up. Use when [space v] key pressed as a second hat — no forever loop needed.


when flag clicked
switch costume to [up v]

Reset on flag. One script, two blocks.


when [space v] key pressed
switch costume to [down v]
wait (0.3) seconds
switch costume to [up v]

Separate script, separate hat. Press space — button visibly clicks for 0.3s. The same sprite has two scripts running independently.

Think: This is the first time you've seen a sprite use two hat blocks for two different events on the same sprite. The flag-hat resets the look; the space-key-hat handles the press. They never run at the same instant — they answer different questions.

Mini-Challenge — Aisyah's blurry cat 5 min

"Why is my cat just a blur?"

Aisyah is animating a four-frame walking cat. She renames the costumes walk-1, walk-2, walk-3, walk-4 and writes:


when flag clicked
forever
  next costume
end

Aisyah's stack. Three blocks.

She clicks the flag. The cat turns into a fuzzy, flickering blob — the costumes are flipping too fast to see. What did Aisyah forget?

Reveal the fix

Aisyah forgot the wait. With no wait inside the forever, Scratch runs the loop dozens of times per second — way faster than your eye can see a costume change. The fix is one block:


when flag clicked
forever
  next costume
  wait (0.15) seconds
end

Now the cat steps about 6 times per second — a natural walking pace. Animation has two ingredients: the costumes, and the timing. Forget the timing and you get a blur. Slow it too much and you get a slideshow. 0.1–0.2 seconds per frame is the sweet spot for most walks.

Recap 3 min

Every sprite carries a list of costumes, not just one picture. You manage them in the Costumes tab at the top of the editor — costume list down the left, drawing canvas in the middle, costume picker (library/paint/upload/camera) at the bottom-left. New costumes get default names like costume3 which tell you nothing; rename them to describe the pose (leg-up, diving-left, down) and every future dropdown becomes readable. Two blocks switch costumes from scripts: switch costume to [ v] jumps to a named costume, next costume steps forward and wraps to the start at the end. The classic animation loop — switch to frame 1, then forever: next costume, wait — is the heart of every walking sprite in Scratch and will reappear unchanged in L02-26 and L02-27.

Costume: One picture in a sprite's list of pictures. A sprite displays one costume at a time on the Stage; scripts switch which one.
Costumes tab: The middle tab at the top of the editor (between Code and Sounds). Shows the costume list, the costume picker, and a drawing canvas for the selected costume.
Costume picker: The row of four buttons (library / paint / upload / camera) at the bottom-left of the Costumes tab. Each button adds a new costume to the list.
Costume name: The text label of a costume — editable above the drawing canvas. Good names describe the pose (leg-up), not the order (costume3).
next costume: Step forward one costume in the list, wrapping back to the first after the last. Pair with wait inside a forever loop for an animation.
switch costume to [ v]: Jump directly to a costume by name. Use when you know which specific pose you want, not for continuous animation.

Homework 2 min

The Walking Cat & Bouncing Ball Project. Two sprites, two animations, one project.

Start a new Scratch project. Keep the cat. Rename its two costumes to step-1 and step-2.
On the cat: build a flag script that walks forward forever (move (5) steps) AND animates between step-1 and step-2 with a 0.15-second wait — so the cat looks like it's properly walking, not gliding. Use next costume + wait inside the same forever as the move.
Add the Basketball sprite from the library. Position it at x: 0, y: -130. Rename its 5 costumes to frame-1 through frame-5.
On the basketball: a flag script that does switch costume to [frame-1 v], then forever: next costume + wait (0.1) seconds. The ball will spin in place.

Save as HW-L2-04-Walk-And-Bounce.sb3. Click the flag — cat walks across the Stage with proper leg movement, ball spins in place. Two synchronised animations from two sprites, fired by one flag click.

Bring back next class:

The .sb3 file.
Your answer to: "If you change the cat's wait from 0.15 to 0.5 seconds, what does the cat look like? And to 0.02? Try both and describe."

Heads up for next class: SCR-L02-05 introduces layers and display order — when two sprites overlap on the Stage, which one appears in front? You'll meet go to [front v] layer and go [forward v] (1) layers, and learn to use them so the cat walks in front of the bouncing basketball instead of behind it.