Game Design from Scratch

January 2016
@mcromievusd
Welcome!

This presentation is meant to be used to teach

the basic skills and tools needed to create a
simple game in Scratch. I believe it’s appropriate
for teachers and students alike.

Here’s my Scratch profile

Here’s a link to the game that this presentation is all about.

Here’s the rationale I prepared for the January inservice day

Part 1: The Scratch Interface Tabs

The Stage Menus

Scripts
Area

We won’t need the

cat, right click on Blocks
him and delete him.
I believe his name is
Sprites List
Scratchy.
Prepare the Backdrop

Click on the Stage to make sure it

is selected. Click on backdrops
tab to edit the backdrop.
Let’s turn the background black
Let’s draw our PacMan sprite

Click on the paintbrush to

draw a new sprite, choose
the circle tool and hold
shift while you drag out a
circle to make sure it’s
perfect. Click on the
crosshairs tool then click
on the center of your circle
to center it.
Details
Use the line tool to draw the
closed mouth, right click and
duplicate the costume and use the
line tool and paint bucket to make
a few more costumes like so.
Add the scripts for PacMan

We start with the

“when flag clicked”
block to begin our
game (drag the block
from the events
menu into the
workspace)
Smooth Movement

We can use some blocks from the Control

menu to tell the computer to constantly
check if the arrow keys are being pressed.
If they are, then we will have PacMan
respond appropriately by pointing in the
correct direction, cycling through his
costumes and moving however many
steps we program.
Note that only
blocks with certain
shapes will fit in
some of the
sockets.
Animation

Having a sprite
cycle through its
costumes will give
the appearance of
animation.
Motion

Note that you can

drop down the
direction to the
preprogrammed ↑,↓,
→,← or you can
enter values or
operators.
Duplicate and Modify

Right click on the “if-then” block and duplicate

it, then do it again so you have all four
directions covered. Change the keys and the
directions and test it out, debugging where
necessary.

You now have four conditional statements

nested within a forever loop.
Let’s make an objective for our game

To make it simple, we will choose

a new sprite from the library.

Double click on the Donut sprite

to add it to our game. PacMan
doesn’t always eat donuts, but
when he does, he prefers ones
with sprinkles.
Shrinking Sprites

You’ll notice that the donut is much larger

than PacMan. Use the shrink tool to make
it more appropriate. Select the tool and
then click on the donut until it looks good.
You can do the same to PacMan if you
like.

You can also make sprites bigger by

choosing the grow tool.
Scripts for the donut

We’ll have the donut begin the game

hidden, then it will wait 1 second, go
to a random spot on the stage and
show itself. PacMan’s objective will
be to find the donut and chomp it
up.

See if you can arrange the blocks to

make this happen. (Hover your mouse around
the stage to get the min and max x and y values to plug into
the “pick random” blocks)
Scripts for the donut

That should be good for

now, you can click the flag
a few times to make sure
you are getting some nice
randomness.

Next we’ll want to create

the code that allows
PacMan to eat the donut
and score a point.
Add a variable

Click “Make a variable” from the

orange Data menu. We’ll call it
“Score” and make t for all sprites.

Select your PacMan sprite and set

the score to zero after the flag is
clicked.
Broadcasting
We need to make a few things
happen if PacMan ever
touches the donut. Drag an
if-then block out of the control
menu and place it under the
motion controls in his scripts.
 Broadcasting
Set it up like this, grabbing the “touching?”
block from the light blue sensing menu
and the “broadcast message” block from
the brown Events menu.

Broadcast a new message called “chomp”

This is a handy thing to use if you ever

need one sprite to communicate with
another.
 Broadcasting
Click on the donut sprite and grab the
“when I receive chomp” block from the
brown Events menu. Add the script to
change the score from the orange Data
menu and then right click on the “hide”
script at the top and duplicate everything
below it to add under the “change score”
block.
 End of part 1
You should now have a game with a custom
PacMan sprite, smooth movement, some nice
random elements and a variable that tracks
when two sprites interact and reports a value.

