Cartoon Studio III

Review — Cartoon Studio II 5 min

• Four mouth shapes, chosen from a dope sheet in two lists.
• (timer) - (start) is how far into the song you are. Each cue waits for its time.
• Waits add up their lateness — about 1.4 s by the end of one song. The timer does not.
• One Speaker plays any sound you put the name of in a variable.

Quick-fire

In Level 3’s Scroll World, Pico stayed in the middle while the world moved. What one sum told every screen of ground where to stand?

Today’s Topic 3 min

• A camera x: every actor draws itself at its world x minus the camera’s
• A pan on the clock, and easing — slow in, slow out
• A camera that follows, a little behind
• Zoom: distances and sizes, multiplied together

Learning outcome

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

1. Keep a world bigger than the Stage, and show part of it.
2. Move a value from one number to another in a set time, with easing.
3. Scale a whole scene about one point.

Learnt — holding the camera 28 min

1 · The camera is a number

The road is four screens wide — Scroll World’s road from Level 3. Every actor has a world x: where it lives on the road. camera x is the world x at the middle of the Stage. So an actor stands at (my x) - (camera x).

when flag clicked
set [my x v] to (380)
forever
  go to x: ((my x) - (camera x)) y: (-30)
  if <([abs v] of ((my x) - (camera x))) > (300)> then
    hide
  else
    show
  end
end
            

Pip lives in the world too. The Body works out where on the Stage it belongs from pip x, and posts it for the pieces as before:

when flag clicked
set [pip x v] to (120)
forever
  set [body x v] to ((pip x) - (camera x))
  set [body y v] to (-75)
  go to x: (body x) y: (body y)
  if <([abs v] of (body x)) > (300)> then
    hide
  else
    show
  end
end
            

A pan is just the camera number going up:

when flag clicked
set [camera x v] to (0)
wait (1) seconds
repeat (240)
  change [camera x v] by (6)
end
            

2 · A pan on the clock, with easing

A director says “pan to Kitty in three seconds”, not “240 steps of 6”. So work it out from the timer, like the lip sync: p goes from 0 to 1 over the time, and the camera is that far along.

A real camera does not start and stop with a jolt. It speeds up, then slows down. That is easing, and ([cos v] of (…)) does it: as p goes from 0 to 1, (1 − cos (180 × p)) ÷ 2 also goes from 0 to 1 — slowly at both ends.

define ease (from) (to) (secs)
set [t0 v] to (timer)
set [p v] to (0)
repeat until <(p) = (1)>
  set [p v] to (((timer) - (t0)) / (secs))
  if <(p) > (1)> then
    set [p v] to (1)
  end
  set [e v] to (((1) - ([cos v] of ((180) * (p)))) / (2))
  set [camera x v] to ((from) + (((to) - (from)) * (e)))
end
            

3 · A camera that follows

Now let Pip walk, and the camera keep up. Each frame, the camera closes one tenth of the gap to Pip. Far behind, it hurries; close, it eases.

when flag clicked
set [camera x v] to (0)
forever
  change [camera x v] by (((pip x) - (camera x)) / (10))
end
              

repeat (25)
  next costume
  repeat (6)
    change [pip x v] by (5)
  end
end
switch costume to [stand v]
              

4 · Zoom

Zooming in makes everything bigger and further from the middle. Multiply both by zoom. We zoom about the bottom of the Stage (y −180), so the ground never lifts off the bottom edge:

go to x: (((my x) - (camera x)) * (zoom)) y: ((((-30) + (180)) * (zoom)) - (180))
set size to ((100) * (zoom)) %
            

Pip’s pieces need one more thing. Their offsets are distances too, so they grow with the zoom:

forever
  go to x: ((body x) + ((21) * (zoom))) y: ((body y) + ((34) * (zoom)))
  set size to ((100) * (zoom)) %
end
            

Basic — Pip walks to Kitty 25 min

Open last lesson’s Pip. You will put Pip on a long road with a camera.

Step 1 — the set

