snabby bird tutorial - edl · this first sprite be our bird for this game, and so all the scripting...

1

Snabby Bird

By: Jake Trower and Benji Hill

(Note: a complete, playable version can be found at

http://snap.berkeley.edu/snapsource/snap.html#present:Username=jakeonaut&ProjectName=snappy_remake)

Table of Contents

I. Setting Up the Project and Using SNAP!..................................................................... 2

A. Palette and the Scripting Area…………………………………………………... 3

B. The Stage and Sprite Corral…………………………………………………….. 3

C. The Tool Bar and Other Options……………………………………………….. 4

II. Starting Snappy Bird: Making the Bird………………………………………………….. 6

A. Gravity……………………………………………………………………………….. 6

B. Flapping and Player Input………………………………………………………... 8

III. The Background and the Ground………………………………………………………. 9

A. Creating the Background………………………………………………………… 9

B. Creating the Ground……………………………………………………………… 9

C. The Amazing Burrowing Bird…………………………………………………… 10

D. Moving Ground……………………………………………………………………. 10

IV. Pipes and Variables……………………………………………………………………….. 13

A. Creating a Variable………………………………………………………………… 13

B. Collision Detection………………………………………………………………... 15

C. Game Over, Man…………………………………………………………………... 16

V. Advanced Flapping Functionality: Velocity and More Pipes………………………… 18

A. Velocity: Modifying Bird Scripts…………………………………………………. 18

B. Pipes on Pipes on Pipes…………………………………………………………. 20

VI. Advanced Flapping Features: Rotation, Sound, and Score………………………… 24

A. Rotating the Bird with Velocity………………………………………………….. 24

B. Adding Snaps to Snappy Bird…………………………………………………… 25

C. Scorekeeping……………………………………………………………………… 26

D. Waiting to Start the Game……………………………………………………….. 28

VII. Finishing Remarks……………………………………………………………………….. 29

http://snap.berkeley.edu/snapsource/snap.html#present:Username=jakeonaut&ProjectName=snappy_remake

2

Berkeley's SNAP! (http://snap.berkeley.edu/) is a visual, drag-and-drop programming language

that runs in your computer browser. It's designed to be a more fully featured version of other

popular drag-and-drop languages (like MIT's Scratch: http://scratch.mit.edu/), and can be used

to simply make audiovisual projects. Throughout this lesson, will we be using SNAP! to make a

clone of the popular mobile game, Flappy Bird. This document comes with an accompanying

zip file full of images used to make our version of the game

I. Setting Up the Project and Using SNAP!

In order to start using SNAP!, you can navigate your web browser to

http://snap.berkeley.edu/run (or, for additional blocks for functionality,

http://snap.berkeley.edu/init). At this point, a new project should be displayed on the screen. If

you've never used SNAP! or any other drag-and-drop programming language before, things

might look a little intimidating here, but it's really not so bad! We'll shortly go through the

elements on the SNAP! programming environment on your browser now, so feel free to skip

ahead to the next section if you're already familiar with this.

(Note: a more extensive breakdown of SNAP! and it's various components and features can be

found at http://snap.berkeley.edu/SnapManual.pdf)

A. Palette and the Scripting Area

http://snap.berkeley.edu/

http://scratch.mit.edu/

http://scratch.mit.edu/

http://snap.berkeley.edu/run



http://snap.berkeley.edu/init

http://snap.berkeley.edu/SnapManual.pdf


3

The palette and the scripting area are the two leftmost sections on the screen. The palette has

several blue blocks initially, and above those are different colored buttons that change what

blocks are displayed underneath.

The core of programming in SNAP! is dragging blocks from the palette to the scripting area, and

creating scripts out of sequential arrangements of the blocks. Here is an example script:

A script is made out of a hat block and one of more command blocks. The hat blocks—which

can be found under the Control blocks tab—typically start with the word “when”, and indicate

when the actions described by the script should happen (in the example above, the script will

run when the button with the green flag from the tool bar is clicked. Each scripting area may

have several scripts each starting with a hat block, but command blocks that aren’t attached to a

hat block will not run unless manually double clicked on.

B. The Stage and Sprite Corral

If you recreate the script above in your editor by dragging the corresponding blocks to the

scripting area, and then run it by pressing the green flag button, you should see the little grey

triangle arrow in the stage move around in a circle once, returning to its original position. The

block encompassing most of the script saying “repeat 24” is a loop block that makes the

command blocks inside of it happen 24 times sequentially. Here, the script is telling the arrow to

move forward 10 units, turn clockwise 15 degrees, and then wait for 0.1 seconds, and repeat

that sequence of actions 24 times. This results in the circular motion observed.

You can try playing around with the script, adding or removing command blocks, and seeing

how that affects the behavior of the arrow when the green flag is pressed. You can also drag the

arrow with your mouse to a different area of the stage to change its starting position when it is

not moving.

If you look below the stage at the sprite corral, you’ll notice that the selected area looks the

same as the grey arrow on the stage, and is labeled as sprite. The triangle you’ve been moving

around is referred to in SNAP! as a sprite. You can create more sprites by pressing the button

with the white arrow directly under the stage and above the sprite corral.

4

You’ll notice that when a new sprite is created, the scripting area becomes blank. This is

because each sprite in SNAP! has its own scripting area which controls the sprites behavior.

You can therefore create scripts for each sprite on the stage to make them each act different

when the green flag is pressed or when other hat block conditions are met.

Also in the sprite corral is a white rectangle labeled Stage. While the stage cannot be scripted to

move around or anything, you can still add scripts to it to allow for more advanced functionality

in your project.

C. The Tool Bar and Other Options

Right above the scripting area are three tabs of interest. The currently selected one labeled

Scripts indicates that the scripting area will contain user created scripts to control the sprite’s

behavior.

The Costumes tab allows you to change the image that represents the sprite, either by drawing

it yourself with the brush button, or by uploading a picture from the web or your computer by

dragging and dropping it onto SNAP!.

The Sounds tab lets you import a sound for your sprite in a similar drag-and-drop fashion,

which can then be played with a command block from the Sound section of the block palette.

The tool bar at the very top of the SNAP! environment allows for additional project management

and options. The button with the dog-eared page lets you create a new project, open an old

project or example project, save a project, import or export the project or blocks from and to xml

files, and load in additional tools, libraries, costumes, and sounds. The button with the cloud

let’s you login/sign up for a SNAP! account, log out, or change your password. Finally, the

button with the gear let’s you change various options for your project.

The three buttons at the very right of the tool bar are the green flag, which starts any scripts for

sprites that are under the appropriate hat block, the pause button, which pauses all script

5

execution for the sprites and the stage (and changes to a yellow play button to resume script

execution), and the stop button which completely halts all script execution.

(Note: a more extensive breakdown of SNAP! and it's various components and features can be

found at http://snap.berkeley.edu/SnapManual.pdf. Additionally, SNAP! comes with several

example projects that can be opened from the tool bar options. These example projects

illustrate some possibilities that the SNAP!’s drag and drop programming can create, and you

can edit these examples by dragging your own blocks in!)

Now that we’ve briefly outlined how to use SNAP!, we can begin creating our Flappy Bird

clone!



6

II. Starting Snappy Bird: Making the Bird

We’ll first focus on creating the titular bird himself, and his movement. After making a new

project in SNAP!, make sure the sprite is selected in the sprite corral (it is by default). We’ll let

this first sprite be our bird for this game, and so all the scripting for this section will happen in

this sprite’s scripting area.

If you’ve played Flappy Bird before, you may remember that he flies through the air, controlled

by the taps of the player. Each time the player taps the screen, the bird flaps up a little bit in the

air. When he is not flapping, the poor little guy falls until he hits the ground.. We’ll try to recreate

that vertical movement here.

(Note: Before we go any further, go ahead and turn on “Prefer smooth animations” in the

menu you get from clicking the button with the gear on the tool bar. This will help the game run

the same for faster or slower computers and make the numbers we use for the physics of the

game be more consistent)

A. Gravity

The first thing that we’ll script is gravity. When the bird is in the air, we want him to constantly

fall until he hits the ground. Because we want gravity to start when the game starts, we’re going

to put all of our blocks for this under the hat block that waits until the green flag is pressed to

start the game. Locate the hat block that is labeled “when green flag clicked”, which can be

found under the Control section of the block palette area, and drag it to the scripting area.

Gravity is not a single, one time movement, but a slower process that happens constantly. In

order to set this up, we can select a forever loop block from the Control section and snap it to

the bottom of our hat block. This will make whatever blocks are put inside of the forever block

repeat over and over again until the game stops.

Now, in order to actually make the bird fall to gravity, we can just put a single motion block in

the forever loop. If you look at all the blocks from the Motion section, you’ll want to find one that

will move the bird downwards.

Because the first motion block labeled “move 10 steps” moves a sprite forward, and not down,

it’s not appropriate for this situation. The block that we want to use instead is the one labeled

“change y by 10”, because that will ensure that the change in position of the bird only happens

on the y-axis (which corresponds to vertical movement). Drag that block inside of the forever

loop, and change the 10 to a -5 (by clicking on the number 10 and erasing it and rewriting -5 in

the box) to make gravity pull the bird down slowly, not up. Your script so far should look like the

following:

7

Green Flag Script for Bird

If you now click on the green flag, you will see the sprite fall down below. While this is a good

start, there are a few problems: when you stop and start the game again, the sprite doesn’t

return to its original position, and the sprite doesn’t stop falling when it hits the ground..

In order to fix these problems, we just need to add a few more blocks. In order to make the

sprite start at a specific position every time the game starts, we just need to add the motion

block labeled “go to x: 0 y: 0” right before the forever loop.

Now, in order to make the sprite stop falling when it hits the ground, we should take a second

and think about how gravity works. Right now, we’re making the sprite constantly fall by 5 units.

However, we want the sprite to only fall if it is currently in the air, and not on the ground.

When we only want something to happen (the sprite to fall) when a specific condition is true (the

sprite is in the air), we have to use a control block that is labeled if. This if block should check

to see if the y position of sprite is greater than -170 (which means that it is in the air), and only

if that is true should the sprite fall down.

With these additions, your script should now look like this:

Green Flag Script for the Bird

The green comparison hexagon can be found under the operators section of the block

palette, and the y position oval can be found under the motion section.

8

B. Flapping and Player Input

In the mobile Flappy Bird game, the player taps the screen in order to make the bird flap

upwards. Because we are making our game in SNAP! for the computer and not for the phone,

we’ll let the player press the up arrow on their keyboard to make the bird flap instead of

tapping.

In order to make a script that happens each time the player presses the up arrow, we’ll have to

drag down a new hat box from the control section of blocks. The hat box we want is initially

labeled “when space key is pressed”. After dragging that to your sprite’s scripting area, you

should click the drop down menu and select the up arrow from the menu (or keep it at space, or

whatever key you want to control the bird’s flapping).

All we want to add here is a “change y by 50” block in order to let the sprite fly up a little bit

every time the arrow key is pressed. The small script for this can be seen below:

Up Arrow Script for Bird

For the finishing touches on our bird, go ahead and drag the “snappert.png” image from the

images folder provided with this tutorial into the sprite’s costumes so that your sprite actually

looks like a bird. While the bird isn’t nearly perfect yet, it’s good enough for us to move on to

another part of the game before coming back and finishing it.

(Note: Everything that the document has gone over so far is included in the snappybird_0.xml

file in the tutorial_xml folder, and can be imported from the tool bar)

Import an xml file

9

III. The Background and the Ground

In the original Flappy Bird, the blue sky and a skyline and forest is seen unmoving in the

background, and the ground moves beneath the non-existent feet of the bird.

A. Creating the Background

An easy way to make the background of our game look like Flappy Bird’s is to go to the

Costumes section of the Stage and drag and drop the “background.png” image from the

provided images folder. That’s all we need to do to the Stage for now.

B. Creating the Ground

In order to make the ground for our game, we’re going to create a new sprite (by pressing the

little white arrow button under the stage), and rename it “ground”. You can rename a sprite by

clicking it’s name above its scripting area when it is selected, using backspace and delete to

erase the old name (Sprite2), and writing the new name.

Add the “ground.png” image from the provided images folder to the ground sprite’s

Costumes. Because SNAP! creates new sprites in a random position and rotation, your ground

sprite won’t be straight and at the bottom of the screen like it should be. Fix this by adding the

“when green flag clicked” hat block, followed by the “point in direction 90” motion block

and the “go to x: 0 y: 0” motion block.

Green Flag Script for Ground

C. The Amazing Burrowing Bird

10

If you tried out these changes by clicking the green flag and playing your game, you might

notice that the bird seems to dig down into the ground instead of landing on it. This is because

we set the ground to be the bottom of the screen when we first made the bird, and so we need

to go back to the bird sprite’s scripting area and make a few changes to fix this.

First of all, we want to change the block that currently says “if y position > -170” to

“if y position > -80”. You can do this by clicking on the -170 and writing the new number.

Additionally, it might be a good idea to make the bird start a little higher in the air, since the

ground is closer now. Change the y value of the “go to x: 0 y: 0” block to 100. The entire

“when green flag clicked” script for the bird should look like this:


D. Moving Ground

Now that the bird is landing on our ground proper, we should probably make the bird start

moving forward instead of just flying over a single point on the ground.

When thinking about the bird and ground as real life things, it might make sense to imagine the

ground staying still and the bird itself moving forward throughout the air. However, if you’ve ever

played the original Flappy Bird, you might remember that while it appeared as if the bird was

moving forward, it’s x position on the screen never changed. To create the illusion of the bird

moving forward the ground itself in the game moves backward..

Go back to the ground sprite’s scripting area, and we’ll begin making it move backward.

Since we want the ground to be moving backward from the time the game starts to the time it

ends, we can add a forever loop (like exists in the bird’s script for gravity), after the two

command blocks already in the ground sprite’s “when green flag clicked” script. Inside of

this forever loop, we want to add the motion block to make the ground move -5 steps.


11

Starting the game with the green flag at this point though leads to some unusual behavior. The

ground is moving backward, but because of this it slowly disappears until there is no ground at

all under the bird.

Solving this problem requires a two step solution:

1. When the ground goes completely off the screen, move it back to the very right of the screen

so that it can come back into vision.

2. Copy the ground sprite and script into a new ground2 sprite, to fill in the resulting ground

gap from the first part of this solution.

If SNAP! allowed sprites wider than 480 pixels without scaling them down, we could just use

one double-width ground image and there would never be a gap in the ground. However,

because 480 pixels is the maximum sprite width for our game, we need to have a second

ground sprite to initially follow the first ground sprite, and then when the first one goes

completely off the screen and moves to the back, the second ground sprite is in front until it

goes off the screen too.

So first let’s do the first part of the solution. In order to do that, we’ll add an if control block

inside of the forever loop to “check if the x position is less than -450”, and inside of that if

block “set x to 450”.


The second ground sprite for the next part of the solution will have almost an almost identical

script as the first ground sprite. Instead of making a new sprite and having to drag and drop all

the same blocks, we can instead just duplicate the first sprite.

12

Duplicating the Ground Sprite

After duplicating the ground sprite, edit the ground2 sprite’s script so that the block “go to x: 0

y: 0” reads “go to x: 450 y: 0”.

Green Flag Script for Ground2

If you play your game now, you should observe the illusion of a single ground moving under the

flapping bird!



13

IV. Pipes and Variables

Now that we’ve got the bird and the ground, there is only one major element that is missing

from our game: the pipes. The green pipes that look like they were copy and pasted from Super

Mario Bros. provide an obstacle course for the bird to maneuver through as he continuously flies

onward.

The pipes move backward at the same speed as the ground, and we will have at most three

different pipe sprites on the screen at a time. Because they move backward just like the

ground, and because we need a constant flow of pipes to provide obstacles for the bird, the

pipe sprites will be scripted and created very similarly to how we scripted and created the two

ground sprites.

The easiest way to create the first pipe sprite is to duplicate the ground2 sprite, and then go

to the Costumes and drag and drop the “pipes1.png” image from the images folder. It might

be convenient to then rename this sprite to “pipes1”.

A. Creating a Variable

If you started the game after creating your pipes sprite, you might notice that while the pipes

sprite does provide move backwards and repeat, the bird can currently fly through it without

harm. This contrasts to the behavior of the original Flappy Bird and what we actually want: when

the bird touches any part of the green pipes instead of flying through the gap, the game should

stop and the bird should fall to the ground, unable to fly anymore.

In order to add this “game over” state, we will need to make a variable. In most programming

languages, a variable is something like a container which can hold a value. SNAP! has some

built in variables that we’ve already used, namely x position and y position. These variables

contained the value of the x and y coordinates of whichever sprite we were using them, and

were used to make sure the bird only fell to the ground when it was in the air, or to make the

ground or pipes sprites move to the right edge of the screen once it was all the way to the left.

To make a new variable in SNAP!, click on the Variables section of the block palette, and click

the grey button at the top of the section saying Make a variable.

14

This will open a dialogue box like the one above. In the text area, write “game over” to indicate

the name of the variable, leave “for all sprites” selected, and click OK. “For all sprites” just

means that the variable you’re making will have the same value for every sprite, and won’t have

to be made for every sprite (like x position or y position, which is unique for every sprite). You

should see a little oval block that’s labeled game over in the variable block palette now.

When the variable is created like this, it has no initial value. We want the game over variable to

be used as an indicator to say whether the game is or isn’t over. In programming, variables

which have a yes or no value are called booleans, and can have either the value true or false.

We want game over to initially be false when the game starts, so to do that you can create a

when green flag clicked script for Stage. Then, drag the block set _ to 0 from the Variables

section of the block palette, select game over from the drop down menu, and drag over a false

hexagon from the Operators section of the block palette in place of the 0. The script should

look like this:

Green Flag Script for Stage

B. Collision Detection

15

So when do we want the game to actually be over? In Flappy Bird, two conditions result in the

game being over and allowing for no further player input:

1. When the bird falls on the ground

2. When the bird touches with a pipe

The first case is easy enough to add to our existing script. We already have an if block in the

bird’s green flag script that checks when the bird is in the air. However, because we want to set

game over to true only when the bird is not in the air, we have to change our if block into an if,

else block, and only set game over to true in the else part of the block. The script for the bird

will look like this so far:


Now, for the second condition, when the bird is touching the pipe, we need to add another if

block to our bird’s script. This one will using the blue hexagon that reports back whether the

bird is touching pipes1. The full script will look like this:


16

C. Game Over, Man

So the game sets the game over variable to true at the appropriate time, but even when we do

that the bird still moves forward and can fly! That’s obviously no good, so we need to make it so

that the bird only moves forward (which corresponds to the pipe and the ground moving

backward) and the bird can only fly when game over is false.

First off, let’s stop the bird from flying when game over is true. Try to do this yourself by

modifying the when up is pressed script for the bird, and testing it by playing your game. A

working script should look something like this:


The part of the script above that says “not game over” is the same as a checking if

“game over = false”, in SNAP!’s language.

Now that the bird can no longer fly when the game ends, we need to make it so that the ground

sprites and the pipes do not move when it’s game over. Try to change the scripts of ground,

ground2, and pipes1 by using an if block like above to make them only move when it’s not

game over. Working scripts should look something like this:

Green Flag Script for Ground Green Flag Script for Ground2 Green Flag Script for Pipes1

Cool! It looks like everything is working so far. Obviously there is a lot we could improve on and

we will work on that soon, starting with making the gravity and flying a lot less jerky and more

like actual physics.

17



18

V. Advanced Flapping Functionality: Velocity and More Pipes

Right now, our game is functional, but the way the bird flies and falls is a little weird. The bird

falls at a constant 5 units every step in the loop, and every time the player presses the up

arrow to fly, the bird immediately jumps up by 50 units. The goal of this section is to make the

gravity working on the bird act more like gravity, and making flying more like flying.

In Flappy Bird, much like in real life, the bird has a thing called velocity. Velocity is kind of a

fancy word for speed, except for instead of referring just to speed it also refers to direction. For

example, 50 mph north is a different velocity than 50 mph south, although they are the same

speed. We can create our own velocity variable for the bird sprite in our game in order to

control the vertical speed and direction of the bird. Go ahead and create a new variable, named

“velocity”, for only the bird sprite.

(Note: if you want it so custom variables are not shown on the actual game stage itself, you can

click the little check box to the left of the custom variables in the Variables section)

A. Velocity: Modifying Bird Scripts

Now that you have made your velocity variable, you’ll have to do a couple of things to use it to

control physics in the bird sprite’s scripts. The list of things to do is as follows:

1. At the beginning of the green flag script, “set velocity to 0”

(This is so the bird doesn’t fly upward or fall really fast at the beginning of the game)

2. Modify “change y by -5” to “change y by velocity”

(This is so the falling of the bird is controlled by the velocity, and not a constant number)

3. Above the block you changed in step 2, “change velocity by -1”

(This is so gravity slowly increased the speed at which the bird falls to the ground)

4. In the up arrow pressed script, replace “change y by 50” with “set velocity to 10”

(This is so we actually use the velocity of the bird when flying up instead of just

immediately jumping up. This will make the bird go upward when the up arrow is

pressed, and since gravity is slowly making the velocity of the bird smaller, the

bird will have a smooth flying and falling path)

19

Green Flag Script for Bird Up Arrow Script for Bird

The addition of the velocity variable and the above modifications to the scripts allow the bird to

have a more natural and more satisfying vertical movement. Play around with the game so far,

both by just playing the game and by modifying some of the numbers acting on the velocity

variable to see how it affects the bird’s movement.

Let’s make a couple more additions now to make the rest of our bird’s scripts work with the

velocity nicely. If you played the game after the latest additions, you might notice that the bird

very slightly sinks into the ground sometimes when falling too fast. We can fix this by making

sure that the bird’s y position is set to -80 when it touches the ground in the Green Flag

Script. One last addition to make to the Up Arrow Script for the bird sprite is to make it so the

player can’t continuously fly above the screen and avoid all the pipes like that. Adding this

change to the code finishes up the scripts so that they look like this:

20

Green Flag Script for Bird Up Arrow Script for Bird

(Note: the go to front block at the top of the Green Flag Script for Bird here just makes it so

that the sprite for the bird is always drawn over the sprites for the ground and the pipe, so it

doesn’t look like the pipe is covering the bird when he runs into it)

B. Pipes on Pipes on Pipes

Now that the physics of the bird is a little better, we’ll focus on making the pipes more interesting

too. Currently, there is only one set of pipes on the screen at a time, and it always is the same

height. Let’s instead make it so there are at most three pipes sprites on screen, and make it so

their heights change every time they wrap around to the right side of the screen.

Before we do anything, go ahead and change 450s in the “if x position < -450 then set x to

450” to 300s, so that when we add more pipes sprites in a second, they can be evenly spaced.

Secondly, go ahead and add the images “pipes2.png” and “pipes3.png” to the Costumes of

the pipes1 sprite. This will make it so we can alternate between these three costumes to give

the pipes1 sprite a different height.

Now that we have these three costumes at our disposal, let’s add the Looks block labeled

switch to costume _ to the beginning of the pipes1’s green flag script. This block lets us

switch to a costume from the drop down menu (pipes1, pipes2, pipes3). But we can also put in a

number between and including 1 to 3, and it will then select the costume that corresponds to

that number, because SNAP! is smart like that.

21

It would be neat then if we can use that ability to make it so the pipe sprite changes to a

random costume, instead of a preset one. In order to do that, we just have to drag over the

block pick random 1 to 10 into the spot where the drop down menu is, and change the 10 to a

3 (since we only have 3 different costumes). Duplicate that same complete block and drag it into

the section of the script that makes the pipes go to the right edge of the screen when it has

gone too far left, and the complete script should look like this:

Green Flag Script for Pipes1

Now we have a somewhat more dynamic obstacle course for our bird. In order to make things

even more challenging, we will duplicate the pipes1 sprite into two other sprites: pipes2 and

pipes3. Change the 450 in “go to x: 450 y: 0” for the following two sprites to 650 and 850

respectively so that all the pipes will be a little bit spaced out. The code for the two duplicated

sprites will be almost identical to the first now, and will look like the following:

22

Green Flag Script for Pipes2 Green Flag Script for Pipes3

All of our pipes are in place, but if you’ve tried playing your game at this point, you might have

noticed that the bird is able to freely fly through 2 out of 3 of our pipes. That’s not really very

good. The reason that this is happening is because the bird is only checking to see if it’s

touching pipes1. We need to extend that so that it’s checking to see whether it’s touching

pipes1 or touching pipes2 or touching pipes3. The corrected script for the Bird with these

modifications looks like this:


23

Now that we’ve got a fully-fledged physics system for our bird, and a constant flow of pipes of

random height, all the required functionality to play the game exists and it could be pretty much

considered a complete game. The next section will go over adding additional features to make

the game a little prettier and interesting, but will not add anything that really changes how it’s

actually played.



24

VI. Advanced Flapping Features: Rotation, Sound, and Score

Our game is pretty much finished, but there are a few additional things we could add to make it

a bit nicer to play with. The first of these we will focus on is rotation.

A. Rotating the Bird with Velocity

Currently, the bird remains pointed straight ahead during the entirety of the game. Wouldn’t it be

neat if, like the original Flappy Bird, he sort of pointed up when the player pressed up to fly, and

then sort of moved to pointing down as he fell?

It’s fairly simple to implement this, since SNAP! has a built in block to make a sprite point in a

certain direction, and since we already have a velocity variable that keeps track of whether

the bird is moving up or down for us. Since we want the bird to be pointing straight ahead (90

degrees), when velocity is zero, and since we want the bird to be pointing slightly up (less than

90 degrees) when moving up and slightly down (more than 90 degrees) when moving down, we

can achieve all of this by making the bird always point in direction (90 - velocity). The full

script with this addition looks like this:


25

B. Adding Snaps to Snappy Bird

So far our game is somewhat visually impressive, but has absolutely no audio feedback at all!

Let’s change this by making the bird make a snapping sound whenever the player presses the

up arrow to fly.

You can start first by importing the FingerSnap sound from SNAP!’s built in library to the bird

sprite. Do this by selecting the Sounds option from the first tool bar menu, and selecting

FingerSnap.

Now, you’ll want to drag over the Sound block labeled “play sound _” to the bird’s up arrow

script, and select FingerSnap from the drop down menu of that block. The complete script now

looks like this:


Additionally, let’s add a sound to play whenever the player runs into the ground or the pipes and

loses the game. Pick a sound of your choosing from the SNAP! library or upload one of your

own, and add blocks to play that sound only if not game over. Add these blocks right before

the parts of the bird script that set game over to true. The ever-growing green flag script of the

bird should look like this now:

26


C. Scorekeeping

One last thing that is missing from making our game perfect is an indicator of how well you’re

doing. The original Flappy Bird has a big number in the background indicating how many pipes

the bird has passed. Let’s make our own variable called score to keep track of this for our

game. Do this now, and make sure that the score variable is for all sprites.

Now, we don’t really have to make anything to display the score, because SNAP! has that built

in variable shower, but we do have to add blocks to scripts to make the score actually count the

number of pipes we’ve passed. Firstly, we need to go to the Stage sprite and add set score to

0 to it’s green flag script. This is the resulting script:

27

Green Flag Script for Stage

Now that we are assured that the score always begins at 0 at the start of every game, we need

to make the bird passing a pipe change the score by 1. While it may make intuitive sense to do

the script for checking if a bird passed a pipe in the bird sprite’s green flag sprite (especially

since that’s also where we do collision detection to test for game over), it’s actually easier to do

this scripting in the green flag script of the three pipes sprites.

How you can do this is by adding an if block inside each one of the pipes scripts (positioned

at right after the whole if x position < -300 block), that checks if x position = 0 (which is the x

position that corresponds to the x position of the bird). Inside of this if block, add a command

to change score by 1. Once you do this for all three pipes sprites, they should look like this:

Green Flag Script for Pipes1 Green Flag Script for Pipes2 Green Flag Script for Pipes3

D. Waiting to Start the Game

One more one last thing: if you’ve played the game so far, you might have realized that our bird

starts immediately falling, and so it can be kind of difficult to start playing if you don’t have your

hand already poised over the up arrow key. We should probably address this problem by

28

making a game start variable, much like our game over variable, that will wait to start the

physics of the game until the player presses the up arrow for the first time.

In order to achieve this, the following must be done:

1. Create a game start variable for all sprites

2. In the Stage’s green flag script, “set game start to false” at the beginning, and then at

the end, “wait until game over” and “set game start to false”

3. For every pipes sprite’s green flag script, change “if not game over” to “if not game

over or game start”

4. Before the forever loop block in the bird’s green flag script, “point in direction 90”,

“think ‘Press up to Snap’” and “wait until game start”.

5. At the very beginning of the bird’s green flag script’s forever loop, “think score”

6. In the bird’s up arrow script, “set game start to true”

Green Flag Script for Stage Up Arrow Script for Bird

29

Green Flag Script for Pipes1

(Note: Remember to change same area for Pipes2 and Pipes3)

Top of Green Flag Script for Bird

(Note: the rest of the script not shown has no changes to it from before)



VII. Finishing Remarks

Well, there you have it! It’s not a 100% clone of the original Flappy Bird, but it’s pretty complete

and hopefully is fun enough to play. Feel free to play around with the code at your leisure,

adding or removing features. While what you do with the game from here is completely up to

you, some additional ideas to add to your game are:

1. Adding different obstacles for the bird

2. Adding powerups for the bird

3. Adding a temporary high score (remembered until the page refreshes or browser closes)

Or feel free to add anything else you might think of!! Good luck, and happy Snapping!

snabby bird tutorial - edl · this first sprite be our bird for this game, and so all the scripting...

Documents