Camera Pans With Backdrops — Scratch L4

Where we are now: puppets built ✔, lip-sync ✔. Today the world moves — a wide pan-sprite slides behind the stationary auntie so the camera appears to pan through the pasar malam.

Learning Goals 3 min

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

Explain why the Stage's backdrop can't move on its own — and how to fake a camera pan by putting a wide image on a pan-sprite at the back layer and sliding it left instead.
Paint or import a backdrop image that is wider than the Stage (480 pixels wide is normal — for a pan, you want 720 or more) and load it onto a sprite using go to (back v) layer so puppet sprites draw on top.
Pan the wide image across the Stage two ways — slowly with repeat (240) + change x by (-1) for fine control, or smoothly with a single glide (5) secs to x: (-480) y: (0) — and pick the right tool for the scene.

Warm-Up — why the Stage refuses to move 7 min

You've used backdrops since Level 1. They're the picture behind everything else — beach, forest, pasar malam. They're a special kind of canvas attached to the Stage itself. And here is the inconvenient truth: the Stage's backdrop has no change x by block.

The Stage doesn't move. It can swap backdrops (which we used heavily in cluster D), and it can fade them, but it can't slide one across. So how do movies pan? How does a side-scrolling game scroll? They cheat.

Predict puzzle. A student loads a pasar-malam picture into the Stage backdrop and writes this script on the Stage:


when flag clicked
forever
  change x by (-1)
  wait (0.02) seconds
end

An attempt to scroll the Stage backdrop. Hit the flag.

What happens?

Reveal the answer

Scratch refuses to even let you drop this script on the Stage — the change x by block doesn't appear in the Stage's Motion palette at all. The Stage has no x-coordinate. It is the world; it doesn't move in the world. You can change which backdrop is showing, but you cannot slide the showing backdrop sideways.

The trick: don't use the Stage backdrop for the moving image. Use a sprite instead. Make a sprite, paint your pasar-malam image as that sprite's costume, push it to the back layer with go to (back v) layer, and now you can change x by all you want. The Stage backdrop becomes a backup colour (sky blue, plain) and the "scrolling backdrop" is actually a sprite pretending to be the scenery.

New Concept — the pan-sprite 15 min

Today's mental flip: the world isn't a backdrop, it's a sprite. We'll call it the pan-sprite. It looks like scenery, sits at the back layer, and slides while every other sprite stays still.

How wide should the pan-sprite's costume be?

The Stage is 480 pixels wide. If your pan-sprite's costume is also 480 wide, you can't pan it — the moment it slides 1 pixel left, the right edge appears as a gap. To pan, the costume must be wider than the Stage. A simple rule:

Short pan (a quick reveal): costume 720 pixels wide. The pan-sprite slides 240 pixels total (from x: 0 to x: -240).
Medium pan (a walk down a market street): costume 960 wide. Slide 480 pixels (from x: 0 to x: -480).
Long pan (an opening establishing shot): costume 1440 wide. Slide 960 pixels.

You paint the wide costume in Scratch's Paint Editor — pinch-zoom out, drag the canvas edge wider, and fill the extra space with more scenery. Or import a pre-made wide image as the sprite's costume.

Method 1 — the per-pixel slide (precise control)

Use a counted loop to step the pan-sprite one pixel at a time, with a tiny wait between steps so the motion is visible:


when flag clicked
go to (back v) layer
go to x: (0) y: (0)
repeat (240)
  change x by (-1)
  wait (0.02) seconds
end

240 steps × 1 pixel each = a 240-pixel pan. 240 × 0.02s = roughly 4.8 seconds.

The per-pixel method gives you precise control over how far and how fast. Change repeat (240) to repeat (480) for a longer pan. Change wait (0.02) seconds to wait (0.05) seconds for a slower pan. It's also easy to stop the pan early — drop the loop inside a repeat until <> and pan until something else happens.

Method 2 — the glide (smooth and short)

Use a single glide block for a smooth, hands-off pan:


when flag clicked
go to (back v) layer
go to x: (0) y: (0)
glide (5) secs to x: (-480) y: (0)

Slide from x: 0 to x: -480 over 5 seconds, in one block.

The glide method is cleaner code (one block instead of a loop) and produces buttery-smooth motion. The trade-off: you can't easily interrupt it, and you can't change the speed partway through. Use glide for cinematic opening shots; use the per-pixel loop for gameplay scrolls that might react to the player.

Putting the pan-sprite at the back

This is the one detail beginners forget: if the pan-sprite drew on top of the auntie, the scenery would cover her. go to (back v) layer forces the pan-sprite to the very back, so all puppet sprites (body, head, hand) draw over it. Run it once at flag click. It doesn't move the sprite in x or y — just in layer order.

What about the puppet?

The auntie from L04-25/26 doesn't change. She stays at her pinned coordinates. The world moves around her — eye reads it as she's walking through the pasar malam, even though she's standing still and the backdrop is doing the work.

Common mistakes

