Walking Animation — Scratch L2

This lesson's piece of the showcase: the cat now strolls across the KL Stage, legs swapping in time with its steps, bouncing off the edges. The shimmer and pulse come in the next two lessons.

Learning Goals 3 min

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

Combine move (10) steps with next costume inside one forever loop to build a walk cycle — the legs swap as the body moves.
Use if on edge, bounce so the sprite turns around at the Stage edge instead of getting stuck.
Use set rotation style [left-right v] so the sprite faces the right direction without standing on its head.

Warm-Up — the upside-down cat 7 min

Last lesson, you built the dancing crab — animation in one place. Today we want animation that travels. So let's try the obvious thing: take last lesson's pattern and add a move block.


when flag clicked
forever
  move (10) steps
  next costume
  wait (0.1) seconds
end

Walk cycle, attempt #1. Move ten pixels, swap legs, wait, repeat.

Click the flag. Two things happen — one good, one bad.

Reveal what you should see

Good: The cat actually walks across the Stage. Legs swap, body moves, it looks like proper walking. You just built your first walk cycle in three blocks.

Bad: The cat reaches the right edge and gets stuck, jittering. The same edge bug you fixed back in L02-06 — except now the cat is also flickering its legs while stuck. We need to bounce off the edge.

And once you fix the bounce, a second bug appears: the cat walks left, but it's upside down. Today's lesson is the three tiny blocks that fix all of this — plus how to combine them into a walk cycle you'd be proud to show a friend.

New Concept — the four-block walk cycle 15 min

A finished walking sprite needs four ideas working together: move forward, swap legs, turn around at the edge, and stay the right way up. Each one is one block. The whole cycle fits in your hand.

Idea 1 — move + next costume side by side

This is yesterday's animation loop with one extra block inside. The move changes where the cat is; the next costume changes what the cat looks like. Run together, your brain reads it as walking instead of sliding.


when flag clicked
forever
  move (10) steps
  next costume
  wait (0.1) seconds
end

The naked walk cycle. Works perfectly — until the cat hits the edge.

Idea 2 — if on edge, bounce

In L02-06 you handled the edge with if <> then + touching [edge v]? + turn cw (180) degrees. That works. But Scratch has a single block that does the whole thing in one go: if on edge, bounce. It checks if you're touching the edge, and if you are, it flips your direction. One block, three jobs.


when flag clicked
forever
  move (10) steps
  if on edge, bounce
  next costume
  wait (0.1) seconds
end

One block added — the bounce. Now the cat reaches the right edge, turns, walks left, reaches the left edge, turns again. Forever.

Run it. The cat now bounces — and you'll immediately see the next problem.

Idea 3 — rotation style fixes the upside-down cat

When the cat bounces, Scratch flips its direction from 90 (right) to -90 (left). And by default, sprites rotate to face their direction. So a cat pointing -90 is a cat lying on its back. Looks ridiculous.

Every sprite has a rotation style setting with three modes:

all around (default): the sprite rotates fully to match its direction. Good for spaceships, arrows, anything that can point in any direction. Bad for things with feet.
left-right: the sprite only ever faces left or right. It mirror-flips horizontally when needed. Perfect for walkers.
don't rotate: the sprite never changes its visual orientation no matter what direction it's pointing. Useful for facing-camera characters.

For walking, you want left-right. You can set it once at the top of the script:


when flag clicked
set rotation style [left-right v]
forever
  move (10) steps
  if on edge, bounce
  next costume
  wait (0.1) seconds
end

Five blocks. The polished walk cycle. The cat walks right, bounces, walks left (now mirror-flipped, feet still on the floor), bounces, repeats.

The cat starts on the right foot

Just like last lesson, every flag-click should reset the cat to a known state. Add a switch costume to and a point in direction (90) at the top so every run starts identically:


when flag clicked
go to x: (-200) y: (0)
point in direction (90)
switch costume to [costume1 v]
set rotation style [left-right v]
forever
  move (10) steps
  if on edge, bounce
  next costume
  wait (0.1) seconds
end

