Graphic Effects — Scratch L2 · Advaslearning Hub

This lesson's piece of the showcase: a glowing, colour-shifting shimmer wraps the walking cat. Next lesson it learns to breathe with a size pulse.

Learning Goals 3 min

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

Name the seven graphic effects in the Looks palette — color, fisheye, whirl, pixelate, mosaic, brightness, and ghost — and roughly describe what each one does to a sprite.
Tell the difference between change [color v] effect by (25) and set [color v] effect to (50), and use the right one for "keep nudging" vs "snap to a value".
Reset a sprite back to normal with clear graphic effects, and explain why every project that uses effects also needs to clear them at the start.

Warm-Up — what do you think this does? 7 min

Open the Looks palette in your head. You'll see a block called change [color v] effect by (25). Below it, another called set [color v] effect to (0). Without touching Scratch, predict what each of these tiny scripts does to the cat.

Puzzle 1 — the rainbow cat


when flag clicked
forever
  change [color v] effect by (25)
end

Aisyah built this and ran it. The cat does something strange.

Reveal the answer

The cat cycles through every colour very quickly — orange, yellow, green, blue, purple, back to orange. The forever loop runs many times a second, and each time adds 25 to the colour effect. Scratch wraps the colour value around after 200, so the cat becomes a rainbow strobe-light. Cool for two seconds. Headache for ten.

Puzzle 2 — the disappearing cat


when flag clicked
set [ghost v] effect to (50)

Daniel built this. Click the flag — what happens to the cat?

Reveal the answer

The cat becomes half-transparent. You can see the Stage through the cat. Ghost is the see-through effect — 0 means fully solid, 100 means completely invisible, 50 is exactly halfway. This is how you make fading, fog, or "this sprite is a hint" overlays.

Today's lesson is the whole family of these blocks. There are seven of them. They are some of the easiest ways to make a Scratch project look polished — and the easiest way to make one look like a mess. We'll learn both.

New Concept — seven effects, three blocks 15 min

Every sprite in Scratch has seven invisible dials attached to it. Each dial is one graphic effect. The dials all start at 0 — meaning "normal, no effect". You can twist any dial up or down with blocks from the Looks palette, and the sprite changes how it looks on screen.

The seven effects

Each effect lives behind a dropdown. Click the little arrow next to the word color in any effect block to see them all:

color — shifts the hue. 25 = a bit pinker. 100 = totally different colour. Wraps around at 200.
fisheye — bulges the middle of the sprite outward, like looking through a peephole. Negative numbers pinch inward.
whirl — twists the sprite like a pinwheel. Positive twists one way, negative twists the other.
pixelate — makes the sprite blocky, like an 8-bit game. Higher = bigger pixels.
mosaic — splits the sprite into many tiny copies of itself in a grid.
brightness — washes the sprite toward white (positive) or black (negative). 100 = pure white, −100 = pure black.
ghost — see-through-ness. 0 = solid, 100 = invisible.

Three blocks, two verbs

You only need to learn three blocks to use all seven effects. They're all in the Looks palette:


change [color v] effect by (25)
set [color v] effect to (0)
clear graphic effects

The whole family. Change nudges, set snaps, clear resets everything.

change [color v] effect by (25) — adds 25 to the current value of whichever effect the dropdown shows. Each click adds another 25. Great inside loops where you want a smooth slide.
set [color v] effect to (50) — jumps the dial straight to 50, no matter where it was. Great for "make the sprite half-transparent" in one shot.
clear graphic effects — sets all seven dials back to 0. Use this at the top of every project that touches effects, otherwise yesterday's whirl is still there today.

The Stage has these too

The Stage (the backdrop) has the exact same seven effects. Click the Stage instead of a sprite, open Looks, and there they are. Setting set [brightness v] effect to (-30) on the Stage is one of the fastest ways to make a "nighttime" version of a scene without drawing a new backdrop.

Less is more

This is the part most kids skip. Effects are tempting because they're instant and dramatic. A whirl looks so cool. So you add a whirl. And a fisheye. And cycle the colour. And ramp up the mosaic. After five minutes your project looks like a kaleidoscope explosion and nobody can tell what's a sprite anymore. Pick one effect, use it for one purpose, then stop. A whole pulsing ghost on the boss when it takes damage is memorable. The same ghost on every sprite all the time is just visual noise.

Common mistakes

