fbpx

Flappy Bird – Pipes

Reading Time: 8 minutes
In the previous lectures of our Flappy Bird tutorial we have added the background, the bird, the gravity and the touch function. So our bird can fall down, and fly back to the air.

In this lessons we are going to add the pipes, what we have keep off from the way of our bird. We will have a top and a bottom pipe. Between them there is a gap, where the bird has to fly. Of course horizontally there is also a distance.

The closer are the pipes to each other the harder going to be our Flappy Bird game.

Step 1 – The gap vertically

Before the draw of the pipes, we have to define the gap.

As we talked about earlier, we have a gap vertically between the pipes, where we have to pass the bird. The farther are the top and the bottom pipes from each other the easier the game goig to be.

In the previous lectures we created the size variable.


AndroidManifest.xml

The size will be the 10% of the minimum of the width and hight of the screen. We can get it directly from the Gdx library.

The gap variable will get the value in the create method, directly after the size variable. In our case we will have the gap 4 times bigger than the size. Our bird has the this size as the width and hight, so the gap going to be 4 times bigger, than our bird.

Step 2 – The textures for the pipes

As we have added the background and the bird, we are going to add 2 textures for the top and bottom pipes as well. In the FlappyBird::class we will initialize them, and only in the create method the are going to get the images, called:

      • topPipe.png
      • bottomPipe.png

After that we will move the start of the batch at the beginning of the render method. We do this, so we don’t have to finish the batch and start it again because of the draw of the pipes. We are going to draw the 2 pipes when the game is active, so if the gameState is not 0 in the render method.

Top pipe

First we are going to draw the top pipe, here you can see the source code and it needs some explanations.


top pipe
    • topPipe – it is the Texture of the topPipe.png
    • (Gdx.graphics.width/2 – size) – The x position of the pipe. This means, that it is going to in the middle fo the screen. We wont devide the size, because the width going to be the size multiplied by two.
    • (Gdx.graphics.height / 2 + gap / 2) – The y position of the pipe. Again the half of the height of the screen and the half of the gap.
    • size*2 – To have a twice as wide as our bird.
    • (Gdx.graphics.height / 2 – gap / 2).toFloat() + (Gdx.graphics.height – gap – gap/2)*0.5f – Later on this gap is going to be higher or lower then the center during the game. So we are going to prepare this change a little bit. It means that the top and the bottom pipe going to hang out of the screen with the half size of the possible move of the gap.
Bottom pipe

For the second time we are going to draw the bottom pipe, here you can see again the source code.


bottom pipe
    • bottomPipe – it is the Texture of the topPipe.png
    • (Gdx.graphics.width/2 – size) – The x position of the pipe. This going to be the same like the x position of the top pipe.
    • 0f – (Gdx.graphics.height – gap – gap/2)*0.5f – The y position of the pipe. To have to pipe again out of the screen with the size of the move of the gap, from the 0 position (it is the bottom of the screen) has to be subtracted.
    • size*2 – To have a twice as wide as our bird.
    • (Gdx.graphics.height / 2 – gap / 2).toFloat() + (Gdx.graphics.height – gap – gap/2)*0.5f – The height has to be the same like the top pipe.

Step 3 – Pipe offset

The position of the gap has to be different during the game. To have this in our game, we will define the maximum offset, and a random number generator.

Maimum pipe offset

We are going to have the maximum offset in a variable, called maxPipeOffset. We define it in the FlappyBird::class.

var maxPipeOffset = 0f

… and in the create method we are going to define the value of it.

maxPipeOffset = (Gdx.graphics.heightgapgap/2)

Random generator for the offset

In Kotlin, like in Java we can define a random number generator, what’s going to get back a number between 0 and 1. We will add the generator again next to the maxPipeOffset in the FlappyBird::class

var randomGenerator: Random? = null

… then in the create method.

randomGenerator = Random()

Distance vertically

