Teki – Change the username

In the very last chapter we prepared the Main Menu, which contains 3 buttons, the Play, the Username, and the High Score buttons. Between the Username and the High Score buttons we left bigger space to change the username easier.

So in this chapter we will implement a pop up window, where the users can change their names. When they click on the OK button, then the name will be visible under the Username button.

Step 1 – The BitmapFont

If we want to draw a custom text on the screen in the GDX library we have to use BitmapFont. It is a graphical representation of a ttf font. Bitmap Font do not scale very well, as it streches the image, because of this I don’t like to use it.

We gonna decalre it at the beginning of the TekiTutorial::class.

var username: BitmapFont? = null

In the create() method first we will initialize it, then we will set the color and the scale. The text will be white, because all of the buttons are in color white. The scale will be 2. With this scale the text looks like a little bit pixels, but still good enough to use it.

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

The username text

During the game we are going to store the current user’s name in a string variable. We will do it, because later on we will use the text in the other parts of the code as well.

Other reason is to store it, because we need it for the draw() method of the BitmapFont as well.

So this line goes after the BitmapFont.

var usernameText: String = “Enter your username”

The initial value will be the “Enter your username”, because when the user at the first time will start the game, then no username will be specified. In this case, when the user starts playing the game, then the scores will be stored without any username.

Other point of view, that this text asks the user, to the username before start playing.

The draw()

To draw the username on the screen we can use call draw() method on the username BitmapFont variable, what we have defined already.


drawUsername()
      • As the first argument will have to use the batch variable, what we declared at the beginning of this tutorial.
      • The second is the usernameText, which stores the current user’s name.
      • The next two arguments are the X and the Y positions on the screen. With this values the text will appear directly under the Username button.

This method will fire, when the gameState equals to 0, so when the Main Menu screen is visible on the screen.

When you run now the app, then it should look like this.

Step 2 – Extend the touch

In the next step we are going to extend the touch on the Username button. As we have talked about already, the pop up window will be showen also when the user touches the text of the username.

For the BitmapFont we have used only a scale, but now we need to know the real size of the username text.

GlyphLayout

To get this size we will declare a GlyphLayout. It stores runs of glyphs for a piece of text, and GlyphRun stores glyphs and positions for a piece of text.

val layout = GlyphLayout()
layout.setText(username, usernameText)
val height = layout.height

This 3 lines of code will be in the touchUsernameButton() method, before the line of the usernameButton variable.

With the hight variable we gonna increase the height of the usernameButton variable.

val usernameButton = Rectangle(
    screenWidth – size*4f – size*1.87f,
    size*5.4f – size*0.8f,
    size*3.74f,
    size*0.8f + height)

TextInputListener

For the pop up window we can use the TextInputListener, what we can call from the Input object of the GDX library. This method goes inside of the if-statement, where we check if the touch of the user was inside of the usernameButton‘s Rectangle.


TextInputListener 

When we touch the Username button, then inside of the pop up window we will have a textinput field, and an OK and Cancel buttons. For both event we can write code. In our case we need only, when the user clicked on the OK button. When this happens, then we will have a log message in the Logcat, and we will set the usernameText to the chosen one.

In the last line of the above code the “Username” will be the title of the window, the “Enter your username” the hint inside of the textfield.

So that’s it. Run again the app. 😉

TekiTutorial

Finally, if you were stuck, then you can download the tutorial from the above link.

Dowload 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 *