Forgetting to clear at the start. You crank the ghost to 80 testing something, save the project, come back tomorrow, and your sprite is invisible. Always put clear graphic effects under when ⚑ clicked.
Using change when you wanted set. If you want the cat to be exactly 50% transparent on flag click, use set [ghost v] effect to (50). Using change by 50 stacks up — click twice and the cat is fully invisible.
Using set inside a forever loop. set [color v] effect to (50) inside a forever just keeps re-setting to 50 — nothing changes. For animation you almost always want change.
Confusing brightness with the colour effect. Brightness makes things lighter or darker (toward white or black). Colour shifts the hue. They're different dials.
Cranking the value into outer space. Most effects cap or wrap. Setting fisheye to 5000 doesn't make it five thousand times more bulgy — it usually just renders the same as 100.

Worked Example — the cat that fades when you hold space 12 min

We'll build a project where the cat slowly fades to invisible while you hold the space bar, and snaps back when you let go. Eight steps.

Stage plan. The cat (the ✏️ sprite) stays centre-stage; holding space fades it toward invisible with the ghost effect, letting go snaps it back.

Step 1 — Start fresh

New Scratch project. Default cat in the middle of the Stage. Open the Looks palette so you can see all three effect blocks.

Step 2 — Add the safety reset

From Events: when ⚑ clicked. Underneath, from Looks: clear graphic effects. This guarantees that no matter what you were testing five minutes ago, the cat starts fully visible.

Step 3 — Start a second script for the fade

Drag a fresh when ⚑ clicked onto an empty spot in the Scripts area. Yes, a sprite can have two hats with the same event — they both run in parallel when you click the flag.

Step 4 — The forever loop

From Control: forever. Snap it under the new hat.

Step 5 — Ask "is space pressed?"