We have the maximum offset for the top and the bottom pipe, and the random generator as well. Still they won’t get back separetly the horizontally distance between the pipes. To have this, we need one more variable, called distVertBwPipes. It goes again to the FlappyBird::class.

var distVertBwPipes = 0f

In the render method, every time when we touch the screen, a new number has to be generated, so we are going to have this line of code in case if the gameState is not null.


vertically distance between the pipes

We have to substract 0.5f to have only maximum the half of the offset, because we are going to add it to the y position of the pipes.


pipe offset

Step 4 – Move pipes to the left

So basically we have in our Flappy Bird game pipes, and they are moving from the right to the left. To have this move during the flight of the bird, we have to have more pipes. We won’t define infinite number of pipes, only 4 is totally enough 🙂 How can we do it? 😕

The pipes are coming from the right side of the screen, and they are going to move to the left side. When the pipe is out from the screen, we are going to set the x coordinate to the right after the 3. pipe. Of course all of the pipes are moving to the left.

This solutions is very simple, we won’t use boilerplate code, and it does look like that the bird is flying forward.

Declare the variables

So first of all, we have to define 4 more variables.

  • val pipeVelocity = 4 – The velocity of the pipes.
  • val numberOfPipes = 4 – We will have 4 pipes.
  • var pipeX = FloatArray(numberOfPipes) – Every pipe will have different x position, what we will store in a FloatArray.
  • var distHorBwPipes = 0 – We have to define the horizontal distance between two pipes also.
Initialize the variables

The velocity and the number of the pipes won’t be changed during the game, so they are defined as a val.

Because we have now 4 pipes, we have to modify the distVertBwPipes and it is going to be a FloatArray as well and the size of will be the number of the pipes, so 4.

var distVertBwPipes = FloatArray(numberOfPipes)

In the create method we are going to set an initial value for the horizontal distance between the pipes and for the x positions of all the pipes.

distHorBwPipes = Gdx.graphics.width * 3/4

The horizontal distance will be the three-quarters of the width of the screen. You can play with it. The closer are the pipes to each other the game going to be harder, but be careful to still have a playable game 🙂


for loop in the create method

In the for loop above we are going to set the x positions of the pipes. The first pipe has appaer only when we touch the screen. In this case it is going to be next to the screen in the invisible area. The next pipe goes to the right of the first one and so on.

Set the vertical distances

We have already 4 pipes. This 4 pipes has to have different x position for the gaps. So we have to change the distVertBwPipes variable to also a FloatArray, and the size is again the number of the pipes.

var distVertBwPipes = FloatArray(numberOfPipes)

In the same for loop, what defined now, we are going to set randomly the x positions. So now the for loop looks like this.


for loop in the create method
Add the move to the render method

The last step is to add this move to the render method as well. To have it there, we are going to define a for loop again with the same conditions.

In the for loop we have to observe the positions. If the pipe has reached the left side of the screen, then it has to be moved to the right side after the last pipe.

We know, that the width of the pipe is size*2 and our pipe has to be dissapeared totally, when we move it to the last position.

pipeX[i] < -size*2

This goes to the if-statement. If it is not true, then our pipes have still not reached the left side of the screen, so they are moving to the left. To have this move we have defined the velocity of the pipe.

pipeX[i] = pipeX[i] – pipeVelocity

This line will move the pipes to the left way. Here we substract the speed from the current x position of the pipe.

Change the draw of the pipes

We are going to have the draw method for the pipes also in this for loop. They go after the if-else-statement.


the pipes inside the for loop

Step 5 – FlappyBird::class

If you couldn’t follow the description, then compare your source code, because here comes the whole source code of the FlappyBird::class.


the pipes inside the for loop

Questions

I hope the description was understandable and clear. But if you have still questions, then leave me comments below! 😉

Have a nice a day! 🙂

 


 

Click to rate this post!
[Total: 0 Average: 0]
Follow and like us:

3 thoughts on “Flappy Bird – Pipes”

Leave a comment

stay informed!

Subscribe to receive exclusive content and notifications