fbpx

Teki – Scoring and level Textures

Reading Time: 5 minutes
In the very last lecture of the Teki, Android game tutorial we added the scoring and the level variables, and we defined how to calculate them during the game.

In this lecture we gonna add for the scoring and levle the Textures as well, so they will be visible on the screen during the game. 

So let’s start coding. 😉

Step 1 – Declare the Textures of the texts

First of all we gonna declare the Textures of the Score and the Level texts at the beginning of the TekiTutorial::class.

var scoreTextTexture: Texture? = null

var levelTextTexture: Texture? = null

As we have done it before, the initializations of the Textures will be in the create() method. The images are already in your assets folder, we should only just add them to the game.

scoreTextTexture = Texture(“score.png”)

levelTextTexture = Texture(“level.png”)

Step 2 – Draw the Textures

For the two draw() we gonna define again separate methods.

scoring()

The score will be visible always at the top left corver of the screen in landscape mode. In the previous chapter we defined already the size variable what is equal to the 10% of the screenHeight. The distance between the edge of the screen and the Score text to the right will be 1 size and from the top it will be size*1.2f. The coordinate (0, 0) of the screen is at the bottom left, so we have to subtract it from the screenHeight. In this case it will be always visible for the user.

The width of the Texture will be size*2f, the height size*0.8f


scoring()
leveling()

The Level text will be under the Score text. The position X stays be the same. The position Y will be size*1.2f – size and also subtracted from the screenHeight variable.

The height will be the same as the height of the Score text. In case of the width we have to have the 93% of it. Otherwise the text will be streched a little bit. 


leveling()
Add to the screens

When do we need to have the scores and the level on the screen? On the Main Menu screen? No.
On the High Score screen? No.
Where do we want to see them, it is when the game is running and when we have failed, so when the Game Over screen is visible.

If you run now the app, then it should look like this, when you touch the screen.

Step 3 – Draw the Numbers

As we have done with the Score and the Level text, we are going to have a mutableList, and it will contain the 10 images for the Numbers.

var numbersTextures = mutableListOf<Texture>()

We have this 10 images in the assests folder from 1.png to 9.png. We will add them to the list using a for-loop in the create method.

for (i in 0..9)
{
    scoreTextures.add(Texture(${i}.png))
}

To figure out which picture and where has to be visible is a little bit difficult, but don’t worry, I am going to explaine it. 🙂

We have to split the score to digits, because we have to know in every positions of the score number the exact number. If we know this, then we can set the correct number’s picture. To do that we will use modulo by 10. After that we will get the numbers in reverse order, so we have to call the reverse() method on the list of the numbers. We are going to do that only if the score is higher then 0.

To draw the correct numbers in the correct order next to each other we will add to the x position the size multiplied by the i variable from the for-loop.

We are done, so now we can add this few lines to the scoring() and labling() methods.

scoring()

scoring()
labeling()

labeling()

Now if you run the app. You should see at the top left corner of the screen the Score and the Label texts and next to them the numbers as well.

TekiTutorail::class

If you coundl’t follow the tutorail, then here is the whole source code fot the TekiTutorial::class.


TekiTutorial::class

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 – Scoring and level Textures”

Leave a comment

stay informed!

Subscribe to receive exclusive content and notifications