Try adding your own customizations - make

PacMan start at the origin and face to the
right, change the speed he moves, add a
sound effect when he gets the donut, etc.
In part 2, we will add an antagonist, change levels, and track if the game has been
won or lost.
Part 2

Let’s add one of the Scratch

ghosts to antagonize PacMan.
Add the Sprite from the library,
choose the angrier looking one
and shrink it down a bit with the
shrink tool (inward-pointed
arrows).
Add Scripts to the Ghost

Let’s tell the ghost to hide when the

game starts, wait a random number of
seconds, and appear in the top right
corner. You should know where all the
blocks are to make this happen, see if
you can do it by yourself.
 Add Scripts to the Ghost

Once the ghost appears, it should

point toward PacMan and slowly
move toward him. You’ll find the
“point toward” block in the dark blue
motion section - at this point we
ought to rename Sprite1 as PacMan
by clicking on the small “i” on the
Sprite1 sprite. Now we can tell the
ghost to FOREVER point towards
PacMac and move 2 steps.
Change Rotation Style

You’ll notice if you run the program that

the ghost is sometimes upside down.
We can fix that by clicking on its “i” in
the sprite area and changing its rotation
style to “left-right” (there’s also a block
that does the same thing in the motion
menu).

Let’s have the ghost take away a point if

it touches PacMan.
 Debugging
As you run the game, something funny
happens if the ghost touches PacMan...he
rapidly loses points as long as he is in
contact with the ghost sprite.

We can fix that by telling the ghost to wait

half a second after changing the score.
More motions for PacMan

Click on PacMan in the sprite area and choose the “go

to x y” and “point in direction” blocks. We want pacman
to start the game in the center of the screen and face to
the right.

Remember that Scratch is laid out as a Cartesian Plane,

meaning that the program keeps track of x and y
positions for each sprite. The center of the screen is the
origin (0,0) and the maximum and minimum values for x
and y are 240, -240, 180, -180 respectively.
More motions for PacMan

Let’s use that information to allow PacMan

to evade the ghost by going off one side of
the stage and appearing on the other. We’ll
set this up with the following conditional
statement: If PacMan’s x position is ever
greater than, 239, set it to -239. If it’s ever
less than -239, set it to 239.

See if you can do it for his y position as

well. You’ll need a total of 4 statements.
Changing Levels

Let’s add another level to our game.

Most games get progressively harder,
so our second level will introduce
another, speedier ghost. Let’s start by
triggering level 2 when PacMan gets
his 5th donut. We’ll add these scripts
to the Stage. We basically want the
stage to constantly check PacMan’s
score and broadcast a message when
it equals 5.
Broadcast “Level 2”

Now that our game is checking the

score and broadcasting “level2”, we
need to create a new sprite that will
enter the game when it receives that
message. Choose the ghoul from the
library and copy all the scripts from
the ghost by dragging them (from the
when flag clicked block) and dropping
them on the ghoul.
Receiving the message

The only thing we need to change is

the “hat block” that triggers the ghoul.
When the flag is clicked we want it to
hide and when it received the
message “level 2” we want it to show.

You can change its speed, make it go

to a random place when it appears, or
whatever else you think would make
the level more challenging.
Ending the Game

To wrap this up, let’s say that the

game ends when PacMan gets his
10th point. We can accomplish this
the same way we did the levels, by
adding a script to the stage that
checks the score and broadcasts a
“You Win” message. While we’re at
it, let’s also end the game if
PacMan’s score is ever less than 0.
“You Win” and “Game Over” Sprites

Choose Paint New Sprite from the

sprite area and use the text tool to
write You Win. Do the same thing
again but this time type Game Over.

I did mine in vector mode using the

Scratch fontThe code for each will be
very similar so we’ll do one and then
copy it to the other by dragging and
dropping it onto the sprite.
Ending the game

This is a very basic way to end the

game. You can add some animation to
the words by playing around with the
different effects in the purple looks
menu, but I think this will suffice for
now.