Projects

Catch the bus

Code sprites to walk or fly to the bus before it drives off

Step 1 You will make

Create an animation with sprites that run or fly to catch a bus 🚌.

You will:
Make sprites do different things when green flag clicked
Position sprites on the Stage
Use a repeat loop to move sprites and switch costumes

Animation creates the effect of movement by changing pictures quickly. The first animators carved pictures out
of wooden blocks and used them as stamps. It is much faster to use Scratch to code your animation!
Step 2 Create your bus scene

Choose a backdrop and add a bus sprite.

Open the starter project

Open the Catch the bus starter project (https://scratch.mit.edu/projects/582214330/editor). Scratch

will open in another browser tab.

Working offline
For information about how to set up Scratch for offline use, visit our ‘Getting started with Scratch’
guide (https://projects.raspberrypi.org/en/projects/getting-started-scratch/1).

Choose a Backdrop

Click (or on a tablet, tap) on Choose a Backdrop in the Stage pane (in the bottom right-hand corner of the
screen):
 Click on the Outdoors category. Add a backdrop that makes a good starting point for your bus:

Choose a Sprite

Click on Choose a Sprite:

Type bus in the search box at the top:

Add the City Bus sprite to your project.

Give your bus a starting position

Make sure that the City Bus sprite is selected in the Sprite list below the Stage.
Drag a when green flag clicked block from the Events blocks menu to the Code area:

when clicked

Drag the bus to a good position on the Stage:

The x and y coordinates (the numbers used to describe the position) of the bus are shown in the Sprite pane
below the Stage:
 Add a go to x: y: block:

when clicked

go to x: 0 y: -100

The numbers in the go to x: y: block are the current x and y coordinates of the bus. The numbers in
your project might be a bit different.

Test: Drag the bus to anywhere on the Stage, and then click on the green flag. The bus should always go to
its starting position.

Move the bus behind the character sprites

 To make sure that the City Bus sprite is always behind all the character sprites, add a go to front
layer block, then click on front and change it to back:

when clicked

go to x: 0 y: -100

go to back layer

Tip: If you cannot see the go to front layer block, you need to scroll down in the Looks blocks menu.

Change the bus colour

You can change the colour of the bus:

when clicked

go to x: 0 y: -100

go to back layer

set color effect to 50 try numbers up to 200

Resize the Scratch Cat

The Scratch Cat appears in all new Scratch projects as Sprite1 in the Sprite list. Click on the Sprite1 sprite in
the Sprite list to get ready to animate the Scratch Cat:

Tip: If you have accidentally deleted the Sprite1 (Scratch Cat) sprite, you can click on the Choose a Sprite
icon and search for cat.

In the Sprite pane, click in the Size property and change the Scratch Cat’s size to 50:
Step 3 The Scratch Cat catches the bus

Animate the Scratch Cat to appear on the right-hand side of

the Stage and walk to the bus by repeating a small movement
many times in a loop.

Get the Scratch Cat into their starting position

Click in the Direction property in the Sprite pane. Rotate the arrow to point to -90. Then, click on the
Left/Right icon in the middle to change the rotation style to left-right to stop the Scratch Cat turning
upside down:

Drag the Scratch Cat to the bottom right-hand side of the Stage.

Tip: If you try to position a sprite off the Stage, it will move back to its last position on the Stage.
 Add code to get the Scratch Cat to their starting position:

when clicked

go to x: 200 y: -150 bottom right-hand side

Test: Drag the Scratch Cat to a new position, then click on your go to x: y: block. The Scratch Cat
should move back to the bottom right-hand side each time.

Animate the Scratch Cat

You will add code in a repeat loop to make the Scratch Cat repeat a small number of steps many times. This will make
the Scratch Cat appear animated.
 Add a repeat 10 block, then drag a move 10 steps block inside it:

when clicked

go to x: 200 y: -150 bottom right-hand side

repeat 10 try different numbers

move 5 steps 5 is a good walking speed

Test: Click on the green flag. Try changing the numbers in the repeat 10 block so that the Scratch Cat
stops at the bus.

Some sprites have more than one costume. You will use the Scratch Cat sprite’s costumes to create an animation of
the Scratch Cat walking.

Click on the Costumes tab. The Scratch Cat sprite has two costumes, and together, they can be used to
make a walking movement.
 Click on the Code tab. Add a next costume block:

when clicked

go to x: 200 y: -150 bottom right-hand side

repeat 20 try different numbers

move 5 steps 5 is a good walking speed

next costume

Test: Click on the green flag, and the Scratch Cat will walk to the bus.

Hide the Scratch Cat

 Add a block to hide the Scratch Cat when they reach the bus:

when clicked

go to x: 200 y: -150 bottom right-hand side

repeat 20 try different numbers

move 5 steps 5 is a good walking speed

next costume

hide

Test: Click on the green flag again, and you will see that the Scratch Cat has now disappeared.

Show the Scratch Cat

Add a show block so that the Scratch Cat appears before they walk to the bus:

when clicked

go to x: 200 y: -150 bottom right-hand side

show

repeat 20 try different numbers

move 5 steps 5 is a good walking speed

next costume

hide

Tip: When you use a hide block, you need to also add a show block to make sure that a sprite is visible
when it needs to be.

Test: Click on the green flag to test your project, and make sure that the Scratch Cat appears.
Step 4 The hippo flies to the bus

Add a hippo sprite that flies to the bus.

Give the Hippo a starting position

Add the Hippo1 sprite to your project.

Change the Size of the Hippo1 sprite:

Drag the hippo to the top left-hand side of the Stage.

 Add code to get the hippo to their starting position:

when clicked

go to x: -200 y: 150 top left-hand side

Tip: The x and y coordinates in the go to x: y: block will be the current position of the hippo, so you do
not need to type them in.

Make the Hippo flap its wings and fly

Add code to make the hippo fly towards the City Bus:

when clicked

go to x: -200 y: 150

repeat 100

point towards City Bus change from mouse-pointer

move 3 steps

next costume

Test: Click on the green flag and check that the hippo flies to the bus. You can change the number in the
repeat block to get the hippo to stop in just the right place.

Show and hide the bus

Add show and hide blocks:

when clicked

go to x: -200 y: 150

show

repeat 90

point towards City Bus

move 3 steps

next costume

hide

Test: Click on the green flag. The hippo will fly and enter the bus.
Step 5 The bus leaves

Add more blocks to make the bus drive off.

Animate the Bus

Select the City Bus sprite.

Add code to make the bus drive off to the right four seconds after the green flag is clicked.

when clicked

wait 4 seconds change 1 to 4

 Drag your bus to the right-hand side of the Stage. This is the x and y position that the bus will glide to.

Tip: If you move the bus too far to the right, it will jump back. Try again, but don’t move it so far.

Add a glide 2 secs to x: y: block under the wait block.

The x and y coordinates in your project might be a bit different and will be the exact position that you
dragged the bus to.

when clicked

wait 4 seconds change 1 to 4

glide 2 secs to x: 320 y: -100 right-hand side of the Stage

Test: Click on the green flag. The Scratch Cat and hippo will move to the bus, and the bus will drive off to the
right after four seconds.

Hide and show the Bus

Add a hide block to make the bus seem to drive off the Stage:

when clicked

wait 4 seconds change 1 to 4

glide 2 secs to x: 320 y: -100

hide

Test: Click on the green flag. The bus will now hide after driving off. Do you remember how to make sure that
a sprite reappears when you click on the green flag?
Add a show block to your when green flag clicked script to make the bus appear when you run your
project:

when clicked

go to x: 0 y: -100

go to back layer

set color effect to 85 try numbers up to 200

show

Test: Click on the green flag and watch your animation. The bus should appear in the centre of the Stage
and then drive off to the right and disappear.
Is everyone on the bus when it leaves? You can change the amount of time that the bus waits, if you need
to.
Step 6 Missing the bus

What if the Scratch Cat did not run fast enough to catch the
bus?

Make Scratch Cat miss the bus

Select the Scratch Cat sprite and add a wait block:

when clicked

go to x: 200 y: -150

show

repeat 20 try different numbers

move 5 steps

next costume

wait 1 seconds

hide

Test: Click on the green flag. The Scratch Cat will walk too slowly and miss the bus!

Make Scratch Cat catch the Bus

 You will want delays of less than one second. 0.5 is half a second, 0.25 is a quarter of a second, and 0.1 is a
tenth of a second.
Change the delay in the wait block:

wait 0.2 seconds try 0.1, 0.5, 0.05

Test: Click on the green flag, and the Scratch Cat will walk faster. Choose the delay that you like the most.

Choose if Scratch Cat catches or misses the bus

If you want the Scratch Cat to miss the bus, remove the hide block from your code so that the Scratch Cat
stays on the Stage:

when clicked

go to x: 200 y: -150

show

repeat 20

move 5 steps

next costume

wait 0.5 seconds

hide
If you want the Scratch Cat to catch the bus, make the bus wait longer before it leaves:

when clicked

wait 4 seconds change from 4 to 6

glide 2 secs to x: 320 y: -100 right-hand side of the Stage

hide

You will need to put the hide block back in the Scratch Cat sprite’s code if you have removed it and want
the Scratch Cat to successfully catch the bus.

Make changes until you get the animation to work the way that you want it to.

When working on a project, you often go back and change or improve your code as you get new ideas.
Step 7 Change the destination

The writing on the bus says “Scratch Tours”, but you can change
the destination to one of your choice. Where do you want your
bus to go?

Edit the City Bus sprite

Select the City Bus sprite and click on the Costumes tab:

Click on the white “Scratch Tours” text to select it, and then click on Delete to remove it.

Tip: You can use the Delete icon in the Paint editor or the Delete key on your keyboard.
Select the Text (writing) tool.
Click on the bus where you want your text to start, and type the destination of your choice.
To change the font (writing style), you can click on the Font drop-down menu:

Click on the Select (Arrow) tool, then drag the text to position it on the bus.
Upgrade your project
Now, you can add a sprite of your choice to your animation. You will need to add code to make your sprite go to a
starting position, point in the right direction, and then repeat move and next costume blocks to reach the bus.

Tip: When you click on Choose a Sprite, you can hold your mouse cursor over a sprite to see its costumes, or on some
mobile devices, you can tap and hold on a sprite to see its costumes (if a window pops up when you tap and hold on a
sprite, tap at the side of the screen to close the window and see the costumes). Looking at sprites’ costumes can help
you find a sprite that works well for animation.

You can use any of the blocks that you learned about in this project, as well as those that you already know:

when clicked

go to x: 0 y: 0 drag the sprite to choose x and y

show

hide

glide 2 secs to x: 0 y: -100 bottom middle of the Stage

repeat 30
point towards City Bus

point in direction 180 point down

set rotation style left-right

move 3 steps

next costume

start sound clown honk

wait 0.1 seconds short delay

set color effect to 50 up to 200

Completed project
 You can view the completed project here (https://scratch.mit.edu/projects/724160134/).
You can also ‘remix’ the project to make any changes you like. You could add sound effects to the bus or other sprites,
or set the colour effect of the bus. One of the sprites could miss the bus and not hide.
Thanks to digital maker Lyla for sending this fantastic upgrade!

Save your project

 What next?
If you are following the Introduction to Scratch (https://projects.raspberrypi.org/en/pathways/scratch-intro)
pathway, you can move on to the Find the bug (https://projects.raspberrypi.org/en/projects/find-the-bug)
project. In this project, you will make a game in which you have to find the bug that is hiding on each level.

If you want to have more fun exploring Scratch, then you could try out any of these projects (https://projects.raspb
errypi.org/en/projects?software%5B%5D=scratch&curriculum%5B%5D=%201).

Published by Raspberry Pi Foundation (https://www.raspberrypi.org) under a Creative Commons license (ht

tps://creativecommons.org/licenses/by-sa/4.0/).
View project & license on GitHub (https://github.com/RaspberryPiLearning/catch-the-bus)