Teki – High score

Finally we have come to the last part of the game, where we will build up the last funcitonal

part of our Teki Android game tutorial. This is going to be the High Score screen and the list with the usernames and the scores.

Previously we have implemented in the Main Menu screen the High Score button. Currently, when tap it, we will see only a log message in the Logcat. In this chapter we will implement the High Score screen for the button and the the list of the scores.

So let’s start coding. 😉

Step 1 – Draw the title

In the render() method we have already extended the gameState with the value of 3, what means the High Score screen, but it is still empty. Our first task will be to draw here the title of this screen. For this we have to create a new Texture varaible in the beginning of the TekiTutorail::class, called highScoreTitle.

var highScoreTitle: Texture? = null

In the create() method we are going to add for this variable the final value, and it will be the image, what we have already in the assets folder.

highScoreTitle = Texture(“highScoreButton.png”)

drawHighscoreTitle()

As we have done it before, here we will define a method for the draw of the High Score title, and we will call it as drawHighscoreTitle(). The title will be drawn at the top right part of the screen. For the size we will use the size variable, to have here also a repsonsive user interface.

You can play with the numbers, the goal is just not to have a stretched image.


drawHighscoreTitle()
Add to the gameState

Before we run the app, we have to add the set of the gameState inside of the High Score button’s touch. So this line of code goes inside of the touchHighscoreButton() method and there inside of the nested if-else statement of the contains() method.

gameState = 3

Now run the app. If you made everything correctly, then if you tap the High Score button, you should see this screen.

Step 2 – Draw the back button

In the chapter of The restart and back buttons we have already declared all the necessery stuff to draw the Texture of the Back button.

So our task with is it just to call the function drawBackToMainMenu() add pass for it the coordinates of the position.

On the High Score screen the back button goes to the bottom left corner.

drawBackToMainMenu(
    screenWidth – size*1.5f – size*0.5f,
    size*1f)

Now run again the app.

Step 3 – Touch the back button

Our task with the touch is again super easy, because for this we have implemented the method also In the chapter The restart and back buttons.

What we need to do, is to set the position and call the touchBackToMainMenuButton() method.

touchBackToMainMenuButton(
    screenWidth – size*1.25f,
    screenHeight – size*1.75f)

Step 4 – The list of the scores

The next important part of this chapter is the list of the high score, which will contain 10 users in descending order.

The list will be visible directly under the title. Every row starts with the score and the username, who could reach this score.

Save the scores

So our first task is to store the scores with the username. It should be updated only if it is higher then the previous one was and the user has changed the initial value of the usernameText, so  in case if it is not equal to “Enter you username”.

For the save feature we will define the method called saveHighscores(). We gonna fire this method when the user failed, so when Teki and one of barries overlap each other.

This is the upadted if-statement when the gameState is equal to 1.

if (Intersector.overlaps(tekisRect, barriersRect))
{
    saveHighscores()
    gameState = 2
    stopTimer()
}

Data class Highscore()

During the game we have to store the list of the scores in a MutableList of Highscores. This Highscores class is going to be implemented as data class.

About Kotlin Data class you can find more detailes here.

Data Class

To add a new class to our game click on the left menu of the Android Studio on the Project tab, then expand the core and the java folders, then click on the package name with right button of your mouse. And then New – Kotlin File/Class.


The Highscores data class will have two properties, the username as String and the score as Int.


data class Highscore()
The list of the Highscores

After the implementation of the Highscore class, we can declare the MutableList for the high scores. This line of code goes to the beginning of the TekiTutorial::class.

var highscoresList = mutableListOf<Highscore>()

saveHighscores()

Before we store the list in the app, we have to make some check on the data.

          1. Have the user set a username?
          2. Does the list contains the users name?
            1. If yes
              1. Is the reached score higher then current one?
            2. If no
              1. We have to add to the list the score and the username
          3. Sort the list in descending order
          4. Using a for-loop we start to store the data

saveHighscores()
The first for-loop

In the first for-loop we gonna check if the list contains the username or not. If it does, then the loop will be stopped using the labeled break.

About Kotlin Break expression you can find more detailes here.

Break expression

The second for-loop

In the second for-loop happens the save. As we have talked about, we gonna store the best 10 scores in the app. For this, using this line,

highscoresList.sortByDescending { it.score }

we sorted the list of the scores in descending order.

Basically we will use as a key the username+i to get back later the correct positions, so we don’t have to sort the list all the time, when we open the High Score screen. For the score we gonna use the same logic, so the keys will look like this: score+i.

Get the scores

After we successfully saved the scores, we want to get them back. For this we will implement the getHighscores() method.

Inside of this method we will define also a for-loop from 0 until 9. Inside of it we can use the getString() and getInteger() methods with the keys, what we used to save the data.

When the scores and the usernames are already available, then we will add them to the list as an instance of the data class Highscore.

To be sure, that the list is sorted by descending, we will sort it again.


getHighscores()

The call of the methods goes to the create() method. Be careful to fire it only after the initialization of the pref variable.

Step 5 – Draw the high score list

When you run the app, and you open the High Score screen, still you won’t see the list. The screen is empty, because we have to draw there the usernames and the scores.

For this we will use the BitmapFont object, as we have done for the username on the Main Menu screen. So we will define this 2 variables at the beginning of our class.

var score_highscore: BitmapFont? = null
var username_highscore: BitmapFont? = null

Then the initializations has to be in the create() method. Here we will set for both variables the color white and the scale to 2f.

score_highscore = BitmapFont()
score_highscore!!.setColor(Color.WHITE)
score_highscore!!.data.scale(2f)
username_highscore = BitmapFont()
username_highscore!!.setColor(Color.WHITE)
username_highscore!!.data.scale(2f)

drawHighscorePositions()

When we open the high scores, we want to see there a list. To achieve this we will have 3 variables as arguments for this method.

          • username: String
          • score: String
          • position: Float

The username and the score Strings are clear, why do we need them. In case of the position, we will multiply the half of the size variable and we gonna subtract it from the position of the first place. Whit this we can achieve to have the places under of each other.


drawHighscorePositions()
Call the drawHighscorePositions() method

Our very last thing before the finish of the game is to call this method after the touch of the back button, when the gameState is equal to 3, so when the High Score screen is visible.

To draw all of the places on the screen we gonna use here also a for-loop from 0 to 9.


drawHighscorePositions()
Run the app

Now, if you run the app, then you should have a fully working game.

Congratulations!
😉

In the next 2 chapters we are going to talk how to add AdMob to the game, and we gonna uplaod it to the Google Play Store.

See you in the next chapter. 🙂

TekiTutorial

As always, when you are stucked, then from the link you can download the whole source code of the app.

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! 🙂

 


 

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

Leave a Reply

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