Trying to script the Stage's backdrop. You can't. The Motion palette is missing on the Stage for a reason. Use a sprite for any image that needs to slide.
Forgetting go to (back v) layer. The pan-sprite draws over the auntie and the scene looks like a curtain being pulled across her face.
Costume the same width as the Stage. The pan reveals an empty Stage edge. The costume must be wider than 480.
Panning the puppet too. If you accidentally script the auntie's body to change x by (-1) along with the pan-sprite, both move together and the illusion breaks — they look glued. Only the pan-sprite slides.
Forgetting to reset x: 0. After one run, the pan-sprite is at x: -240. Hit the flag again with no go to x: (0) y: (0) at the top and the pan starts from -240 and slides offscreen entirely. Always re-pin the start position.

Worked Example — the pasar malam scrolls behind Auntie Siti 15 min

Open your L04-26 lip-sync project (or start fresh). Today we add a fourth sprite — the pan-sprite — that scrolls a market scene behind the auntie while she talks.

Stage plan. The pan-bg sprite (dashed border) is 960 px wide, sits at the back layer, and glides left. The puppet sprites stay at their pinned x-coordinates — the Stage frame creates the illusion of the camera panning right.

Step 1 — Make the pan-sprite

Click Paint to create a new sprite. Rename it pan-bg (pan background).

Step 2 — Widen the canvas

In the Paint Editor, look at the canvas size — by default a new costume is small. Use the Paint Editor's resize handles, or just paint scenery that extends well past the visible Stage area on both sides. Aim for a costume roughly 960 pixels wide × 360 tall. Paint a row of pasar-malam stalls: pisang goreng stall on the left, satay stall in the middle, drinks stall on the right. It doesn't have to be pretty — coloured rectangles with labels are fine for today.

Step 3 — Set the centre point

Click the "Set Costume Centre" crosshair in the Paint Editor. Place the centre point at the middle of your wide image. When the sprite is at x: 0, the middle of the painting sits over the centre of the Stage. When the sprite slides to x: -480, the right half of the painting comes into view.

Step 4 — Push it to the back

On the pan-bg sprite, add:


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

Click the flag. The pan-sprite appears centred, behind all the other sprites. Auntie Siti is in front. Good.

Step 5 — Add a glide pan (the smooth method)

Extend the script:


when flag clicked
go to (back v) layer
go to x: (0) y: (0)
wait (1) seconds
glide (5) secs to x: (-480) y: (0)

One second of stillness so the audience sees the scene, then a 5-second slide to the left.

Click the flag. The market slides leftward. The auntie stays put. Visually, she's walking through the pasar — even though her sprites haven't moved a pixel.

Step 6 — Try the per-pixel version

Delete the glide. Replace with:


when flag clicked
go to (back v) layer
go to x: (0) y: (0)
wait (1) seconds
repeat (480)
  change x by (-1)
  wait (0.02) seconds
end

480 steps × 1 pixel = 480 pixels of pan. 480 × 0.02s = roughly 9.6 seconds (slower than the glide).

Click the flag. The pan is now visibly stepwise (you can see each 1-pixel jump if you squint) and noticeably slower. Useful when you want gameplay-style control.

Step 7 — Combine with the lip-sync from L04-26

Both scripts on the body sprite (the voice + flap controllers from L04-26) still work. They run in parallel with the pan-sprite's slide. The auntie talks while the pasar malam scrolls behind her. Three sprites' worth of animation, all synchronised by the flag click.

The full assembled stack — pan-sprite


when flag clicked
go to (back v) layer
go to x: (0) y: (0)
wait (1) seconds
glide (5) secs to x: (-480) y: (0)

The whole pan in five blocks. The rest of the scene (auntie, lip-sync, voice) is unchanged from L04-26.

What you just built: the cheapest, oldest camera-pan trick in animation. Disney used it in the 1930s on multi-plane cameras. Side-scrollers use it. Every cartoon "establishing shot" you've ever seen uses some flavour of this. A wide image, slid past a stationary frame, and your brain says: the camera is panning.

Try It Yourself — three pan drills 15 min

🟢 Easy

Goal: Pan in the opposite direction. Make the pan-sprite start at x: -240 and glide to x: +240 over 5 seconds. The world should slide rightward, so the auntie appears to walk leftward.


when flag clicked
go to (back v) layer
go to x: (-240) y: (0)
wait (1) seconds
glide (5) secs to x: (240) y: (0)

Think: If the pan slides left, the viewer feels the camera (or the character) moving right. Reverse the slide, and the perceived camera direction reverses too. The brain reads relative motion, not absolute.

🟡 Medium

Goal: Loop the pan forever using the per-pixel method. After the pan-sprite reaches the left end, snap it back to the right and pan again. This is the secret of every endless-runner game.


when flag clicked
go to (back v) layer
forever
  go to x: (240) y: (0)
  repeat (480)
    change x by (-1)
    wait (0.02) seconds
  end
end

Pan from +240 to -240 over and over. The snap-back is invisible if the right and left edges of your costume happen to match.

Think: The snap-back is jarring unless the costume's left and right edges look the same (this is called a "seamless tile"). Endless runners always use seamless costumes. Try drawing one and see.