From Control: if <> then (last week's lesson!). Drop it inside the forever. From Sensing: key [space v] pressed? into the diamond.

Step 6 — Nudge the ghost up

Inside the if-then, from Looks: change [ghost v] effect by (5). Each frame that space is held, ghost climbs by 5.

Step 7 — Add the snap-back

Below the if-then but still inside the forever, add another if <> then. Diamond: from Operators, <not > wrapping key [space v] pressed?. Body: set [ghost v] effect to (0).

Step 8 — Pace it

The forever runs maybe 30 times per second, which means ghost would hit 100 in well under a second — too fast. Add wait (0.05) seconds at the bottom of the forever to slow the fade into something the eye can follow.

The full assembled stack


when flag clicked
clear graphic effects

The reset script. Three blocks (counting the hat). Runs once at flag click.


when flag clicked
forever
  if <key [space v] pressed?> then
    change [ghost v] effect by (5)
  end
  if <not <key [space v] pressed?>> then
    set [ghost v] effect to (0)
  end
  wait (0.05) seconds
end

The fade script. Hold space — cat fades out. Let go — cat snaps back. Ten blocks.

What you just built: a sprite that responds to input by changing how it looks, not where it is. That's the whole point of the effect family — visual feedback. Every time a player presses a button and the screen briefly flashes white, somewhere underneath, a brightness effect just got nudged.

Try It Yourself — three effect drills 15 min

🟢 Easy

Goal: When the cat is clicked, it becomes 70% transparent. When the flag is clicked, it goes back to fully solid. Use when this sprite clicked.


when flag clicked
clear graphic effects

when this sprite clicked
set [ghost v] effect to (70)

Two tiny scripts on one sprite. set is the right verb here — one click, one jump to 70.

Think: Why use set here instead of change? Because you want ghost to be exactly 70 after one click, not 70 more than it was before.

🟡 Medium

Goal: Make the cat pixelate over two seconds when the flag is clicked — starting sharp, ending very blocky — then clear the effect so it's sharp again. Use a repeat (40) + change [pixelate v] effect by (1).


when flag clicked
clear graphic effects
repeat (40)
  change [pixelate v] effect by (1)
  wait (0.05) seconds
end
wait (1) seconds
clear graphic effects

Pixelate climbs from 0 to 40 over 2 seconds, holds for a second, then snaps back.

Think: 40 repeats × 0.05 seconds = 2 seconds of slow pixelation. If you wanted it to happen in 1 second, halve the wait — same number of nudges, just twice as fast.

🔴 Stretch

Goal: Build a "boss takes damage" flash. When the space key is pressed, the cat briefly turns red-ish and bright, then snaps back to normal — all in about 0.3 seconds. Combine set [brightness v] effect to (50) and set [color v] effect to (100).


when flag clicked
clear graphic effects
forever
  if <key [space v] pressed?> then
    set [brightness v] effect to (50)
    set [color v] effect to (100)
    wait (0.3) seconds
    clear graphic effects
  end
end

The hit-flash pattern used in basically every action game ever made.

Think: If you hold space, the flash repeats over and over — which is also fine for a damage-while-touching effect. Priya's variant uses touching [Sword v]? in the diamond instead, so the cat flashes only while a sword sprite is overlapping it.

Mini-Challenge — the cat that won't come back 5 min

"Aljay's vanishing trick"

Aljay wants the cat to fade out smoothly when the flag is clicked, then fade back in. He writes this:


when flag clicked
repeat (20)
  change [ghost v] effect by (5)
  wait (0.05) seconds
end
repeat (20)
  change [ghost v] effect by (5)
  wait (0.05) seconds
end

Aljay's stack. The cat fades out fine, but it never comes back.

The first repeat (20) takes ghost from 0 to 100 — cat fully invisible. The second repeat is meant to bring it back, but it doesn't. Why? And what's the fix?

Reveal one valid solution

The second repeat also uses change [ghost v] effect by (5) — a positive 5. So it keeps pushing ghost even more invisible (Scratch caps it at 100, so visually nothing happens). To fade in, you have to nudge ghost down:


when flag clicked
clear graphic effects
repeat (20)
  change [ghost v] effect by (5)
  wait (0.05) seconds
end
repeat (20)
  change [ghost v] effect by (-5)
  wait (0.05) seconds
end

Negative 5 takes ghost from 100 back down to 0. Plus we added clear graphic effects at the top so each click starts from solid. Direction matters in graphic effects: positive and negative are different things.

🚀 Mission — Wrap the Showcase Cat in a Shimmer

Open Costume Showcase — your walking KL cat. Give it a gentle magical glow that lives alongside the walk, without breaking it.

On the cat, add a second when ⚑ clicked script that starts with clear graphic effects.
In a forever, slowly change [color v] effect by (5) with a wait (0.1) seconds — a slow colour shimmer as it walks.
Keep it tasteful: one effect only (remember "restraint"). The walk loop from last lesson keeps running in parallel.

✅ Done when: the cat walks across KL and slowly shifts colour, and a fresh flag click always starts it solid and orange. Save over Costume Showcase. Going further: swap the colour shimmer for a slow change [ghost v] effect by () that fades in and out, so the cat looks like it is phasing through the scene.

Recap 3 min

You met the whole graphic effect family. Each sprite (and the Stage) has seven dials — color, fisheye, whirl, pixelate, mosaic, brightness, ghost — each one a number that starts at 0. Three blocks twist them: change [color v] effect by () nudges, set [color v] effect to () jumps to an exact value, and clear graphic effects resets every dial to 0. The skill isn't using the blocks — it's choosing which effect, how much, and most importantly when to stop. Restraint is the whole game.

Graphic effect: One of seven number-valued visual filters Scratch applies to a sprite: color, fisheye, whirl, pixelate, mosaic, brightness, ghost. Each one starts at 0.
change vs. set: Change adds (or subtracts) from the current value. Set jumps to an exact value. Use change for animation, set for one-shot states.
Ghost effect: The transparency dial. 0 = fully solid, 100 = fully invisible, 50 = half see-through. The most-used effect by far, because fading in and out is everywhere in games.
Clear graphic effects: The reset block. Sets all seven dials back to 0 in one go. Belongs at the top of every project that touches effects.
Restraint: Not a Scratch block. The choice to use one effect for one purpose instead of cranking all seven at once. The single biggest difference between a polished project and visual chaos.

Homework 2 min

The Effect Sampler. Build a project with one sprite (the cat is fine) and the following:

At flag click, clear graphic effects.
Add seven keys, one per effect. Press 1 to set color to 100, press 2 to set fisheye to 100, press 3 for whirl, 4 for pixelate, 5 for mosaic, 6 for brightness to 50, 7 for ghost to 50. Use when [1 v] key pressed for each.
Press 0 to clear all effects. Use when [0 v] key pressed + clear graphic effects.

Save as HW-L2-28-Effect-Sampler.sb3. Hit the flag, then mash all seven number keys one at a time and look carefully at what each one does to the cat. Press 0 between each to reset.

Bring back next class:

The .sb3 file.
Your answer to: "Which of the seven effects do you think you'd actually use in a game? Which ones look cool for ten seconds and then get annoying? Pick one of each and write one sentence about why."

Heads up for next class: SCR-L02-29 meets change size by () — not technically a graphic effect, but it lives one shelf away in Looks and uses the exact same change-vs-set logic. We'll use it to make sprites breathe.

This lesson's piece of the showcase: a glowing, colour-shifting shimmer wraps the walking cat. Next lesson it learns to breathe with a size pulse.

Learning Goals 3 min

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

Name the seven graphic effects in the Looks palette — color, fisheye, whirl, pixelate, mosaic, brightness, and ghost — and roughly describe what each one does to a sprite.
Tell the difference between change [color v] effect by (25) and set [color v] effect to (50), and use the right one for "keep nudging" vs "snap to a value".
Reset a sprite back to normal with clear graphic effects, and explain why every project that uses effects also needs to clear them at the start.

Warm-Up — what do you think this does? 7 min

Puzzle 1 — the rainbow cat


when flag clicked
forever
  change [color v] effect by (25)
end

Aisyah built this and ran it. The cat does something strange.

Reveal the answer

Puzzle 2 — the disappearing cat


when flag clicked
set [ghost v] effect to (50)

Daniel built this. Click the flag — what happens to the cat?

Reveal the answer

New Concept — seven effects, three blocks 15 min

The seven effects

Each effect lives behind a dropdown. Click the little arrow next to the word color in any effect block to see them all:

color — shifts the hue. 25 = a bit pinker. 100 = totally different colour. Wraps around at 200.
fisheye — bulges the middle of the sprite outward, like looking through a peephole. Negative numbers pinch inward.
whirl — twists the sprite like a pinwheel. Positive twists one way, negative twists the other.
pixelate — makes the sprite blocky, like an 8-bit game. Higher = bigger pixels.
mosaic — splits the sprite into many tiny copies of itself in a grid.
brightness — washes the sprite toward white (positive) or black (negative). 100 = pure white, −100 = pure black.
ghost — see-through-ness. 0 = solid, 100 = invisible.

Three blocks, two verbs

You only need to learn three blocks to use all seven effects. They're all in the Looks palette:


change [color v] effect by (25)
set [color v] effect to (0)
clear graphic effects

The whole family. Change nudges, set snaps, clear resets everything.

change [color v] effect by (25) — adds 25 to the current value of whichever effect the dropdown shows. Each click adds another 25. Great inside loops where you want a smooth slide.
set [color v] effect to (50) — jumps the dial straight to 50, no matter where it was. Great for "make the sprite half-transparent" in one shot.
clear graphic effects — sets all seven dials back to 0. Use this at the top of every project that touches effects, otherwise yesterday's whirl is still there today.

The Stage has these too

Less is more

Common mistakes

Forgetting to clear at the start. You crank the ghost to 80 testing something, save the project, come back tomorrow, and your sprite is invisible. Always put clear graphic effects under when ⚑ clicked.
Using change when you wanted set. If you want the cat to be exactly 50% transparent on flag click, use set [ghost v] effect to (50). Using change by 50 stacks up — click twice and the cat is fully invisible.
Using set inside a forever loop. set [color v] effect to (50) inside a forever just keeps re-setting to 50 — nothing changes. For animation you almost always want change.
Confusing brightness with the colour effect. Brightness makes things lighter or darker (toward white or black). Colour shifts the hue. They're different dials.
Cranking the value into outer space. Most effects cap or wrap. Setting fisheye to 5000 doesn't make it five thousand times more bulgy — it usually just renders the same as 100.

Worked Example — the cat that fades when you hold space 12 min

We'll build a project where the cat slowly fades to invisible while you hold the space bar, and snaps back when you let go. Eight steps.

Stage plan. The cat (the ✏️ sprite) stays centre-stage; holding space fades it toward invisible with the ghost effect, letting go snaps it back.

Step 1 — Start fresh

New Scratch project. Default cat in the middle of the Stage. Open the Looks palette so you can see all three effect blocks.

Step 2 — Add the safety reset

From Events: when ⚑ clicked. Underneath, from Looks: clear graphic effects. This guarantees that no matter what you were testing five minutes ago, the cat starts fully visible.

Step 3 — Start a second script for the fade

Drag a fresh when ⚑ clicked onto an empty spot in the Scripts area. Yes, a sprite can have two hats with the same event — they both run in parallel when you click the flag.

Step 4 — The forever loop

From Control: forever. Snap it under the new hat.

Step 5 — Ask "is space pressed?"

From Control: if <> then (last week's lesson!). Drop it inside the forever. From Sensing: key [space v] pressed? into the diamond.

Step 6 — Nudge the ghost up

Inside the if-then, from Looks: change [ghost v] effect by (5). Each frame that space is held, ghost climbs by 5.

Step 7 — Add the snap-back

Below the if-then but still inside the forever, add another if <> then. Diamond: from Operators, <not > wrapping key [space v] pressed?. Body: set [ghost v] effect to (0).

Step 8 — Pace it

The full assembled stack


when flag clicked
clear graphic effects

The reset script. Three blocks (counting the hat). Runs once at flag click.


when flag clicked
forever
  if <key [space v] pressed?> then
    change [ghost v] effect by (5)
  end
  if <not <key [space v] pressed?>> then
    set [ghost v] effect to (0)
  end
  wait (0.05) seconds
end

The fade script. Hold space — cat fades out. Let go — cat snaps back. Ten blocks.

Try It Yourself — three effect drills 15 min

🟢 Easy

Goal: When the cat is clicked, it becomes 70% transparent. When the flag is clicked, it goes back to fully solid. Use when this sprite clicked.


when flag clicked
clear graphic effects

when this sprite clicked
set [ghost v] effect to (70)

Two tiny scripts on one sprite. set is the right verb here — one click, one jump to 70.

Think: Why use set here instead of change? Because you want ghost to be exactly 70 after one click, not 70 more than it was before.

🟡 Medium


when flag clicked
clear graphic effects
repeat (40)
  change [pixelate v] effect by (1)
  wait (0.05) seconds
end
wait (1) seconds
clear graphic effects

Pixelate climbs from 0 to 40 over 2 seconds, holds for a second, then snaps back.

Think: 40 repeats × 0.05 seconds = 2 seconds of slow pixelation. If you wanted it to happen in 1 second, halve the wait — same number of nudges, just twice as fast.

🔴 Stretch


when flag clicked
clear graphic effects
forever
  if <key [space v] pressed?> then
    set [brightness v] effect to (50)
    set [color v] effect to (100)
    wait (0.3) seconds
    clear graphic effects
  end
end

The hit-flash pattern used in basically every action game ever made.

Mini-Challenge — the cat that won't come back 5 min

"Aljay's vanishing trick"

Aljay wants the cat to fade out smoothly when the flag is clicked, then fade back in. He writes this:


when flag clicked
repeat (20)
  change [ghost v] effect by (5)
  wait (0.05) seconds
end
repeat (20)
  change [ghost v] effect by (5)
  wait (0.05) seconds
end

Aljay's stack. The cat fades out fine, but it never comes back.

The first repeat (20) takes ghost from 0 to 100 — cat fully invisible. The second repeat is meant to bring it back, but it doesn't. Why? And what's the fix?

Reveal one valid solution


when flag clicked
clear graphic effects
repeat (20)
  change [ghost v] effect by (5)
  wait (0.05) seconds
end
repeat (20)
  change [ghost v] effect by (-5)
  wait (0.05) seconds
end

🚀 Mission — Wrap the Showcase Cat in a Shimmer

Open Costume Showcase — your walking KL cat. Give it a gentle magical glow that lives alongside the walk, without breaking it.

On the cat, add a second when ⚑ clicked script that starts with clear graphic effects.
In a forever, slowly change [color v] effect by (5) with a wait (0.1) seconds — a slow colour shimmer as it walks.
Keep it tasteful: one effect only (remember "restraint"). The walk loop from last lesson keeps running in parallel.

Recap 3 min

Graphic effect: One of seven number-valued visual filters Scratch applies to a sprite: color, fisheye, whirl, pixelate, mosaic, brightness, ghost. Each one starts at 0.
change vs. set: Change adds (or subtracts) from the current value. Set jumps to an exact value. Use change for animation, set for one-shot states.
Ghost effect: The transparency dial. 0 = fully solid, 100 = fully invisible, 50 = half see-through. The most-used effect by far, because fading in and out is everywhere in games.
Clear graphic effects: The reset block. Sets all seven dials back to 0 in one go. Belongs at the top of every project that touches effects.
Restraint: Not a Scratch block. The choice to use one effect for one purpose instead of cranking all seven at once. The single biggest difference between a polished project and visual chaos.

Homework 2 min

The Effect Sampler. Build a project with one sprite (the cat is fine) and the following:

At flag click, clear graphic effects.
Add seven keys, one per effect. Press 1 to set color to 100, press 2 to set fisheye to 100, press 3 for whirl, 4 for pixelate, 5 for mosaic, 6 for brightness to 50, 7 for ghost to 50. Use when [1 v] key pressed for each.
Press 0 to clear all effects. Use when [0 v] key pressed + clear graphic effects.

Save as HW-L2-28-Effect-Sampler.sb3. Hit the flag, then mash all seven number keys one at a time and look carefully at what each one does to the cat. Press 0 between each to reset.

Bring back next class:

The .sb3 file.
Your answer to: "Which of the seven effects do you think you'd actually use in a game? Which ones look cool for ten seconds and then get annoying? Pick one of each and write one sentence about why."