Flappy Bird – Game Over

The last part of the Flappy Bird tutorial has arrived. In the very last lesson we learned how to implement the collision detection. So know already when the bird’s circle overlaps the pipes’ rectangles.

In this lesson we are going to add the Game Over screen to the app. It means, that the game will stop when collision is detected, and the Game Over picture is going to be poped up.

So let’s get started. πŸ™‚

Step 1 – Game Over Texture

As we have done earlier, we will create again a new Texture for the game over image, so let’s define it next to the other ones directly in the FlappyBird::class

var gameOver: Texture? = null

… and also the initialization goes to the create method, again as we have then earlier.

gameOver = Texture(“gameover.png”)

What we have to do with the Texture is that we have to draw it to the screen. Before that we have to change the gameState a little bit.

Step 2 – New Game State

Until now we had two game states.

      • Game initializedgameState = 0
      • Game runninggameState = 1

For the Game Over screen we have to introduce the game over state.

      • Game Over gameState = 2

In the previous versions we checked if the gameState is not 0, but it is not enough already. So we have to change this, namly the first condition to
gameState == 1, then to
gameState == 0, and the last condition will be
gameState == 2.
So basically now the content of the if-else-statement is going to be the same.

Step 3 – Add the new game state

To continue the implementation, we have to figure out when the game has to be over.

      • When the bird’s circle overlap the pipes’ rectangels
      • When the bird reached the bottom of the screen.
Collision detection

We have defined the game state value, so now we have to change the code. First we are going to add the new gameState to the collision detection, so inside of the if-statement.

gameState = 2

Bottom of the screen

The second change goes to the acceleration of the speed when the gameState is equal to 1. There we have defined an if-statement, which checkes the y position of the bird. If it is not 0, then the bird should fly, otherwise the game has to be over. It means, that we are going to extend the statement with the else part. There we will set the gameState to 2.


Game over, when the bird has reached the bottom of the screen
Modify the if-statement of the gameStateΒ 

It is important to have the correct modification, so I just give it to you. As we talked few lines ago, we have already the 3 states.


if-statement of the gameState

Into the gameState 1 goes the same code what we had when we have just gameState != 0.

Into the gameState 0 goes the justTouched method. If the screen is touched, then the gameState get the value of 1.

Into the gameState 2 goes the draw method of the Game Over image.

batch!!.draw(
Β  Β  gameOver,
Β  Β  (Gdx.graphics.width / 2 – size*3),
Β  Β  Gdx.graphics.height / 2 – size/2,
Β  Β  size*6,
Β  Β  size)

The image has to be center horizontally and also vertically. To get this we will divide the width and the height of the screen. The width will be 6 times bigger then the size variable. The height will be equal to the size. We have to subtract the half of the width of the image from the horizontal position and again the half has to be subtracted from the height.

The next touch

What has yet to be here, when we touch again the screen, is to restart the game. So there we will have this lines.


if-statement of the justTouched

As you can see we will set the gameState to 1 and before that we have the startGame method.

Step 4 – startGame method

In this mehod we will set back to the original value the birdY, the pipeX and the distVertBwPipes mutableLists. We have have already defined them in the create method, so we are going to move birdY initialization and the for loop to the startGame method.

We have still 3 variables, what we have to reset.

      • velocity = 0f
      • score = 0
      • scoringPipe = 0

Step 5 – The whole FlappyBird::class

Finally, if you are a little bit lost, then here you can check the final source code of the FlappyBird::class.


if-statement of the justTouched

Closing remarks of the tutorial

I hope you enjoyed this tutorial. πŸ™‚ It is a good start of you want to get to have beginner knowledges, how does the Gdx library works.

We have learned how to add images to the screen and to identify their positions and how to have moving sprites.Β  We have added a tri-state mechanism to the game also, which allows us to start, play and finish the game.

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! πŸ™‚

 


 

Sources

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

6 thoughts on “Flappy Bird – Game Over”

  1. perfect i like it, actually i’m tired of kotlin but with your tutorial i’m happy and i wanna learn more , thanks for tutorial sir ❀️❀️

  2. and i just have a question , my bird can fly to the sky and When it hits the edge of the sky, nothing happens and it goes higher , i think i forget a line code because The Game Over message is not displayed

    1. This tutorial doesn’t handle the edge. That’s why you can fly above the pipes πŸ˜‰
      …. but I think it isn’t easy to fly between the pipes so high πŸ™‚

Leave a Reply

Your email address will not be published. Required fields are marked *