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 initialized – gameState = 0
- Game running – gameState = 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.
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.
(Gdx.graphics.width / 2 – size*3),
Gdx.graphics.height / 2 – size/2,
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.
I hope the description was understandable and clear. But if you have still questions, then leave me comments below! 😉
Have a nice a day! 🙂
- Udemy.com – Rob Percival: The Complete Android N Developer Course
- WikiPedia – Flappy Bird
- WikiPedia – LibGDX
- LibGDX wiki
- KotlinLang official documentation