Libgdx with Android For Game Dev
Game Dev Tutorial : Create TextButton with ChangeListener
Game Dev -All Game Dev Tutorials
For this tutorial, we are going to implement a ChangeListener function to our game code, which will handle a TextButton click. First, we create our TextButton, and Label, which will display the text we want to show on the TextButton. The TextButton and Label are then added to our game Stage. In order to add them to the Stage, we must first declare them each as an Actor.
We include an InputProcessor as well, as this handles the click event from the TextButton. We must create a new instance of the Stage, and add the ScreenViewport. We then set the ScreenViewport to the Stage, that way, our game screen will automatically adjust when necessary based on the device screen size.
Code for this tutorial is at the Example Code section on this page; just copy and paste to replace the code at MyGdxGame.java, and then Run the app code, to update the code.
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. Now TextButton_ChangeListener app is created, and the MyGdxGame.java page opens in your AIDE coding editor.
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 Shots - TextButton_ChangeListener
5.8" Screen, Smartphone
After imports, we add our game screen class, for this we used 'ApplicationAdapter', so it is coded as 'public class MyGdxGame extends ApplicationAdapter'. This is essentially the core base from which all the code calls can function or coexist, if you like. Without adding our game class, the codes won't work together. There are a few game classes we can use, each with their own features and requirements. To now, in our tutorials, we have implemented 'ApplicationAdapter', and "ApplicationListener'. Both similar, but ApplicationListener is the base core class because it requires all the calls like pause, resume, dispose, and resize. Application Listener is often used first as the game class, and other game class screens added from ApplicationListener. We will learn more about these as we continue our tutorials.
Create method -
Next, we want to code new instances of our code calls in the create method. Looking at this next image, we first code the ScreenViewport, and the InputProcessor. InputProcessor is important here because this code, is what makes our Click button work. It basically handles all click events no matter if its a 'touch', 'mouse', 'dragged', or 'scrolled' event. With mobile devices it is mostly likely 'touch' or 'dragged' events. So, if you tap your finger to the TextButton on the screen, that is a click event, or a 'touch' click event as it is known in Libgdx mobile coding for games.
Next, in our code, we add the Style for the button, including the default 'bitMapFont', and then the color for the text. After adding style, we add the button itself, including its width, height, scaling it, and positioning it to the center of the screen with this code:
button.setPosition(Gdx.graphics.getWidth() / 2 ,Gdx.graphics.getHeight() / 2);
This code tells Libgdx to take half of the screen width, and then half of the screen height, which essentially centers the TextButton in the middle/center of the screen.
After creating our button, we then set it to the Label that we must create as seen in this image of the created codes.
In creating the Label, we give it a variable 'messageLabel', you can name this as you like, and we must declare it as a variable because we are going to be using it in our 'ChangeListener' changeEvent. We follow the same coding process as the button, we first style it, setting the default BitmapFont, and then add a color for it, and we scaled it also. We gave it a font scale of 2.4f, which scales it by 2.4, the f stands for floating integer. Any time we scale or add actions in Scene2d, with Stage(or not) we use the f standard. Next, for Label, we add a 'preClick message'; this is optional, so not required. This code:
messageLabel = new Label("I'm a Label", labelStyle);
is how we code the pre click optional text; here we added "I'm a Label", for the pre click text. Looking at the Appshot, you see it shows on the screen just below the "Click here, I'm a TextButton" text. If you do not add any preclick text, then it does not show any text. If not adding then add your code like this:
messageLabel = new Label("", labelStyle);
Next, we align the text within the label itself with this code:
messageLabel.setAlignment(Align.center); you can add right, left or center as we have done; this aligns the text centered in the label.
The 'ChangeListener' event is the next thing we add to our code, and then we add the message we want to display once the TextButton is clicked. The text 'Game Dev', displays on screen once the textbutton is clicked.
And, lastly, in our Create method, we will declare our variables as Actors, and then add the actors to the Stage, as seen in this next code snippet. Our variables, button, and messageLabel, are both declared. Button is for our code call TextButton, and messageLabel is for our code call Label. As mentioned, you can name your variables as you like. Once added to the Stage, we can then update the Stage in the Render method.
In Render method, we can clear our screen, and add then add the screen color were going to use for our game screen, for this code it is: 1,1,1,1(color white). Then we next update our stage, with this call;
stage.act(Gdx.graphics.getDeltaTime());
The stage updates and gets delta time which is essentially current time for game play so important for animations and actions moreseo where time intervals are added for action scenes. Then the stage.draw() call is added which draws our TextButton to the game screen. And, then stage.dispose(), to remove the stage once it is processed.
There is also a ClickListener code call we can implement, similar to a changeListener, but moreso just for click events, like a user clicking on a button on the screen in desktop, or tapping the screen on a mobile device. So for this tutorial example, our simple click event, we could have used either; the ChangeListener or the ClickListener code call. However, if we want to execute a 'change of state', then we must use the 'ChangeListener' function.
More reading on InputProcessors here Event Handling with Input Processors
Game Dev -All Game Dev Tutorials
App Project Name: TextButton ChangeListener
For this tutorial, we are going to implement a ChangeListener function to our game code, which will handle a TextButton click. First, we create our TextButton, and Label, which will display the text we want to show on the TextButton. The TextButton and Label are then added to our game Stage. In order to add them to the Stage, we must first declare them each as an Actor.
We include an InputProcessor as well, as this handles the click event from the TextButton. We must create a new instance of the Stage, and add the ScreenViewport. We then set the ScreenViewport to the Stage, that way, our game screen will automatically adjust when necessary based on the device screen size.
Code for this tutorial is at the Example Code section on this page; just copy and paste to replace the code at MyGdxGame.java, and then Run the app code, to update the code.
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, TextButton_ChangeListener(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.textbutton_listener_example'.Click Create. Now TextButton_ChangeListener app is created, and the MyGdxGame.java page opens in your AIDE coding editor.
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 Shots - TextButton_ChangeListener
5.8" Screen, Smartphone
Text Button Shots: Pre-Clicked and Post-Clicked
Code For This Tutorial
After imports, we add our game screen class, for this we used 'ApplicationAdapter', so it is coded as 'public class MyGdxGame extends ApplicationAdapter'. This is essentially the core base from which all the code calls can function or coexist, if you like. Without adding our game class, the codes won't work together. There are a few game classes we can use, each with their own features and requirements. To now, in our tutorials, we have implemented 'ApplicationAdapter', and "ApplicationListener'. Both similar, but ApplicationListener is the base core class because it requires all the calls like pause, resume, dispose, and resize. Application Listener is often used first as the game class, and other game class screens added from ApplicationListener. We will learn more about these as we continue our tutorials.
Create method -
Next, we want to code new instances of our code calls in the create method. Looking at this next image, we first code the ScreenViewport, and the InputProcessor. InputProcessor is important here because this code, is what makes our Click button work. It basically handles all click events no matter if its a 'touch', 'mouse', 'dragged', or 'scrolled' event. With mobile devices it is mostly likely 'touch' or 'dragged' events. So, if you tap your finger to the TextButton on the screen, that is a click event, or a 'touch' click event as it is known in Libgdx mobile coding for games.
Next, in our code, we add the Style for the button, including the default 'bitMapFont', and then the color for the text. After adding style, we add the button itself, including its width, height, scaling it, and positioning it to the center of the screen with this code:
button.setPosition(Gdx.graphics.getWidth() / 2 ,Gdx.graphics.getHeight() / 2);
This code tells Libgdx to take half of the screen width, and then half of the screen height, which essentially centers the TextButton in the middle/center of the screen.
After creating our button, we then set it to the Label that we must create as seen in this image of the created codes.
In creating the Label, we give it a variable 'messageLabel', you can name this as you like, and we must declare it as a variable because we are going to be using it in our 'ChangeListener' changeEvent. We follow the same coding process as the button, we first style it, setting the default BitmapFont, and then add a color for it, and we scaled it also. We gave it a font scale of 2.4f, which scales it by 2.4, the f stands for floating integer. Any time we scale or add actions in Scene2d, with Stage(or not) we use the f standard. Next, for Label, we add a 'preClick message'; this is optional, so not required. This code:
messageLabel = new Label("I'm a Label", labelStyle);
is how we code the pre click optional text; here we added "I'm a Label", for the pre click text. Looking at the Appshot, you see it shows on the screen just below the "Click here, I'm a TextButton" text. If you do not add any preclick text, then it does not show any text. If not adding then add your code like this:
messageLabel = new Label("", labelStyle);
Next, we align the text within the label itself with this code:
messageLabel.setAlignment(Align.center); you can add right, left or center as we have done; this aligns the text centered in the label.
The 'ChangeListener' event is the next thing we add to our code, and then we add the message we want to display once the TextButton is clicked. The text 'Game Dev', displays on screen once the textbutton is clicked.
And, lastly, in our Create method, we will declare our variables as Actors, and then add the actors to the Stage, as seen in this next code snippet. Our variables, button, and messageLabel, are both declared. Button is for our code call TextButton, and messageLabel is for our code call Label. As mentioned, you can name your variables as you like. Once added to the Stage, we can then update the Stage in the Render method.
In Render method, we can clear our screen, and add then add the screen color were going to use for our game screen, for this code it is: 1,1,1,1(color white). Then we next update our stage, with this call;
stage.act(Gdx.graphics.getDeltaTime());
The stage updates and gets delta time which is essentially current time for game play so important for animations and actions moreseo where time intervals are added for action scenes. Then the stage.draw() call is added which draws our TextButton to the game screen. And, then stage.dispose(), to remove the stage once it is processed.
Summary
This tutorial we learned how to implement a simple TextButton with a Change Listener to handle the click event. Change Listeners are also useful for 'a change of state', where a user does something like - click a checkbox, or a toggle button. By using a Change Listener in these scenarios, the system detects the user interaction and acts accordingly by firing the InputProcessor and then acting on the event. In this tutorial example, the action was to display some text once the user clicked the TextButton, so this would be considered a simple click event.There is also a ClickListener code call we can implement, similar to a changeListener, but moreso just for click events, like a user clicking on a button on the screen in desktop, or tapping the screen on a mobile device. So for this tutorial example, our simple click event, we could have used either; the ChangeListener or the ClickListener code call. However, if we want to execute a 'change of state', then we must use the 'ChangeListener' function.
More reading on InputProcessors here Event Handling with Input Processors
EXAMPLE CODE - Code For This Tutorial.
JUST copy and paste to update your code.
JUST copy and paste to update your code.