Libgdx with Android For Game Dev
Game Dev Tutorial : Title -Creating CLickListener with an ImageButton with Character Action
Game Dev -All Game Dev Tutorials
With this tutorial lesson, we are going to create a Click Listener, and add it to an Image Button. And, when the Image Button is tapped(clicked) the game character (warrior) will move around the game screen based on the action functions and parameters we have set. We will use the same game character we had in the previous tutorial. We made our own Image Button for this, and then just added the text we wanted to it - Play Now. The image button graphic and the character warrior image are added to the Assets folder in the AppProject for this tutorial. And, we load the image button to the game in the same manner we load any game image; with the Texture code call.
We add our image button to the 'click listener' function, and then set the code (the action) that we want to execute to the click listener.
All code for this tutorial is at the Example Code section on this page. You can view the game action at the 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_ImageButton game 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 Shot - Portrait, 5.8" Game Screen App Shot - video gif
Button is clicked, warrior is actioned
Imports and Game Class - For imports we have to code all the import statements for the code functions we are adding, so we include - texture, texture region, texture region drawable, image, input event, click listener, button, image button, button style, actor, action, actor, stage. And, also important - viewport, orthographic camera, and spritebatch. And, after imports we code our 'game class', which here we use 'Application Adapter' class so we can execute all the code and actions we require.
Variables - At variables or class members as they are also known, we include all code calls we need including: spritebatch, orthographic camera, extend viewport, texture, texture, image, and image button. You notice here we code two 'texture' call variables- one for the game character image, and one for the game image button. We just give them unique names - myTexture, and playTexture.
Create - At create method, we must code all NEW instances of the methods and code functions we intend to use. Orthograhic camera, spritebatch, viewport, stage. We load our game character image and image button graphic with Texture code call, then just declare each depending on what we are going to do with them. So, for game character warrior, we declare it as Image call. We also set its' size and position. For this warrior character we set its' size as 128x128, width by height, and its' position as 180,0, for width and height on the x and y axis, so, 180 is width along the bottom of the game screen, and y is its' set height on the game screen. This is the starting position of our game warrior.
Our image button graphic, also gets declared, we want it to be our 'clickable button', an image button, so we first must create a TextureRegionDrawable, and add our Play Now button code, and then set it as our new ImageButton, and set its' size and position on the game screen.
Next, add the code for the 'click listener', and create new instance of it. And, add the 'click listener' to the 'playButton'.
Then add the if clicked code (what happens when button is tapped or clicked), and here we add our code for the character action. We use the 'MoveToAction', method, and add the actions we want- moveBy, rotateBy, fadeOut, fadeIn, moveTo. We also include the 'sequence' so that our actions perform sequentially.
Once we coded all the actions we want, we have to add our 'playButton', and 'warriorImage', to the Stage, but first we declare them each as an Actor, and then add the Actor to the Stage.
Lastly, in our create method, we include the 'input processor' code, as this will handle the click event.
Render - At render method, we want to clear the game screen and add our preferred game screen color, in this case, white - 1,1,1,1. And, we set the 'projection matrix' to combine viewport and camera for proper screen view.
Next, we set the 'stage to act' with 'stage.act' code, and include the 'delta time' code, Delta time is used to render the proper timing for the actions we implement. Typically , this is based on the 'frame rate' of the device the game is installed on, but you can set this to 'seconds' also, which we learned about in another tutorial.
Lastly in the render method, we draw our game screen graphics with the stage.draw code call, and include the 'public void resize' code method, which ensures the game screen will resize properly across different screen orientations(portrait and landscape) and screen sizes(device screen sizes).
Dispose - In our dispose method, we dispose of the game assets, keeping our game performance at its' best. Because we are using Stage, we only need to code 'stage.dispose()', as opposed to coding each asset directly, which means coding each one separately. This may not seem like a big deal, if your game has only a few assets, but with a complex game containing many assets, this can save lots of time on coding.
By implementing Actor and Stage, we easily action our game character with the MoveToAction code method.
Once we have our image button added, we can add a click listener to the image button, which will give interaction to the button. Then we can add some executable code, what we want to happen once that image button is tapped or clicked. In this example, we have our game character, the pixelart warrior, perform several actions: moveBy, rotateBy, fadeOut, fadeIn, moveTo, as it moves around the game screen.
The pixelart character warrior is easy to create, with a pixelart creation editor. Popular and free ones include - Pixilart (desktop and mobile versions, join to save your creations, email required), and Pixel Studio (mobile). For this tutorial, the pixelart character was made using the mobile, Pixel Studio. The 'image button'(Play Now), was made with a free online photo editor - Canva, where you can create for free and, access more freebie tools and features if you join, also free(email required).
Game Dev -All Game Dev Tutorials
App Project Name: ClickListener_ImageButton
With this tutorial lesson, we are going to create a Click Listener, and add it to an Image Button. And, when the Image Button is tapped(clicked) the game character (warrior) will move around the game screen based on the action functions and parameters we have set. We will use the same game character we had in the previous tutorial. We made our own Image Button for this, and then just added the text we wanted to it - Play Now. The image button graphic and the character warrior image are added to the Assets folder in the AppProject for this tutorial. And, we load the image button to the game in the same manner we load any game image; with the Texture code call.
We add our image button to the 'click listener' function, and then set the code (the action) that we want to execute to the click listener.
All code for this tutorial is at the Example Code section on this page. You can view the game action at the 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_ImageButton(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.click_listener_image_button'.Click Create; ClickListener_ImageButton game 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 Shot - Portrait, 5.8" Game Screen App Shot - video gif
Button is clicked, warrior is actioned
Code For This Tutorial
For this tutorial lesson, we are adding code for the methods and functions; imports, game class, variables, create, render, and dispose.Imports and Game Class - For imports we have to code all the import statements for the code functions we are adding, so we include - texture, texture region, texture region drawable, image, input event, click listener, button, image button, button style, actor, action, actor, stage. And, also important - viewport, orthographic camera, and spritebatch. And, after imports we code our 'game class', which here we use 'Application Adapter' class so we can execute all the code and actions we require.
Variables - At variables or class members as they are also known, we include all code calls we need including: spritebatch, orthographic camera, extend viewport, texture, texture, image, and image button. You notice here we code two 'texture' call variables- one for the game character image, and one for the game image button. We just give them unique names - myTexture, and playTexture.
Create - At create method, we must code all NEW instances of the methods and code functions we intend to use. Orthograhic camera, spritebatch, viewport, stage. We load our game character image and image button graphic with Texture code call, then just declare each depending on what we are going to do with them. So, for game character warrior, we declare it as Image call. We also set its' size and position. For this warrior character we set its' size as 128x128, width by height, and its' position as 180,0, for width and height on the x and y axis, so, 180 is width along the bottom of the game screen, and y is its' set height on the game screen. This is the starting position of our game warrior.
Our image button graphic, also gets declared, we want it to be our 'clickable button', an image button, so we first must create a TextureRegionDrawable, and add our Play Now button code, and then set it as our new ImageButton, and set its' size and position on the game screen.
Next, add the code for the 'click listener', and create new instance of it. And, add the 'click listener' to the 'playButton'.
Then add the if clicked code (what happens when button is tapped or clicked), and here we add our code for the character action. We use the 'MoveToAction', method, and add the actions we want- moveBy, rotateBy, fadeOut, fadeIn, moveTo. We also include the 'sequence' so that our actions perform sequentially.
Once we coded all the actions we want, we have to add our 'playButton', and 'warriorImage', to the Stage, but first we declare them each as an Actor, and then add the Actor to the Stage.
Lastly, in our create method, we include the 'input processor' code, as this will handle the click event.
Render - At render method, we want to clear the game screen and add our preferred game screen color, in this case, white - 1,1,1,1. And, we set the 'projection matrix' to combine viewport and camera for proper screen view.
Next, we set the 'stage to act' with 'stage.act' code, and include the 'delta time' code, Delta time is used to render the proper timing for the actions we implement. Typically , this is based on the 'frame rate' of the device the game is installed on, but you can set this to 'seconds' also, which we learned about in another tutorial.
Lastly in the render method, we draw our game screen graphics with the stage.draw code call, and include the 'public void resize' code method, which ensures the game screen will resize properly across different screen orientations(portrait and landscape) and screen sizes(device screen sizes).
Dispose - In our dispose method, we dispose of the game assets, keeping our game performance at its' best. Because we are using Stage, we only need to code 'stage.dispose()', as opposed to coding each asset directly, which means coding each one separately. This may not seem like a big deal, if your game has only a few assets, but with a complex game containing many assets, this can save lots of time on coding.
Summary
In this tutorial, we added an 'Image Button' to the game screen, and we set its' size and position on the game screen. We set the image button size as 400 for width, and 240 for height, so just less on the width from the actual size of the image which is 500 x 240. For your image button, you can use a premade button, or make your own with any free photo creator online. Once you create the button color, and size, you need only add the text you want to it. To add it, we load it using the Texture code call, and then declare it as our Image Button, but first we include and code TextureRegionDrawable function, which is required.By implementing Actor and Stage, we easily action our game character with the MoveToAction code method.
Once we have our image button added, we can add a click listener to the image button, which will give interaction to the button. Then we can add some executable code, what we want to happen once that image button is tapped or clicked. In this example, we have our game character, the pixelart warrior, perform several actions: moveBy, rotateBy, fadeOut, fadeIn, moveTo, as it moves around the game screen.
The pixelart character warrior is easy to create, with a pixelart creation editor. Popular and free ones include - Pixilart (desktop and mobile versions, join to save your creations, email required), and Pixel Studio (mobile). For this tutorial, the pixelart character was made using the mobile, Pixel Studio. The 'image button'(Play Now), was made with a free online photo editor - Canva, where you can create for free and, access more freebie tools and features if you join, also free(email required).
EXAMPLE CODE - Code For This Tutorial.
JUST copy and paste to update your code.
JUST copy and paste to update your code.