1. Upload the backdrop scroll-day.
2. Make a Ground sprite with four costumes: road 1, road 2, road 3, road 4. Like Scroll World, it makes three clones, each with its own my x (0, 480, 960) and costume, and becomes screen 4 at 1440 itself.
3. Add the Tree1 sprite (world x 380, y −30) and the Cat (size 80, world x 1300, y −90, facing left).

Step 2 — everyone draws from the camera

1. Make camera x and pip x, For all sprites. Give the Ground, Tree and Cat the draw loop from Learnt part 1.
2. Change the Body’s loop to the world version, with pip x starting at 0.
3. Add the if … hide on body x to every piece’s follow loop.

Step 3 — walk, and follow

1. Give the Stage the follow loop from Learnt part 3, and stop it at the end of the road: an if that sets camera x back to 1440 when it goes past.
2. Make Pip walk 39 steps of six moves of 5 — that is 1170, just in front of Kitty.
3. When Pip stops, Kitty says “Hi Pip!” and meows, and Pip waves back: “Hi Kitty!”

Parallax

From a train, the hills move slowly and the fence flies past. Make the world feel deep.

• Add four clouds high in the sky, 400 apart in the world.
• The clouds move at half the camera’s speed.
• When the ground has moved 1440, the clouds have moved 720.

forever
  set x to ((my x) - ((camera x) / (2)))
  if <([abs v] of ((my x) - ((camera x) / (2)))) > (330)> then
    hide
  else
    show
  end
end
            

Camera shake

Pip walks straight into the tree. Make the bump hurt.

• Pip walks until the tree, then stops with a “Bonk” sound and says “Ouch!”
• The camera shakes 12 times, a few pixels each way.
• Then it settles exactly where it was.

when I receive [bump v]
repeat (12)
  set [camera x v] to (pick random (-8) to (8))
  wait (0.03) seconds
end
set [camera x v] to (0)
            

A close-up

Pip reaches Kitty. Move in for the big moment.

• The camera glides to the middle of the two of them: x 1240.
• At the same time it zooms from 1 to 1.4, eased, in 1.5 seconds.
• Then Pip says “Happy birthday!”

define shot (to x) (to zoom) (secs)
set [from x v] to (camera x)
set [from z v] to (zoom)
set [t0 v] to (timer)
set [p v] to (0)
repeat until <(p) = (1)>
  set [p v] to (((timer) - (t0)) / (secs))
  if <(p) > (1)> then
    set [p v] to (1)
  end
  set [e v] to (((1) - ([cos v] of ((180) * (p)))) / (2))
  set [camera x v] to ((from x) + (((to x) - (from x)) * (e)))
  set [zoom v] to ((from z) + (((to zoom) - (from z)) * (e)))
end
            

A two-shot

Pip and Kitty walk apart, then come back together. The camera keeps them both in shot by itself.

• The camera always sits halfway between them.
• The further apart they are, the more it zooms out.
• The zoom never goes below 0.6 or above 1.4.

when flag clicked
forever
  set [camera x v] to (((pip x) + (cat x)) / (2))
  set [gap v] to ([abs v] of ((cat x) - (pip x)))
  set [zoom v] to ((400) / ((gap) + (200)))
  if <(zoom) < (0.6)> then
    set [zoom v] to (0.6)
  end
  if <(zoom) > (1.4)> then
    set [zoom v] to (1.4)
  end
end
            

Summary 5 min

• Every actor stands at (my x) - (camera x), and hides when that is far off the Stage.
• A pan worked out from the timer always takes the time you asked for.
• Easing with cos makes a camera move start and stop gently.
• Zoom multiplies distances, sizes and offsets — and Scratch stops it at 141 %.

Camera

The part of the world the Stage is showing.

Pan

Moving the camera sideways.

Easing

Starting a move slowly and ending it slowly.

Parallax

Far things moving slower than near ones, which makes a picture look deep.

Hand in

Save the road with its camera. Next lesson you become the director: one cue sheet runs the whole film — puppet, song, camera and credits.