🔴 Stretch

Goal: Make the pan start when the voice line begins, not at the flag click. Use a broadcast — the L04-26 controller already plays the sound, so add broadcast (start-pan v) just before play sound (line1 v) until done and put the pan-sprite's glide inside a when I receive (start-pan v) hat instead of when ⚑ clicked.


when I receive (start-pan v)
go to (back v) layer
go to x: (0) y: (0)
glide (5) secs to x: (-480) y: (0)

Think: Broadcasts let you decouple when the pan starts from who starts it. Now the controller decides timing for both the voice and the pan — they're locked together. Same pattern as the lip-sync's controller-and-receiver.

Mini-Challenge — the pan that hides the auntie 5 min

"Daniel's curtain pan"

Daniel built a pan-sprite exactly like the example, but when he clicks the flag, the pasar-malam image covers Auntie Siti — she's completely hidden behind the scrolling scenery. The pan animates fine. The auntie is invisible. Here's Daniel's pan-sprite script:


when flag clicked
go to x: (0) y: (0)
wait (1) seconds
glide (5) secs to x: (-480) y: (0)

Daniel's pan-sprite. Motion is fine. So why does the painting cover the puppet?

What's missing, and how does its absence cause the cover-up?

Reveal one valid solution

Daniel forgot go to (back v) layer. Without it, the pan-sprite is wherever it last was in the layer stack — and because Daniel just created the sprite, it's at the front (Scratch puts new sprites on top by default). The pan-sprite's wide pasar-malam costume draws over Auntie Siti, hiding her entirely. The auntie's scripts still run; the audience just can't see her.

The fix is one block at the top of the pan-sprite's script:


when flag clicked
go to (back v) layer
go to x: (0) y: (0)
wait (1) seconds
glide (5) secs to x: (-480) y: (0)

The rule for pan-sprites: back layer first, position second, animation third. Layer order is a kind of position too — it's just position along the z-axis (in front of / behind), and Scratch makes you set it explicitly on every flag click because new sprites and remixed projects love to reorder themselves.

Recap 3 min

You learned that the Stage backdrop can't slide — but a sprite with a wide costume can. The pan-sprite trick is the foundation of every camera move in Scratch: paint a costume wider than the Stage (720, 960, 1440 pixels), put the sprite behind everything with go to (back v) layer, pin it to a starting x with go to x: () y: (), and then either step it with repeat + change x by (-1) + wait (0.02) seconds for precise control, or slide it with one glide () secs to x: () y: () for cinematic smoothness. Combined with the L04-25 cutout puppet and L04-26 lip-sync, you now have a complete fake-camera, fake-talking scene built from three of cluster E's foundational techniques.

Camera pan: In real filmmaking, the camera rotates or slides while the scene stays still. In Scratch, we fake it by sliding the scene while the camera (the Stage frame) stays still. Same visual result.
Pan-sprite: A sprite whose costume is wider than the Stage and whose only job is to slide horizontally. Lives at the back layer so puppet sprites draw over it.
Back layer: The drawing layer behind all other sprites. Set with go to (back v) layer. The Stage backdrop is even further behind, but the pan-sprite at the back is usually as far back as you need.
Wide costume: A sprite costume painted or imported at a width larger than the Stage's 480 pixels — usually 720, 960, or 1440. The extra width is what makes a pan possible.
Seamless tile: A costume whose left and right edges match perfectly, so when you snap the pan-sprite back to its start during a looping pan, the viewer can't see the join. The trick behind endless runners.
glide vs. repeat-change: Two ways to animate motion. glide () secs to x: () y: () is smooth and one block; repeat + change x by () is per-pixel control. Pick smooth for cinematics, per-pixel for gameplay.
Parallax: Bonus vocab. Two pan-sprites at different speeds (one slow for distant mountains, one fast for nearby trees) creates the illusion of depth. Cluster E will return to this idea.

Homework 2 min

The Walking-Auntie Scene. Combine cutout (L04-25), lip-sync (L04-26), and the pan (today) into one finished 10-second scene.

Start with your L04-26 lip-sync auntie project.
Add a new pan-bg sprite. Paint a wide pasar-malam costume — at least 960 pixels wide. Three stalls is plenty.
On the pan-sprite, write a script: when ⚑ clicked → go to (back v) layer → go to x: (0) y: (0) → wait (1) seconds → glide (5) secs to x: (-480) y: (0).
Check that the auntie's body, head, and hand are in front of the pan-sprite. If not, give each of them a go to (front v) layer at flag click.
Save as HW-L4-27-Walking-Auntie.sb3.

Bring back next class:

The .sb3 file.
A screen recording (phone camera at the screen is fine) of the 10-second scene playing.
Your answer to: "Did you use glide or the per-pixel repeat for your pan? Why?"

Heads up for next class: SCR-L04-28 meets the sound effects library — adding non-voice noises (footsteps, doors creaking, ambient pasar-malam chatter) that play alongside the lip-synced voice, so the scene feels alive instead of just animated.