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()
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.
To draw the username on the screen we can use call draw() method on the username BitmapFont variable, what we have defined already.
- 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.
val layout = GlyphLayout()
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*0.8f + height)
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.
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. 😉
Finally, if you were stuck, then you can download the tutorial from the above 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! 🙂