Scroll World I

Review — the Jump Quest arc 5 min

• y velocity changes by gravity; a jump sets it; land pushes out.
• walk undoes a move into a wall; a hitbox costume does the touching.
• Water, a checkpoint and a star made a level worth finishing.

Quick-fire

In Jump Quest, the whole level had to fit inside the Stage. What would you have to do to make a level four times as long?

Today’s Topic 3 min

• scroll x — how far along the world the Stage is looking
• my x — where a thing lives in the world, not on the Stage
• A world made of four screen-sized clones
• Why a sprite far away must hide

Learning outcome

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

1. Make a world longer than the Stage by moving it instead of the player.
2. Place anything in that world with set x to ((my x) - (scroll x)).
3. Explain why a far-away sprite waits at the edge unless it hides.

Learnt — the world moves 28 min

1 · The Stage is only 480 wide

Walk Pico right the way you always have, and watch what happens at the edge.

2 · Move the world instead

Give the game one number, scroll x: how far along the world the Stage is looking. The arrow keys change that, not Pico. Everything in the world keeps its own place in a variable called my x, and works out where that is on the Stage:

when I receive [scroll v]
set x to ((my x) - (scroll x))
            

The road is four screens, each a costume 480 wide. One sprite makes three clones and becomes the fourth screen itself, and each copy remembers its own my x — made for this sprite only, like the clones in Bubble Popper:

when flag clicked
set [screen v] to (0)
repeat (3)
  change [screen v] by (1)
  set [my x v] to ((480) * ((screen) - (1)))
  switch costume to (join [road ] (screen))
  create clone of (myself v)
end
change [screen v] by (1)
set [my x v] to ((480) * ((screen) - (1)))
switch costume to (join [road ] (screen))
            

3 · Far things wait at the edge

Here is a surprise. The finish flag lives at 1600, so at the start it belongs at x 1600 — far off to the right. But Scratch will never let a sprite leave the Stage completely. It keeps a little of it showing, so the flag stands at the edge, waiting, from the first second.

The cure: anything more than a screen away hides.

when I receive [scroll v]
set x to ((my x) - (scroll x))
if <([abs v] of ((my x) - (scroll x))) > (480)> then
  hide
else
  show
end
            

Basic — the road 24 min

Start a new project. You are building a road four screens long and walking along it.

Step 1 — paint four screens

1. Make a sprite called Ground. Paint its first costume: a green road along the bottom, and a numbered signpost.
2. Duplicate it three times and change the number on each sign. Name the costumes road 1 to road 4.
3. Keep the road the same height at both edges of every costume, so the screens join up.

Step 2 — two kinds of variable

1. scroll x, for all sprites.
2. my x and screen, on Ground, for this sprite only.

Step 3 — build the road

1. Build the clone-making script from Learnt part 2.
2. Add the when I receive [scroll v] script from part 3, with its hide.

Step 4 — Pico, who does not walk

1. Add Pico at size 40, standing on the road at x 0, in front of everything.
2. In a forever loop: the right arrow changes scroll x by 4, the left arrow by −4, and every tick ends with broadcast [scroll v].
3. Point Pico the way it is going, so it still looks as if it is walking.

when flag clicked
go to x: (0) y: (-104)
set [scroll x v] to (0)
forever
  if <key (right arrow v) pressed?> then
    point in direction (90)
    change [scroll x v] by (4)
  end
  if <key (left arrow v) pressed?> then
    point in direction (-90)
    change [scroll x v] by (-4)
  end
  broadcast [scroll v]
end
            

The world has ends

Walk left at the start and the road runs out. Stop scroll x going past either end.

• It never goes below 0 — the start of the road.
• It never goes above 1440 — where the fourth screen fills the Stage.
• Test both ends by holding the key down.

Clouds far away

Add clouds that slide past slower than the road, as if they were much further away.

• A Cloud sprite with clones, each with its own my x.
• Clouds divide the scroll by 4: ((my x) - ((scroll x) / (4))).
• They hide when they are well off the Stage.

The last screen

At the end of the road the world cannot scroll any more, but the flag is still ahead. Let Pico walk the last stretch itself.

• If scroll x is below 1440, the arrow scrolls the world.
• Otherwise, the arrow moves Pico.
• Pico reaches the flag.

if <(scroll x) < (1440)> then
  change [scroll x v] by (4)
else
  change x by (4)
end
            

A map

Put a marker along the top of the Stage that shows how far through the road Pico is: the left end at the start, the right end at the finish.

• The marker runs from x −150 to x 150.
• Its x is worked out from scroll x every tick — Vending Machine maths.
• Halfway along the road, it is exactly halfway along the map.

Summary 5 min

• The Stage cannot grow, so the world moves instead of the player.
• scroll x is how far along the world you are; my x is where a thing lives in it.
• Everything sets set x to ((my x) - (scroll x)) when told to scroll.
• A world of four screens is one sprite and three clones.
• Scratch keeps sprites on the Stage, so anything far away must hide.

Scrolling

Moving the world past a player who stays near the middle.

World position

Where something is in the whole level, not on the Stage.

Screen

One Stage-sized piece of the world.

Parallax

Far things sliding past more slowly than near ones.

Hand in

Save your road. Next lesson Jump Quest’s Pico moves in — with gravity, jumps and walls — and it all still works.