Screen Scrolling in Flappy Bird

Screen Scrolling is a powerful concept in gaming. Most of the games nowadays include this feature. This blog will make us understand Screen Scrolling in Flappy Bird. Flappy Bird, as we all know, is a popular game on the Internet. When you play the game, it appears as if the bird is moving forward. In actuality, the screens are moving backward giving the desired effect. So, let’s understand how this can be done using Scratchscratch.mit.edu.

Understand Screen Scrolling in Flappy Bird Game

We are creating the Flappy Bird game in Scratchhttps://skoolofcode.us/student-showcase/showcase-preview/13. For this, we need to follow the steps mentioned below:

Step1:

First of all, we need to choose a bird sprite of our choice. Also, we need to create backdrop sprites. These sprites look like backdrops. This is important as we know that it’s not possible to move a backdrop, but it’s possible to move sprites.

We should create one backdrop sprite initially. While creating backdrop sprite, use the rectangle tool to create pipes. These can be the obstacles in the way of the flappy bird, while it’s trying to reach the destination.

Step2:

In this step, we will create the start screen of the game. You can download any flappy bird game image from the internet. Then you can add two button sprites.

  • Play button: This button is added to reach the game screen.
  • How to Play/ Help button: This button will take you to the Instructions screen where you can guide the player on how to play the game.
  • On clicking the Play button, the following code will be executed:
  • When the button sprite is clicked, we should broadcast a message “start game” which will take us to the game screen.

Step3:

Now, let’s see how the bird moves. The bird will be continuously falling. The player can use the space key to move the bird up. This can be done with the following code.

Explanation of the above code:

  • For the Screen Scrolling effect, we create a scrollx variable which we will use to move the backdrops backwards. Let’s set its value to 0 initially.
  • When the broadcasted message “start game” is received by the bird sprite, the bird should go to the front layer (as the backdrop sprites should be in the back layer).
  • Then forever the value of scrollx should change by a negative value, here we change it by -7.
  • For moving the bird up, we use the block “if keyspace pressed”, then change the y coordinate by 7. Also, change the costume to the next costume.
  • Else if the key space is not pressed, the bird will keep falling. For this, we change y by -5.

Step4:

Now, let’s understand how to code for the backdrop sprites to give a Screen Scrolling effect. The backdrop shows when it receives the start game message. Then forever set its y coordinate to 0 as only the x coordinate will change. We set the x coordinate to a product of 480 multiplied by 0 (480 is the width of the Scratch stage and multiplying by 0 will give the result 0, so basically, we are adding 0 to scrollx (remember scrollx is continuously going negative), hence we continuously decrease the x coordinate, making Screen Scrolling happen).

Now, we can duplicate the backdrop sprite and then change the code a little bit. Instead of 0, we place 1. Likewise, create 5-6 duplicates and change the number from 1 to 2, from 2 to 3…

Now, you can run the code and check whether your Screen Scrolling is happening or not.

Step5:

In this step, we check whether the bird touches the pipe. We can accomplish this by using color sensing. So, if it touches the color blue, we should broadcast dead and stop other scripts in the sprite. This is done to make sure that the movement of the bird and the screens stop. The following piece of code explains this.

Color Sensing

Step6:

In the final step, if the bird reaches the Winning screen, the game stops.