The Main Menu screen will contain the name of the game, the Play, the Username and the High score buttons.
Also on this screen can the user change the username, but about this we are going to talk in a later chapter.
Step 1 – The Textures
For the title of the game, for the Play, Username and High Score buttons we gonna use Textures. It means in the TekiTutorail::class we will define 4 Textures.
var title: Texture? = null
var play: Texture? = null
var usernameButton: Texture? = null
var highScore: Texture? = null
As we have done with the other images, we are going to set for them the pictures in the render() method.
title = Texture(“tekiTitle.png”)
play = Texture(“playButton.png”)
usernameButton = Texture(“usernameButton.png”)
highScore = Texture(“highScoreButton.png”)
Step 2 – Draw the images
The Main Menu will be at the right side of the screen. The title will appear on the top, the buttons go above it.
For the 4 images we gonna define again 4 separate methods. These methods will be called from the render() method, when the gameState equals to 0.
To have the title at the top and on the right side, we gonna subtract the size from the screenWidth, and screenHeight.
The width will be 4 times the size, and the height 2 times the size. In this case the title won’t be streched.
In case of the buttons needs to be considered the real size of the images. If you use the size height for all of the buttons, then some of them will be streched, because of the “leg” of the ‘y’ and ‘g’ characters.
Because of this, we gonna add for the height of the Play button the 27% of the size.
It means between the buttons have to be enough space to tap them easily, otherwise it can happen that the user try to click on the Username button, but the game detect the a Play button click. This will definitely reduce the user experience.
Because we will have the chosen username in form of a text under the Username button, we have to give it a space. So the High Score button will be lower.
Run the app
If you run now the app, then you should arleady see the Main Screen extended with the buttons.
Also, when click on the Back button, in case you fail the game, you will see also the extended Main Menu screen.
Step 3 – The touch on the buttons
In this chapter we gonna talk about the touch motion. We will implement the touch for the Play button. So from the end of this chapter you can start the game by clicking the Play button. 😉
For the Username and the High Score buttons we will add only a log messages, so we can check if the touch is on the correct position and it is working.
Our task with the touch of the Play button looks easy. We will define for it a Rectangle. The size is going to be the same and the X position also.
We should recalculate the Y position, because it starts from the other side of the screen like the draw() method. It means we don’t have to subtract from the screenHeight, and the distance will be also different. You can play with it, but the value should be arround size*3.43f.
val playButton = Rectangle(
For the touch, as we have done before, we will use the justTouched() method, and the contains() method of the Rectangle, what we defined now.
Inside of it, we will have the resetGame(), to be sure that every variable will contain the original value. Then we will set the gameState to 1 and the call of the startTimer().
The theory here is the same as the case of the Play button. Same X position, and same size as the Username button. And again we should play a little bit with the Y posisition.
The justTouched method is also very similar.
After the previous two it’s just a practice. 😉
Modify the gameState 0
At the beginning of this tutorial we defined inside the gameState==0 a justTouched() method. So when we touch everywhere the screen, then the game will be started.
After the implementation of the Play button, we don’t it there anymore, so delete this lines from it.
gameState = 1
Call the methods
Our last thing what we have to do the run of the methods, because we still nowhere call the methods.
Add this 3 lines to the gameState 0, from where we have just deleted the justTouched()
Run the app
Finally our app is ready to test. Run it and test the buttons. If you push the Play button, then game has to be started. When you touch the Username and the High score buttons, then you should see the log messages on the Logcat inside of your Android Studio.
If the your game doesn’t run well, then you can compare your source code under the Download link.
I hope the description was understandable and clear. But if you have still questions, then leave me comments below! 😉
Have a nice a day! 🙂