Cartoon Studio I

Review — Boss Tower 5 min

• The dragon was a state machine: one phase variable, and each phase named the next one.
• Its attacks came from a list, and every attack left a gap.
• A whole game was screens moved along by messages: title, fight, ending, credits.

Quick-fire

Boss Tower’s title screen sent a message, and every sprite answered it — some showed, some hid. Why was one message better than a separate script on each sprite that waited three seconds?

Today’s Topic 3 min

• A cut-out puppet: one character made of five sprites
• An offset: where each piece sits, measured from the body
• A pin: the point an arm turns round
• Beats: one moment of a scene at a time, with broadcast and wait

Learning outcome

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

1. Make several sprites move as one, by following a body.
2. Set a costume’s centre so a piece turns at the right place.
3. Play a scene as beats, each one waiting for the last.

Learnt — a puppet in five pieces 28 min

1 · Pieces, not drawings

A paper puppet is cut into pieces and pinned together. You do not draw it again to make it wave. You just turn the arm. Cartoons were made like this for years, and Scratch can do it too.

Meet Pip, a paper bear in five sprites: Back Arm, Body, Head, Mouth and Front Arm.

2 · Only the body moves

The Body tells everyone where it is, every frame, in two variables. Each other piece goes to the body plus its offset, every frame. Move the body, and the whole puppet moves.

when flag clicked
switch costume to [stand v]
go to x: (-120) y: (-55)
forever
  set [body x v] to (x position)
  set [body y v] to (y position)
end
              

when flag clicked
point in direction (165)
forever
  go to x: ((body x) + (21)) y: ((body y) + (34))
end
              

3 · The pin

A sprite turns round the centre of its costume — the little cross in the paint editor. For an arm, that point must be the shoulder. So Pip’s arm is drawn from the centre outwards, with an empty half on the other side.

Drawn this way, an arm points where its direction says: 90 straight out, 180 hanging down, 0 straight up.

4 · A scene is beats

A beat is one moment of a scene: walk in, wave, bow. The Stage sends one message per beat, and the pieces that act on it answer.

when flag clicked
broadcast (walk in v)
broadcast (wave v)
broadcast (bow v)
              

when flag clicked
broadcast (walk in v) and wait
broadcast (wave v) and wait
broadcast (bow v) and wait
              

Basic — Pip’s first scene 25 min

Start a new project. You will build Pip and play a four-beat scene.

Step 1 — the stage and the pieces

1. Choose the backdrop Theater. Delete the cat.
2. Save Pip’s costumes: body, body step, head, head blink, mouth and arm.
3. Make five sprites with Upload Sprite: Back Arm (arm), Body (body, then body step as a second costume, named stand and step), Head, Mouth and Front Arm (arm again).
4. Put them in layer order: Back Arm at the back, Front Arm at the front.

Step 2 — the body and its followers

1. Make two variables, For all sprites: body x and body y.
2. Give the Body the posting script from Learnt part 2, but start it at x: -160.
3. Give each other piece the follow script with its own offset from the table. The Back Arm points in direction -165, the Front Arm 165.
4. Click the green flag. Drag the Body around the Stage: everything should follow.

Step 3 — four beats

when flag clicked
wait (0.5) seconds
broadcast (walk in v) and wait
broadcast (wave v) and wait
broadcast (bow v) and wait
broadcast (walk off v) and wait
              

when I receive [walk in v]
repeat (9)
  next costume
  repeat (6)
    change x by (3)
  end
end
switch costume to [stand v]
              

when I receive [wave v]
repeat (3)
  point in direction (30)
  wait (0.3) seconds
  point in direction (60)
  wait (0.3) seconds
end
point in direction (165)
              

when I receive [wave v]
say [Hi, I'm Pip!] for (1.8) seconds

when I receive [bow v]
repeat (6)
  turn right (5) degrees
  wait (0.05) seconds
end
wait (0.6) seconds
point in direction (90)
              

Pip blinks

A character that never blinks looks like a statue.

• The head blinks by itself, at a random moment every 2 to 4 seconds.
• A blink is short: the eyes shut for about a sixth of a second.
• A blinks variable counts them.

when flag clicked
set [blinks v] to (0)
forever
  wait (pick random (2) to (4)) seconds
  switch costume to [blink v]
  wait (0.15) seconds
  switch costume to [head v]
  change [blinks v] by (1)
end
            

A jump beat

Add a jump beat, and play it three times.

• Pip crouches a little, then jumps up 90 and comes back down.
• The whole puppet leaves the floor together.
• The arms fly up while Pip is in the air, and drop when Pip lands.

when I receive [jump v]
change y by (-6)
wait (0.2) seconds
change y by (6)
repeat (10)
  change y by (9)
end
repeat (10)
  change y by (-9)
end
            

when I receive [jump v]
wait until <(body y) > (-45)>
point in direction (20)
wait until <(body y) < (-45)>
point in direction (165)
            

Yes and no

Pip answers two questions without a word — then says it.

• Pip thinks “Cake?”, then nods twice: the head dips down and back.
• Pip thinks “Rain?”, then shakes three times: the head slides left and right.
• The mouth moves with the head, so it never slides off the face.

forever
  go to x: ((body x) + (head dx)) y: (((body y) + (78)) + (head dy))
end
            

when I receive [yes v]
repeat (2)
  set [head dy v] to (-6)
  wait (0.2) seconds
  set [head dy v] to (0)
  wait (0.2) seconds
end
say [Yes!] for (1) seconds
            

Pip turns round

Pip walks right, turns round, and walks back waving.

• A facing variable: 1 for right, -1 for left.
• When Pip faces left, every x offset flips, and so does every arm direction.
• The Body and Head flip too — the cap’s peak shows which way Pip faces.
• The front arm is still in front, now on the other side.

forever
  go to x: ((body x) + ((21) * (facing))) y: ((body y) + (34))
end
            

set [facing v] to (-1)
point in direction (-90)
broadcast (turned v)
            

Summary 5 min

• A cut-out puppet is several sprites. Only the body moves; the rest follow.
• Each piece goes to the body plus its own offset, every frame.
• A piece turns round its costume’s centre, so that centre is the pin.
• A scene is beats. broadcast and wait plays them one after another.

Cut-out animation

Moving a character made of separate pieces, instead of redrawing it.

Offset

How far a piece sits from the body: across and up.

Pin

The point a piece turns round — its costume’s centre.

Beat

One moment of a scene, such as “wave”.

Hand in

Save Pip — you will use the same puppet all arc. Next lesson Pip gets a voice: the mouth changes shape in time with a song.