The full, classroom-ready walk cycle. Nine blocks. Resets position, direction, costume, and rotation style — then walks forever, bouncing off edges, mirror-flipping when it turns.

Worked Example — the cat on a stroll 12 min

Eight steps to a walking cat that bounces off both edges and faces the right way the whole time.

Stage plan. The showcase cat (the ✏️ sprite) starts on the left, walks right across the KL Stage, and bounces back off the edge — legs swapping the whole way.

Step 1 — Start fresh

New project. Keep the default cat. The cat has two costumes (costume1 with one leg forward, costume2 with the other) — perfect for a walk cycle.

Step 2 — The hat

From Events: when ⚑ clicked.

Step 3 — Reset position and direction

From Motion: go to x: (-200) y: (0) — starts the cat near the left edge. Then point in direction (90) — facing right.

Step 4 — Pin the start costume

From Looks: switch costume to [costume1 v]. Snap under the point-in-direction.

Step 5 — Set the rotation style

From Motion: set rotation style [left-right v]. This is the secret-handshake block. Without it, the cat will roll on its back when it bounces.

Step 6 — The forever loop

From Control: forever. Snap to the bottom of the setup chain.

Step 7 — Walk inside the loop

Inside the forever, drop these in order: move (10) steps, if on edge, bounce, next costume, wait (0.1) seconds.

Step 8 — Click the flag

The cat strolls from left to right, legs swapping, hits the right edge, bounces, faces left (mirror-flipped — head still up), strolls back to the left edge, bounces, repeats. Forever. Smoothly. The way a Scratch cat should look.

The full assembled stack


when flag clicked
go to x: (-200) y: (0)
point in direction (90)
switch costume to [costume1 v]
set rotation style [left-right v]
forever
  move (10) steps
  if on edge, bounce
  next costume
  wait (0.1) seconds
end

Nine blocks. A walking cat with no bugs. Memorise this shape — you'll use it on every character sprite you ever build.

What you just built: the basic NPC. Every "guy who walks back and forth" in every platformer ever made — every patrolling Goomba, every wandering pigeon, every shopkeeper pacing behind the counter — is some version of this nine-block stack. Movement, animation, edge detection, sane orientation. Done.

Try It Yourself — three walking drills 15 min

🟢 Easy

Goal: Take the worked-example cat and make it walk slower. Change the move from 10 to 3 steps, and the wait from 0.1 to 0.2 seconds. Click the flag and watch.


when flag clicked
go to x: (-200) y: (0)
point in direction (90)
set rotation style [left-right v]
forever
  move (3) steps
  if on edge, bounce
  next costume
  wait (0.2) seconds
end

Same nine blocks, two numbers changed. The cat now strolls like he's just had teh tarik — slow and content.

Think: Move size and wait time work together to define a "speed feeling". A big move + short wait = sprinting. A small move + long wait = strolling. Same blocks, different vibe.

🟡 Medium

Goal: Use the Dinosaur4 sprite from the library (or any sprite with 4+ costumes that look like a walk). Build the standard walk cycle. Then experiment with the wait so the dinosaur looks realistic for its size — heavier creatures usually need a slightly slower wait.


when flag clicked
go to x: (-200) y: (-50)
point in direction (90)
set rotation style [left-right v]
forever
  move (8) steps
  if on edge, bounce
  next costume
  wait (0.15) seconds
end

More costumes = smoother animation. The dinosaur's walk has four frames per cycle, so each leg-swap is more believable than the cat's two-frame jerk.

Think: Animators in studios think about weight. A mouse takes quick little steps; an elephant takes slow heavy ones. Try matching the move and wait to the size of your sprite — your animation will instantly feel more right.

🔴 Stretch

Goal: Build a keyboard-controlled walker. The cat should only animate and move while the right-arrow key is held down. Point right when right-arrow is held; point left and walk when left-arrow is held. Use if <> then blocks inside the forever, with key [right arrow v] pressed?. Don't forget the rotation style and the edge bounce.


