Getting Started
This tutorial can be used to recreate the iphone app flappybird using scratch 2.0. There are a number of programming techniques that you learn when creating this game. To get started, you will need to locate the graphics below. They are all png files and most have transparent areas on them. To make it easier, these graphics are placed in separate folders called, birds, backgrounds, poles etc. General graphics can be found in the root folder: M:\Central Resources\Student Subject Areas\Computing\flappybird
Getting Started Firstly, add one of the backgrounds to the Stage Then create 3 new sprites from the location above; one bird, one pole and one bar. You can delete the default Cat sprite Place the sprites on the screen in a similar position as I have on the right.
Note: Whenever code (script) is shown in this tutorial the sprite that contains it is always shown in the top right corner next to the code.
1
Bouncing Bird We will setup the spacebar so that when it is pressed, the bird jumps. However, to make it like the iphone game, it will need to go up slowly and then speed up, then stop and slowly come down and speed up as it does.
Going up On the Bird sprite, add the space key trigger. Change the Y coordinate by around 10, then 20 and lastly by 10. This will give the impression that it speeds up and slows down while going up. You may need to adjust these numbers to make it look right. Of course, add some Waits so that it slows it down enough to see it moving.
Adding Gravity As for coming down, it needs to look like gravity. To create a variable, choose Data section and press the button
Add the green flag event Set the variable down to 0 at the start Add a forever loop. Decrease the variable down by around 0.1 within the loop Lastly, change y by the variable down each time.
If you test it now it will just drop to the ground. You will need to set down to 0 when the spacebar Is pressed so that the amount that it drops resets to zero. Test that this works.
2
Animating Bird You may recall that the bird’s wings flap constantly. We need to replicate this.
Adding costumes The flapping of the wings is achieved by 3 costumes. Add the other 2 costumes to your bird Sprite. They should be central on the page. If you click on each costume in turn, you should see what the animation will look like. I have noticed a bug in scratch 2; Sometimes, when the graphic is imported, it is blank. If this happens just delete the costume and try again.
Changing costumes Add a separate green flag and a forever loop. Add a next costume command. Also add a wait so that you can see it change; Adjust this value to suit you.
Changing angle When the bird goes up it angles a little up and is level for a short while before angling down as it drops. I have it point in direction 800 when space bar is first pushed and then return to 900 afterwards.
While its dropping it needs to change its angle so when the drop down increases beyond say a value of -2 have it point to 1300 Add this code to the forever loop when the green flag is clicked 3
The Poles Moving Poles When we moved the bird, we used the y coordinate. For the pole we need to change the x coordinate. Within the pole sprite you need to change the x coordinate by -1 around 400 times. Move your sprite to the right of the screen before you test it. Want it more difficult? Have the computer change x by -1.5 instead. But Do reduce the number of repeats to around 270 as 400 is too many. By setting x to 200 afterwards it will go back to the right automatically.
Now just add a repeat forever loop and set x to 200 at the start to complete it.
Changing the gap To change the gap to get through each time, we just need to change costume before it moves from the right. Firstly, add all the other costumes for the poles. Mix up the order to make the game less predictable.
Just add a change costume each time it starts.
4
Animating bottom bar This is very similar to the poles. Build the code below in the bar sprite.
When you hit the green flag you may notice that its behind the pole like my game above. This is not a problem as whichever graphic is picked up last comes to the front so just pick up the bar and move it a little to bring it to the front. Now for the tricky bit. We want the bottom bar to move a little to the left and then back to the start. As it has lines, it will give the impression that it is moving constantly. You will need to have it move at the same speed as your poles. The number of times in the repeat loop is basically a guess! After some trying I had it work with 23 repeats, however you may have to adjust this value. When you test it cover up the ends with your thumbs otherwise it will make you dizzy!
Tidy up time When the bars go past the background, we do not really wish to see them so its best to create a sprite to cover up the parts on the left and right of the screen. You can either create 2 black sprites and position the over everything or you can use a single graphic like the one that I have created. Create a new sprite and choose tidyup.png. Remember that if you move any other sprite After this, it will go in front on the blackouts. Just move the black bars occasionally to bring them back to the front. 5
Hitting the Poles When the bird hits a pole we need GAME OVER to appear. You could have a message appears, however to make it more authentic I created a png graphic for this. We will just need to have it appear and then hide it when the game is playing.
Game Over Create a sprite with gameover.png as its costume. Go to the code (scripts) for the bar and have it display this sprite when it touches the bird sprite. You need to have it broadcast that it has hit
To complete this you need to have code in the game over sprite that shows it when it receives the message. You also need to hide it when the green flag is pressed. Of course when it hits a pole we need to stop the user from hitting the space bar and jumping. So we can create a variable that we set to 1 when it hits and is 0 at all other times.
Have everything stop after a second delay by adding 2 commands
Disable space bar event Then we only allow the space bar to operate if this variable is 0. So add a question to the space bar event so that only operates when hit is 0.
Scoring Now for something a little more challenging. When the x coordinate of the pole sprite equals the x coordinate of the bird then we should increase a score variable by 1. Create a variable called score. Now add the question and if true change the score by 1. Don’t forget to reset the score to 0 when the game starts over.
6
Adding more bars To make the game usable we need to have more bars. The good this is that this is very easy as we can duplicate the bars that we have created so far. Right click over the Poles sprite and select duplicate. This will give you an identical copy. Unfortunately, this will not work yet as it has exactly the same timing as the original. So add a wait time of say 4 seconds straight after the green flag is pressed before it moves. You can also duplicate a third set of bars and add a delay of say 8 seconds to this one. You will have to test the game and adjust the delays so that you get an even spacing of bars as the game is playing.
7
Getting Started Firstly, add one of the backgrounds to the Stage Then create 3 new sprites from the location above; one bird, one pole and one bar. You can delete the default Cat sprite Place the sprites on the screen in a similar position as I have on the right.
Note: Whenever code (script) is shown in this tutorial the sprite that contains it is always shown in the top right corner next to the code.
1
Bouncing Bird We will setup the spacebar so that when it is pressed, the bird jumps. However, to make it like the iphone game, it will need to go up slowly and then speed up, then stop and slowly come down and speed up as it does.
Going up On the Bird sprite, add the space key trigger. Change the Y coordinate by around 10, then 20 and lastly by 10. This will give the impression that it speeds up and slows down while going up. You may need to adjust these numbers to make it look right. Of course, add some Waits so that it slows it down enough to see it moving.
Adding Gravity As for coming down, it needs to look like gravity. To create a variable, choose Data section and press the button
Add the green flag event Set the variable down to 0 at the start Add a forever loop. Decrease the variable down by around 0.1 within the loop Lastly, change y by the variable down each time.
If you test it now it will just drop to the ground. You will need to set down to 0 when the spacebar Is pressed so that the amount that it drops resets to zero. Test that this works.
2
Animating Bird You may recall that the bird’s wings flap constantly. We need to replicate this.
Adding costumes The flapping of the wings is achieved by 3 costumes. Add the other 2 costumes to your bird Sprite. They should be central on the page. If you click on each costume in turn, you should see what the animation will look like. I have noticed a bug in scratch 2; Sometimes, when the graphic is imported, it is blank. If this happens just delete the costume and try again.
Changing costumes Add a separate green flag and a forever loop. Add a next costume command. Also add a wait so that you can see it change; Adjust this value to suit you.
Changing angle When the bird goes up it angles a little up and is level for a short while before angling down as it drops. I have it point in direction 800 when space bar is first pushed and then return to 900 afterwards.
While its dropping it needs to change its angle so when the drop down increases beyond say a value of -2 have it point to 1300 Add this code to the forever loop when the green flag is clicked 3
The Poles Moving Poles When we moved the bird, we used the y coordinate. For the pole we need to change the x coordinate. Within the pole sprite you need to change the x coordinate by -1 around 400 times. Move your sprite to the right of the screen before you test it. Want it more difficult? Have the computer change x by -1.5 instead. But Do reduce the number of repeats to around 270 as 400 is too many. By setting x to 200 afterwards it will go back to the right automatically.
Now just add a repeat forever loop and set x to 200 at the start to complete it.
Changing the gap To change the gap to get through each time, we just need to change costume before it moves from the right. Firstly, add all the other costumes for the poles. Mix up the order to make the game less predictable.
Just add a change costume each time it starts.
4
Animating bottom bar This is very similar to the poles. Build the code below in the bar sprite.
When you hit the green flag you may notice that its behind the pole like my game above. This is not a problem as whichever graphic is picked up last comes to the front so just pick up the bar and move it a little to bring it to the front. Now for the tricky bit. We want the bottom bar to move a little to the left and then back to the start. As it has lines, it will give the impression that it is moving constantly. You will need to have it move at the same speed as your poles. The number of times in the repeat loop is basically a guess! After some trying I had it work with 23 repeats, however you may have to adjust this value. When you test it cover up the ends with your thumbs otherwise it will make you dizzy!
Tidy up time When the bars go past the background, we do not really wish to see them so its best to create a sprite to cover up the parts on the left and right of the screen. You can either create 2 black sprites and position the over everything or you can use a single graphic like the one that I have created. Create a new sprite and choose tidyup.png. Remember that if you move any other sprite After this, it will go in front on the blackouts. Just move the black bars occasionally to bring them back to the front. 5
Hitting the Poles When the bird hits a pole we need GAME OVER to appear. You could have a message appears, however to make it more authentic I created a png graphic for this. We will just need to have it appear and then hide it when the game is playing.
Game Over Create a sprite with gameover.png as its costume. Go to the code (scripts) for the bar and have it display this sprite when it touches the bird sprite. You need to have it broadcast that it has hit
To complete this you need to have code in the game over sprite that shows it when it receives the message. You also need to hide it when the green flag is pressed. Of course when it hits a pole we need to stop the user from hitting the space bar and jumping. So we can create a variable that we set to 1 when it hits and is 0 at all other times.
Have everything stop after a second delay by adding 2 commands
Disable space bar event Then we only allow the space bar to operate if this variable is 0. So add a question to the space bar event so that only operates when hit is 0.
Scoring Now for something a little more challenging. When the x coordinate of the pole sprite equals the x coordinate of the bird then we should increase a score variable by 1. Create a variable called score. Now add the question and if true change the score by 1. Don’t forget to reset the score to 0 when the game starts over.
6
Adding more bars To make the game usable we need to have more bars. The good this is that this is very easy as we can duplicate the bars that we have created so far. Right click over the Poles sprite and select duplicate. This will give you an identical copy. Unfortunately, this will not work yet as it has exactly the same timing as the original. So add a wait time of say 4 seconds straight after the green flag is pressed before it moves. You can also duplicate a third set of bars and add a delay of say 8 seconds to this one. You will have to test the game and adjust the delays so that you get an even spacing of bars as the game is playing.
7
