fbpx

Teki – The restart and back buttons

Reading Time: 4 minutes
In the very last chapter we created the Game Over screen. When we fail the game, the gameState gonna be changed to 2, and the game will be finished. In this case the Game Over image pops up.

In this chapter we gonna add to this screen 2 buttons, the Restart and the Back buttons. When we touch on the Restart button, then we can try again the game. But when we select the Back button, then later on the Main Menu will be visible. Now the gameState will be changed to 0.

Step 1 – The Textures

Again we start the implementation with the Textures. This two lines go to the TekiTutorial::class.

var restart: Texture? = null

var backToMainMenu: Texture? = null

Then the two images in the render() method. 

restart = Texture(“restart.png”)

backToMainMenu = Texture(“back.png”)

Step 2 – The draw() methods

The call of draw() methods for the two images will be in the Game Over screen part of the gameState check. So, where we have implemented already in the very last chapter the GameOver image.

drawRestart()

First we will define this method. These circles, so the buttons, gonna be smaller then the control arrows during the game, but the shapes gonna be also circles.

The restart image will be at the left part of the Game Over text, and a little bit under of it.


drawRestart()
drawBackToMainMenu(xPos: Float, yPos: Float)

In case of the back arrow we will have 2 arguments. Later on, when we will add the High Score screen, we will use the same image and method to draw the back arrow to the screen. In that case the arrow gonna be in a different place. So that’s why we will have the X and Y positions as the arguments of this method.


drawBackToMainMenu()

Run the game, and If you have done everything correctly, then the two arrows should be under the Game Over text, when you fail the game, but still they don’t do anything, if you touch them.

Step 3 – Touch of the Restart button

To have any reactions when we touch the button, we have to create for it a shape. As we did in case of the control arrows, here we will define also a Circle. For the circle we have to provide the origion’s X and Y position and the radius.

If you calculate the value based on the image, then the circle should look like this.

val restartCircle = Circle(
    screenWidth-size*6+size*0.75f,
    size*3.25f,
    size*0.75f)

We gonna have here an observation of our touch, so we will use here again the justTouched() method what is provided by the GDX library.

Inside of the if-statement of the touch, we will have again one more if-statement for the contains() method, what will check the positions of the user’s tap on the screen. If the circle of the Restart button contains it, then we will get a log message on the Logcat.

After the log message we will set the gameState to 1. So it means, the Running game screen will be visible every time when the render() method executes.

Here we have to fire again the startTimer(), because inside the collision we stopped it.


touchRestartButton()

Step 4 – Touch of the Back button

Similarly to the touchRestartButton() method, in the touchBackToMainMenuButton() method we will define a Circle. The radius gonna be the same. The X and the Y positions, as we have talked about, depends on which screen is visible. In this case it goes at the right side of the Restart button, and also under the Game Over text.

When we touch the Back button the gameState has to be set to 0, so the Main Menu screen will be visible later on.


touchBackToMainMenuButton()

Step 5 – Call the methods

The last step is to call the methods when the game is over.


Call the functions

Run the app.
Hmm something wrong, when we try to restert the game.
It is, because Teki and the barriers wasn’t reset to the original status.

Step 6 – resetGame()

To have the begin status of all needed variables, we will define the resetGame() method in the TekiTutorial::class.

We have to think about what do we need to reset. 

    • The position of Teki (the Texture and the shape)
    • The state of Teki
    • The positions of the barriers (the Texture and the shape)
    • The velocity back to 12
    • The distance and the jumpDistance to 0
    • The boolean of jumpPushed and crawlPushed to false
    • The jumpVelocity

Thats all. 🙂


resetGame()

TekiTutoial

Doesn’t you game running as it should be? Download the whole source code from the link and check you code.

Download TekiTutorial

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:

Leave a comment

stay informed!

Subscribe to receive exclusive content and notifications