when flag clicked
set rotation style [left-right v]
point in direction (90)
forever
  if <key [right arrow v] pressed?> then
    point in direction (90)
    move (5) steps
    next costume
  end
  if <key [left arrow v] pressed?> then
    point in direction (-90)
    move (5) steps
    next costume
  end
  if on edge, bounce
  wait (0.05) seconds
end

Think: You just built the movement code for half the games on the Scratch front page. Keyboard input, conditional animation, edge handling, mirror-flipping. The leap from "cat that walks by itself" to "cat the player controls" is just two if-then blocks.

Mini-Challenge — Priya's somersaulting cat 5 min

"Why does my cat do a flip every time it turns?"

Priya copies the example, but skips one line. Her cat walks across, hits the edge, and turns — but on the way back, it's walking upside down with its feet in the air. Her script:


when flag clicked
go to x: (-200) y: (0)
point in direction (90)
switch costume to [costume1 v]
forever
  move (10) steps
  if on edge, bounce
  next costume
  wait (0.1) seconds
end

Priya's stack. Eight blocks. Looks almost identical to the worked example, but one block is missing.

Compare with the worked example. What's missing, and what does that missing block do?

Reveal one valid fix

The missing block is set rotation style [left-right v]. Without it, the cat's rotation style is the default — all around. So when the bounce flips the direction from 90 to -90, the cat rotates a full 180 degrees to "face" that way. Cats facing -90 with all-around rotation look like they've been picked up by their tails.

The fix is to add the rotation-style block once at the top, before the forever:


when flag clicked
go to x: (-200) y: (0)
point in direction (90)
switch costume to [costume1 v]
set rotation style [left-right v]
forever
  move (10) steps
  if on edge, bounce
  next costume
  wait (0.1) seconds
end

One block, the right kind of flip. Rotation style is the difference between a walking cat and a tumbling cat.

Recap 3 min

You combined last lesson's costume-switching loop with motion to build a real walk cycle. The loop now runs four jobs per frame: move a few pixels, if on edge, bounce to handle the boundary, next costume to swap the legs, wait to pace the animation. Wrap that loop with a setup block at the top — position, direction, starting costume, and most importantly set rotation style [left-right v] — and you have a complete, well-behaved walker that handles edges, mirrors itself correctly, and starts the same way every time.

Walk cycle: A short animation loop (usually 2–4 costumes) that, when played repeatedly while the sprite also moves, looks like the sprite is walking. The core animation pattern in 2D games.
if on edge, bounce: The Motion block that does check edge + flip direction in one step. Equivalent to if <> then + touching [edge v]? + turn cw (180) degrees, but shorter.
Rotation style: A per-sprite setting that controls how the sprite visually rotates when its direction changes. Three modes: all around, left-right, don't rotate.
left-right rotation: The rotation style where the sprite mirror-flips horizontally instead of fully rotating. The correct choice for nearly any character that has a "right way up".
Setup block: The cluster of blocks at the top of a script — between the hat and the loop — that resets the sprite to a known starting state on each flag click.

Homework 2 min

The KL Street Walker. Build a scene with three walking sprites that share the same Stage. Each one is a different character on a KL street — pick three from: the auntie, Aljay, a stray cat, the kacang putih man, a school kid, anyone. All three walk back and forth at the same time, at different speeds, all the right way up.

Add three sprites. Each should have at least two costumes that look like a walk (use library sprites or paint your own two-pose costumes).
Give each sprite the full nine-block walk cycle from the worked example.
Make each one walk at a noticeably different speed by varying the move size and the wait.
Position them at different y-coordinates so they don't overlap — auntie at y: 50, Aljay at y: -20, cat at y: -100 (or whatever feels right).
Every single sprite must have set rotation style [left-right v] in its setup. Every one.

Save as HW-L2-27-KL-Street-Walker.sb3.

Bring back next class:

The .sb3 file.
Your answer to: "Which character looks the most 'alive' to you, and was that because of the costumes, the speed, or both?"

Heads up for next class: SCR-L02-28 stays in Cluster E and introduces change [color v] effect by () and friends — graphic effects you can layer on top of your walk cycle to make characters glow, ghost, pixelate, or fade. Same walk, new vibe.