fbpx

Teki – The main menu

Reading Time: 5 minutes
When we open the game, then we can see only our heroine, Teki with the background. From user experience view it is not the best, because the users won’t know what they have to do. The Main Menu screen will solve this issue as well.

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.

drawTekiTitle()
drawPlayButton()
drawUsernameButton()
drawHighscoreButton()

drawTekiTitle()
For the draw() method we need the Texture, the X and Y positions, and the width/height. The Texture will be the title variable.

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.


drawTekiTitle()
drawPlayButton()
The buttons on the Main Menu screen will be centered, and I have already calculated this position in the X direction.

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.


drawPlayButton()
drawUsernameButton()
The Username button goes under the Play button. We have to let the buttons breathe.

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.


drawUsernameButton()
drawHighscoreButton()
The High Score button goes under the Username button.

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.


drawHighscoreButton()
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.

touchPlayButton()

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(
    screenWidth-size*4f-size*0.635f,
    size*3.43f,
    size*2f-size*0.73f,
    size*0.8f+size*0.27f)

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().


touchPlayButton()
touchUsernameButton()

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.


touchUsernameButton()
touchHighscoreButton()

After the previous two it’s just a practice. 😉


touchHighscoreButton()
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.

if (Gdx.input.justTouched())
{
    gameState = 1
    startTimer()
}

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()

touchPlayButton()
touchUsernameButton()
touchHighscoreButton()

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.

TekiTutorial

If the your game doesn’t run well, then you can compare your source code under the Download link.

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:

2 thoughts on “Teki – The main menu”

Leave a comment

stay informed!

Subscribe to receive exclusive content and notifications