Libgdx with Android For Game Dev
Game Dev Tutorial : Add a Click Listener to TextButton and Action a Warrior When Clicked
Game Dev -All Game Dev Tutorials
In this tutorial lesson, we are going to create a Text Button, and we will learn about a 'Click Listener" code call. A click listener is used to add interaction to your game buttons - text buttons, and image buttons. So, if we want our game character to be actionized when a user taps the button on the game screen, the 'click listener' is implemented for this purpose. The action code is created, and then attached to the 'click listener code'. This could be a simple action, as with this tutorial example, with just one game warrior and a simple action sequence, or it could be a more complex action involving one or more game characters and game assets. For these more complex scenarios, we can code(create) a specific game class for all the actions we want to execute, by using math logic. Then we need only attach the game class name(we can name it whatever we want) to the 'click listener' code.
All code for this tutorial is at the Example Code section on this page, which has been notated with explanation. You can view the game character action at AppShot.
FYI: The code from this game dev tutorial is compatible with Android Studio with the Libgdx component. Read more about Android Studio and Libgdx Here
Click Create; ClickListener_Warrior game app is created, and the MyGdxGame.java page opens in your AIDE coding editor.
FYI: To open an App Project, goto AppProject folder within AIDE(click folders on left while in AIDE), then click on an AppProject name, and then goto gdx-game, then select the folder src,and then select MyGdxGame.java, and click this file which opens in the coding editor. You can also view all your AppProjects by selecting the small menu dots in the middle of the AIDE coding editor, and then selecting 'Show Projects'.
Most all your game coding is done on the MyGdxGame.java file for each new game app you create(with AIDE coding editor).
For more info on navigating files and using the AIDE coding editor, goto Tutorial 1.
App Shot - Portrait Mode 5.8" Screen
Gif Video Action
Imports -
Imports are important as we must code the necessary imports for the code methods we include in code. Standard imports are already included when we create our 'game template' app, however, any additional imports must be added as we include new methods and code functions into our code. For this tutorial, we include additional imports for TextButton, TextButtonStyle, Image, Stage, Actor, ClickListener, BitmapFont, OrthographicCamera, ExtendViewport, Actions.
As you learn to code more complex game apps, your imports will become important, and it's a good idea to start creating a list of them so you can easily copy and paste the ones required for your game code. Here's a good list I created which you can download/save to your computer.
Game Dev Import Statements
Game Class and Variables -
Here we include the game class we want to use for our game code. For this code, we use ApplicationAdapter which is commonly used in your game dev code. The game class is important because it allows certain 'code functions' to execute. So, for example, if you try to use one that does not suport a code method your trying to implement, you'll get a RUN TIME error when you build your app code.
Game variables must be added or declared at this section. Basically, they are all the code calls you intend to use as seen in this next image. In this tutorial, we are adding a game image(our game character), so we first must load it with the Texture code call, and then declare it as our Image, and so we must include the Image variable, and then give our own name for it 'imageWarrior'. Same for Texture variable; we add it then give our name, in this code, we named it 'myTexture'.
We use the Stage code call because stage is required if you want to use Actor and we want to use Actor because Actor provides us with a easy way to action our game character. With Stage, we can tell the Stage to act, and it draws all our game characters for us. Without Stage, we would have to code each character we use separately; so using Stage and Actor simplifies our coding, especially important if your adding a lot of game characters with interactions.
Game variables are also known as 'class members'. Just to note; the names we give must be camel cased; so, example here, 'imagewarrior', must be 'imageWarrior'.
Also, if working with Stage, we must include the Stage variable as well. For simplicity, and consistency, these commonly used variables I name as: Stage -stage, ExtendViewport - viewport, OrthographicCamera - camera, and Spritebatch - batch. However, you can name these as you like.
Create -
In the create method we add a new instance of each code method we intend to use in our code, and also add particulars of an added code call, like the image size and position on the game screen, and the font size and color. When coding a TextButton, we must also include a TextButtonStyle code call. In this style code, we add our 'RED' color for the text we are adding to the game screen, the 'Play Now'. To display text on your game screen, we must include some type of font, in order to excute it. In this code, we are using the basic 'default' game font -bitMapFont. We named its variable as 'font', and then add a color and scale size - 4.1f.
Our TextButton gets declared as the playButton, and then we add the text we want to display; 'Play Now'. Next, we give our 'playButton', a size, width and height values. Now that we have our 'button' coded, we attach it to the ClickListener, and, in the same code, create our 'new' instance of the 'clickListener'.
Then, at the 'public void clicked' method, we add the code to execute, which is our 'warrior action' scene. It's only one line of code, so pretty simple to implement, however, if you had a more complex action scene to add, perhaps with several characters, and action sequences, you would have a lot of code to add here. To make coding simpler and more efficient, we can write a game class for large amounts of coding you want executed, and give it a name.
Then we only have to include that 'name' in the 'public void clicked' code. We will learn more about this as we continue our game tutorial lessons.
Next, we want to add our warriorImage, and playButton to the Stage. To do this, we must first declare them each as an Actor. And, include the InputProcessor code call, as this handles the click event for the code.
Render -
At Render method, we clear the game screen and set a screen color with 1,1,1,1, and then set the ProjectionMatrix code call. And, we set the stage to act with the code stage.act, and include the getDeltaTime code as this is what makes our action work properly based on 'frame rate'. Next, we draw our game warrior and game text to the screen with the stage.draw.
Dispose -
To dispose of our game assets, we use this code. Disposing of game assets is good practice, as it keeps your game performance more efficient.
Besides the 'Text Button', you an also use an 'Image Button', with your click listener. This means you can create your own game buttons and design them how you want for your game theme. Although you can buy or get game assets for free online, it's easy to create your own with an online free image creator and editor, like Canva. Canva is similar to many online image creation websites where you can create and edit for free, but by joining, you can also save your creations, and access more free features.
Game Dev -All Game Dev Tutorials
App Project Name: ClickListener_Warrior
In this tutorial lesson, we are going to create a Text Button, and we will learn about a 'Click Listener" code call. A click listener is used to add interaction to your game buttons - text buttons, and image buttons. So, if we want our game character to be actionized when a user taps the button on the game screen, the 'click listener' is implemented for this purpose. The action code is created, and then attached to the 'click listener code'. This could be a simple action, as with this tutorial example, with just one game warrior and a simple action sequence, or it could be a more complex action involving one or more game characters and game assets. For these more complex scenarios, we can code(create) a specific game class for all the actions we want to execute, by using math logic. Then we need only attach the game class name(we can name it whatever we want) to the 'click listener' code.
All code for this tutorial is at the Example Code section on this page, which has been notated with explanation. You can view the game character action at AppShot.
FYI: The code from this game dev tutorial is compatible with Android Studio with the Libgdx component. Read more about Android Studio and Libgdx Here
Create our Game App Screen
We are creating a new app for this tutorial. First, we must create our new mobile game app, so in AIDE, at the AppProject file hierachy, Choose Create New Project, select Mobile Game, and New Mobile Game; then add the App name, ClickListener_Warrior(Note: no spaces in the app name(can use _ ), or you can add spaces after you create it; Just Goto: the 'AppProject' folder; just select the App Name, and then select rename). Next, add the package name, 'com.aac.onclick_warrior_action'.Click Create; ClickListener_Warrior game app is created, and the MyGdxGame.java page opens in your AIDE coding editor.
FYI: To open an App Project, goto AppProject folder within AIDE(click folders on left while in AIDE), then click on an AppProject name, and then goto gdx-game, then select the folder src,and then select MyGdxGame.java, and click this file which opens in the coding editor. You can also view all your AppProjects by selecting the small menu dots in the middle of the AIDE coding editor, and then selecting 'Show Projects'.
Most all your game coding is done on the MyGdxGame.java file for each new game app you create(with AIDE coding editor).
For more info on navigating files and using the AIDE coding editor, goto Tutorial 1.
App Shot - Portrait Mode 5.8" Screen
Gif Video Action
Code For This Tutorial
For this tutorial code, we require imports, variables, game class, create and render methods, and dispose methods. Next are the images showing the code for each code method.Imports -
Imports are important as we must code the necessary imports for the code methods we include in code. Standard imports are already included when we create our 'game template' app, however, any additional imports must be added as we include new methods and code functions into our code. For this tutorial, we include additional imports for TextButton, TextButtonStyle, Image, Stage, Actor, ClickListener, BitmapFont, OrthographicCamera, ExtendViewport, Actions.
As you learn to code more complex game apps, your imports will become important, and it's a good idea to start creating a list of them so you can easily copy and paste the ones required for your game code. Here's a good list I created which you can download/save to your computer.
Game Dev Import Statements
Game Class and Variables -
Here we include the game class we want to use for our game code. For this code, we use ApplicationAdapter which is commonly used in your game dev code. The game class is important because it allows certain 'code functions' to execute. So, for example, if you try to use one that does not suport a code method your trying to implement, you'll get a RUN TIME error when you build your app code.
Game variables must be added or declared at this section. Basically, they are all the code calls you intend to use as seen in this next image. In this tutorial, we are adding a game image(our game character), so we first must load it with the Texture code call, and then declare it as our Image, and so we must include the Image variable, and then give our own name for it 'imageWarrior'. Same for Texture variable; we add it then give our name, in this code, we named it 'myTexture'.
We use the Stage code call because stage is required if you want to use Actor and we want to use Actor because Actor provides us with a easy way to action our game character. With Stage, we can tell the Stage to act, and it draws all our game characters for us. Without Stage, we would have to code each character we use separately; so using Stage and Actor simplifies our coding, especially important if your adding a lot of game characters with interactions.
Game variables are also known as 'class members'. Just to note; the names we give must be camel cased; so, example here, 'imagewarrior', must be 'imageWarrior'.
Also, if working with Stage, we must include the Stage variable as well. For simplicity, and consistency, these commonly used variables I name as: Stage -stage, ExtendViewport - viewport, OrthographicCamera - camera, and Spritebatch - batch. However, you can name these as you like.
Create -
In the create method we add a new instance of each code method we intend to use in our code, and also add particulars of an added code call, like the image size and position on the game screen, and the font size and color. When coding a TextButton, we must also include a TextButtonStyle code call. In this style code, we add our 'RED' color for the text we are adding to the game screen, the 'Play Now'. To display text on your game screen, we must include some type of font, in order to excute it. In this code, we are using the basic 'default' game font -bitMapFont. We named its variable as 'font', and then add a color and scale size - 4.1f.
Our TextButton gets declared as the playButton, and then we add the text we want to display; 'Play Now'. Next, we give our 'playButton', a size, width and height values. Now that we have our 'button' coded, we attach it to the ClickListener, and, in the same code, create our 'new' instance of the 'clickListener'.
Then, at the 'public void clicked' method, we add the code to execute, which is our 'warrior action' scene. It's only one line of code, so pretty simple to implement, however, if you had a more complex action scene to add, perhaps with several characters, and action sequences, you would have a lot of code to add here. To make coding simpler and more efficient, we can write a game class for large amounts of coding you want executed, and give it a name.
Then we only have to include that 'name' in the 'public void clicked' code. We will learn more about this as we continue our game tutorial lessons.
Next, we want to add our warriorImage, and playButton to the Stage. To do this, we must first declare them each as an Actor. And, include the InputProcessor code call, as this handles the click event for the code.
Render -
At Render method, we clear the game screen and set a screen color with 1,1,1,1, and then set the ProjectionMatrix code call. And, we set the stage to act with the code stage.act, and include the getDeltaTime code as this is what makes our action work properly based on 'frame rate'. Next, we draw our game warrior and game text to the screen with the stage.draw.
Dispose -
To dispose of our game assets, we use this code. Disposing of game assets is good practice, as it keeps your game performance more efficient.
Summary
In this tutorial, we learned about the 'clickListener' function, and how to implement it with a text button. By adding our clickListener to our text button, we can execute some type of action once the text button is tapped(mobile) or clicked(desktop). In this simple example, we actioned our game warrior to move around the game screen, then fade out. You can write more sophisticated game actions that require many lines of code, and for this, we can write our own 'game class'. This allows us to include complex math logic into our executable code, allowing for really creative character interactions.Besides the 'Text Button', you an also use an 'Image Button', with your click listener. This means you can create your own game buttons and design them how you want for your game theme. Although you can buy or get game assets for free online, it's easy to create your own with an online free image creator and editor, like Canva. Canva is similar to many online image creation websites where you can create and edit for free, but by joining, you can also save your creations, and access more free features.
EXAMPLE CODE - Code For This Tutorial.
JUST copy and paste to update your code.
JUST copy and paste to update your code.