Libgdx with Android For Game Dev
Game Dev Tutorial : Action Scene: Image, Actor, Label, Stage
Game Dev -All Game Dev Tutorials
This mobile game app, Castle Game, covers many of the Libgdx game dev classes and methods we have learned to now, including - loading game characters with Texture and TextureRegion(animation frames), adding change event listener, actioning characters, making characters visible and unvisible, creating/setting a game scorekeeper, adding logic to increment the scorekeeper, coding and customizing an animation, loading a spritesheet for the animation, creating Image from texture, creating Actors, adding Image to Stage as Actor, adding game screen background, adding actions to game characters(moving and timing them), creating Play Game button(text button), adding default bitMapFont(for text on screen), creating labels, actioning labels, create game play logic. And, also creating pixelart game characters. Most of the game characters here we made using pixelart.
This game app has over 440 lines of code, making it, at first glance, somewhat daunting to look at; but take heed, everything in this game's code, has been learned in our previous tutorials. So, really, all we did was put it all together, to make a simple one loop actioned game with a play button, a scorekeeper, and an 'exit app' button.
All the classes are grouped together, and follow the same process as all our tutorial code sets; first we add imports, then class members and variables, then any special classes, then create method code, and then render method code, and finally dispose method code. With this app lots of coding takes place in the create method, which you would expect since we have quite a few game characters to implement, and they must all be first created in the Create method, before we can action them.
The game action is as follows: The player taps the 'Play Button' at top of screen, the action begins, first with a text appearing on screen, telling us what the game is about. Then the text disappears and the action commences.
Wanbu(warrior) and Tig(white tiger) are helping to protect the castle from the chiibi bandits, which as the game begins, are on the bridge. They are heading for Wanbu, but Wanbu destroys them all with his fiery wand. Then, Tig, Wanbu's white tiger, sees the flying dragon swooping down from the sky, so he heads over to deter the flying dragon and protect Wanbu. Then Wanbu sees the flying dragon, and moves to the right across the game screen. Tig stands his ground against the flying dragon, and the flying dragon retreats and flys away. The action has ended, and the score increments by 5 points. The 'Game Over' text fades onto the screen. You can then 'exit the game', by tapping the exit game text button. This game has one loop action, that ends when 5 points are added to the scoreboard. To play again, the player must exit the game, then reopen the game.
All code for this tutorial is at the Example Code section on this page. At App Shot, you can see the App Action.
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; Castle Game game app is created, and the MyGdxGame.java page opens in your AIDE coding editor.
For more info on navigating files and using the AIDE coding editor, goto Tutorial 1.
App Shot - Portrait 5.8" Screen Size
Castle Game
This app is available for download.
Download/Install this App: Here
This game code includes lots of code, 400+ lines.
Imports and Game Class -
Include all the import statements for the code we are including. So, we include imports for: Orthographic Camera, Viewport, Texture, TextureRegion, Image, Stage, Actor, InputProcessor, ChangeListener, TextButtonStyle, Label, Actions, Color, BitmapFont. If you don't include a required import, you will most likely get a 'unknown entity' error, or 'unknown member' error. To correct, just include the required import, and run/build your code again.
Variables At variables we include the class members and then our named variables for each of them. So, for this tutorial, we include as shown in this next few images.
We use Texture to load the background castle image. We load each game character with Texture, then declare it as Image, that way, we can easily add the Image to the Stage(as Actor). For the castle guards, we use the same character, but we want several of them. So, to do this, we just declare the same Texture name for each of the Image names we create; castle guards 1 -4.
We include two white tigers, one is for the tiger resting, the other, the tiger is walking.
And, we include 'warriorfr1', which is frame one of the animation, which has four frame stances. It's the stance of the warrior when he is not firing its' wand. This will be used at the end of our warrior animation action, when we want the warrior to move across the game screen away from the flying dragon.
Next, we code members and variables for the camera and viewport, and texture and textureregion. Also, the textbutton, bitmap font, labels, and the custom animation. And, we include for 'boolean', our game logic, and 'int' for the score keeper.
Create - At create method, we include the new instances of all the class members we are coding for this tutorial, and we create the 'Custom Animation' class. A custom animation is necessary because we are adding the four frames for the animation, and we want each frame to have a unique time set. Because of the unique time settings, we create our animation as a custom animation.
Following we have included code shots of the codes from the create method with explanation of their purpose.
This next image shows how the spritesheet is loaded from Texture, and then we get the frames with TextureRegion. Note, we have two TextureRegions we use, first one is 'tmp' variable, which will split the spritesheet, and the other 'walkFrames' variable, this will take columns x the rows for us, to get the total frames from the spritesheet. Then all the frames are used in our custom animation.
This image shows how the time is set for each frame of the animated warrior. You can set them as you want. The time if based on seconds, like 1/15 second, 1/30 second.
The code in this image, shows how to code the text button, which is the 'Play Game Button'. Because we are adding text button we will see text on the screen, not an image of a button per say. If we wanted to add an image for the play button instead, we would have to use ImageButton. You can create your own Image Button and add the text onto it as you want. Here, for our TextButtonStyle, we can set its' color size, and position on the game screen.
To add the dragon and white tiger we use the following code. First, to load each we use Texture, then declare them as Image, and set their size and position on the game screen. We can also hide or show them, by using the 'setVisible' attribute to 'true' or 'false'. So, dragon can be visible, since there is only one stance of it, and it is in the sky. However, for the white tiger, we have a rest and a walk stance. So, at first we want it to be lounging on the ground, so we add the myTigerL.png(resting), and that is what shows on the game screen at first. Since it shows by default once added, we don't have to set a visibility for it.
However, for the other tiger, with walking stance, myTigerF.png; we can add it to code, but we set it to 'setVisible'(false). That way, we only see the lounging white tiger on the game screen. But once the action starts, we can easily have the two tigers swap, and then we have the walking tiger on the game screen. You can see this as you watch the action of the tiger at the App Shot video. Once the flying dragon makes its' swooping move, the tiger gets walking towards the incoming flying dragon. So, all we have to do is swap tigers right when the action for the tiger begins, as seen in the next second image shot.
The white tiger stances and action are coded in this next image shot. To note, at first we have the walking tiger,myTigerF, as invisible. But cuz the action is to start, Now, we must make the lounging tiger disappear - myTigerL, while at the same time swap in the walking tiger- myTigerF. This next code shows how to do that.
We just set their visibility to either hide or show, with setVisible(false), or setVisible(true).
Then, once that's done, we can add our actions to the walking tiger; where we want it to go on the game screen. Looking at the App Shot video, you can see the tiger gets up, delays a bit, then walks towards the incoming flying dragon, and it stays there, until the dragon flies away. The tiger's short pause or delay is coded with the delay action of our Action class code.
You can set visibility for game characters, and also for labels you create. When using Stage and Actor of scene2d, Labels are created to add text to the game screen. First, you must add them as Actor to the Stage, and then you can action them, just like a game character, or fixed asset.
This next image, we create a label to show on the game screen, label name is'gameAdventure', that says" Wanbu and Tig's Adventure...' but this label's text shows only briefly when the game begins, which is what we want.
But then we want it to disappear from the screen. So, we can set it hide or show(with setVisible(true)(false); set to show, when we first add it in code, and, also set, and change their visibility when we add actions to our characters or labels. Labels, like game characters, must be added to the stage with Actor.
You can add it when you create it, as we did here, or just add it to stage with all the other actors getting added, as shown in the following images.
When you create a Label, you give it a variable name, as you like. I tend to mostly use 'Label' in the variable name i create, making it easier to recognize and organize them, especially in larger codesets like this one.
In this next image of the label, we have set its' visibility to 'false', soon after the game Action begins. If you watch the App Shot video of the game, you see the text appears on the screen then disappears soon after the game begins. First, the player must click or tap the 'Play Game' text button, then the action begins, and then the text 'Wanbu and Tigs Adventure...' disappears from the game screen.
Once the Play Game text button is tapped, this game does not require user input, it simply runs its action scenes(a loop) then it stops, and adds 5 points to the score keeper.
Once we have coded all the game characters, and set their positions, we must add them all to the Stage, by using the Actor, as shown in this next image. The 'inputProcessor' must also be set, as this is what executes all the actions we want to code.
Now, that we have added all the game characters - their positions, and added all of them to the stage, we can now code our 'ChangeListener' and add our game actions to the listener.
When a player taps the 'Play Game' text button, all the actions happens in a sequential manner. Like a loop, each time the 'play game' button is tapped, the actions complete their cycle. And, at the end of the game action, the score keeper will increment by 5 points. This is a single run game, and we did not include code to keep track of the points, so the game will only keep score the one time. You can however, exit the app, then reopen the app, and play the game again. Each time it is played, the score keeper will post the 5 points. At the Example code section on this page, you can see all the actions that we added to all the game characters, and the labels(the text you see on the screen) we included.
Once the animated wand warrior is done destroying the chiibi bandits, he must move on the screen to the right, because the white tiger has alerted him that the flying dragon is approaching. So, we don't need the warrior to be animating anymore at this point in the action, so what we do is swap out the entire animation(4 frames) for just one frame, and that is the first frame, the frame where the warrior is not shooting his wand. You can see this in the image of the spritesheet at Example code section. We can do this in our Action class sequence. To do this, we first set our Image variable - animatedWarrior, visibility to false, with, setVisible(false), this removes it from the game screen, then, we swap in the first frame only, with our Image variable named 'myWarriorfr1', and we set its' visibility to true with, setVisibile(true). Now that we have swapped in frame 1, we can add the action to it.
This next image shows the code to move our 'myWarriorfr1', across the game screen to its' right.
The last action code we included is shown in this next image. Here we code the 'ScoreKeeper' label and logic so that it will increment by 5 points each game run. We did not include a tracker to tally the score, so it will only keep score once. And, then lastly, we have our game over label, that we have set a delay on, so it only begins to appear on the screen after all the action has completed. To do this, we must first set its' visibility to false, then to true, and set the delay for how many seconds we want.
Render - At render method, we first clear the game screen, and then set our new screen color. Because with this code we are using a castle background image, we will draw it with the batch draw code call, as shown in this next image. And, we want to start the draw at 0,0, meaning for width and height, begin at 0,0, on the game screen, which is the bottom left corner. And, then we want it drawn to 720 for width, and 1340 for height. These values can be adjusted as needed.
This would depend on the screen size you base your game on, and also the size of the image your working with. In this scenario, we only want it to look good on the 5.8" smart phone screen, and these values of 720, 1340 are good for that.
We also must draw all our game characters, the animatedWarrior, the warrior guards, the chiibi bandits, the white tiger, and the flying dragon. Because we are using Stage, of scene2d, we can easily add all our game characters, with Stage.draw(). We must also include the stage.act, and the deltaTime code.
Dispose - At dispose method, we should dispose of all our game assets, to keep our game performance at its' best. If using Stage, and Actor, for our variables, we can dispose of all those assets at once, with 'Stage.dispose();' code call, otherwise we can dispose of each variable directly. Here we will dispose of the background asset, and the walk sheet asset, with batch dispose. All else is disposed of using stage.dispose().
We included a simple score keeper to add 5 points when the action cycle loop completes, and a game exit button, to exit the app. This game was made with only one game screen, and we posted the Play Game, Exit App, and Score Keeper, on the same screen also.
Coding with Image and Actor, you can add your game characters and then set their visibility to have them either show or hide. This is ideal if you want to introduce some of the game characters later in the game play. And, you can also add your game labels(text on screen) as Actors, and like game characters, easily add them where and when you want in the game scene.
By working with Stage, Actor, and Actions class of Libgdx Scene2d, you can create a simple game scene as we have done here, and add game characters at intervals in the game, allowing for more creativity in your game scenes. The Action class of scene2d, has many action selections you can implement for game character interactions. We have already completed several tutorials that have covered many of the Actions available.
If you want to see a simple game made with more than one screen, go to our tutorial, Game: Pixelart Warrior.
Game Dev -All Game Dev Tutorials
App Project Name: Castle Game
This mobile game app, Castle Game, covers many of the Libgdx game dev classes and methods we have learned to now, including - loading game characters with Texture and TextureRegion(animation frames), adding change event listener, actioning characters, making characters visible and unvisible, creating/setting a game scorekeeper, adding logic to increment the scorekeeper, coding and customizing an animation, loading a spritesheet for the animation, creating Image from texture, creating Actors, adding Image to Stage as Actor, adding game screen background, adding actions to game characters(moving and timing them), creating Play Game button(text button), adding default bitMapFont(for text on screen), creating labels, actioning labels, create game play logic. And, also creating pixelart game characters. Most of the game characters here we made using pixelart.
This game app has over 440 lines of code, making it, at first glance, somewhat daunting to look at; but take heed, everything in this game's code, has been learned in our previous tutorials. So, really, all we did was put it all together, to make a simple one loop actioned game with a play button, a scorekeeper, and an 'exit app' button.
All the classes are grouped together, and follow the same process as all our tutorial code sets; first we add imports, then class members and variables, then any special classes, then create method code, and then render method code, and finally dispose method code. With this app lots of coding takes place in the create method, which you would expect since we have quite a few game characters to implement, and they must all be first created in the Create method, before we can action them.
The game action is as follows: The player taps the 'Play Button' at top of screen, the action begins, first with a text appearing on screen, telling us what the game is about. Then the text disappears and the action commences.
Wanbu(warrior) and Tig(white tiger) are helping to protect the castle from the chiibi bandits, which as the game begins, are on the bridge. They are heading for Wanbu, but Wanbu destroys them all with his fiery wand. Then, Tig, Wanbu's white tiger, sees the flying dragon swooping down from the sky, so he heads over to deter the flying dragon and protect Wanbu. Then Wanbu sees the flying dragon, and moves to the right across the game screen. Tig stands his ground against the flying dragon, and the flying dragon retreats and flys away. The action has ended, and the score increments by 5 points. The 'Game Over' text fades onto the screen. You can then 'exit the game', by tapping the exit game text button. This game has one loop action, that ends when 5 points are added to the scoreboard. To play again, the player must exit the game, then reopen the game.
All code for this tutorial is at the Example Code section on this page. At App Shot, you can see the App Action.
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, Castle Game(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.castle_warrior_action'.Click Create; Castle Game game app is created, and the MyGdxGame.java page opens in your AIDE coding editor.
For more info on navigating files and using the AIDE coding editor, goto Tutorial 1.
App Shot - Portrait 5.8" Screen Size
Castle Game
This app is available for download.
Download/Install this App: Here
Code For This Tutorial
For this tutorial, we must include the imports, game class, class members(with variables), create method, render method, dispose method. And, include any additional classes and methods we require for this tutorial. You can see all the code at the Example code section. For this code, we required additional public class to be created for our Custom Animation. The public class AnimatedWarrior will extend Actor, and doing so, allows us to add our Animation to the Stage as an Actor.This game code includes lots of code, 400+ lines.
Imports and Game Class -
Include all the import statements for the code we are including. So, we include imports for: Orthographic Camera, Viewport, Texture, TextureRegion, Image, Stage, Actor, InputProcessor, ChangeListener, TextButtonStyle, Label, Actions, Color, BitmapFont. If you don't include a required import, you will most likely get a 'unknown entity' error, or 'unknown member' error. To correct, just include the required import, and run/build your code again.
Variables At variables we include the class members and then our named variables for each of them. So, for this tutorial, we include as shown in this next few images.
We use Texture to load the background castle image. We load each game character with Texture, then declare it as Image, that way, we can easily add the Image to the Stage(as Actor). For the castle guards, we use the same character, but we want several of them. So, to do this, we just declare the same Texture name for each of the Image names we create; castle guards 1 -4.
We include two white tigers, one is for the tiger resting, the other, the tiger is walking.
And, we include 'warriorfr1', which is frame one of the animation, which has four frame stances. It's the stance of the warrior when he is not firing its' wand. This will be used at the end of our warrior animation action, when we want the warrior to move across the game screen away from the flying dragon.
Next, we code members and variables for the camera and viewport, and texture and textureregion. Also, the textbutton, bitmap font, labels, and the custom animation. And, we include for 'boolean', our game logic, and 'int' for the score keeper.
Create - At create method, we include the new instances of all the class members we are coding for this tutorial, and we create the 'Custom Animation' class. A custom animation is necessary because we are adding the four frames for the animation, and we want each frame to have a unique time set. Because of the unique time settings, we create our animation as a custom animation.
Following we have included code shots of the codes from the create method with explanation of their purpose.
This next image shows how the spritesheet is loaded from Texture, and then we get the frames with TextureRegion. Note, we have two TextureRegions we use, first one is 'tmp' variable, which will split the spritesheet, and the other 'walkFrames' variable, this will take columns x the rows for us, to get the total frames from the spritesheet. Then all the frames are used in our custom animation.
This image shows how the time is set for each frame of the animated warrior. You can set them as you want. The time if based on seconds, like 1/15 second, 1/30 second.
The code in this image, shows how to code the text button, which is the 'Play Game Button'. Because we are adding text button we will see text on the screen, not an image of a button per say. If we wanted to add an image for the play button instead, we would have to use ImageButton. You can create your own Image Button and add the text onto it as you want. Here, for our TextButtonStyle, we can set its' color size, and position on the game screen.
To add the dragon and white tiger we use the following code. First, to load each we use Texture, then declare them as Image, and set their size and position on the game screen. We can also hide or show them, by using the 'setVisible' attribute to 'true' or 'false'. So, dragon can be visible, since there is only one stance of it, and it is in the sky. However, for the white tiger, we have a rest and a walk stance. So, at first we want it to be lounging on the ground, so we add the myTigerL.png(resting), and that is what shows on the game screen at first. Since it shows by default once added, we don't have to set a visibility for it.
However, for the other tiger, with walking stance, myTigerF.png; we can add it to code, but we set it to 'setVisible'(false). That way, we only see the lounging white tiger on the game screen. But once the action starts, we can easily have the two tigers swap, and then we have the walking tiger on the game screen. You can see this as you watch the action of the tiger at the App Shot video. Once the flying dragon makes its' swooping move, the tiger gets walking towards the incoming flying dragon. So, all we have to do is swap tigers right when the action for the tiger begins, as seen in the next second image shot.
The white tiger stances and action are coded in this next image shot. To note, at first we have the walking tiger,myTigerF, as invisible. But cuz the action is to start, Now, we must make the lounging tiger disappear - myTigerL, while at the same time swap in the walking tiger- myTigerF. This next code shows how to do that.
We just set their visibility to either hide or show, with setVisible(false), or setVisible(true).
Then, once that's done, we can add our actions to the walking tiger; where we want it to go on the game screen. Looking at the App Shot video, you can see the tiger gets up, delays a bit, then walks towards the incoming flying dragon, and it stays there, until the dragon flies away. The tiger's short pause or delay is coded with the delay action of our Action class code.
You can set visibility for game characters, and also for labels you create. When using Stage and Actor of scene2d, Labels are created to add text to the game screen. First, you must add them as Actor to the Stage, and then you can action them, just like a game character, or fixed asset.
This next image, we create a label to show on the game screen, label name is'gameAdventure', that says" Wanbu and Tig's Adventure...' but this label's text shows only briefly when the game begins, which is what we want.
But then we want it to disappear from the screen. So, we can set it hide or show(with setVisible(true)(false); set to show, when we first add it in code, and, also set, and change their visibility when we add actions to our characters or labels. Labels, like game characters, must be added to the stage with Actor.
You can add it when you create it, as we did here, or just add it to stage with all the other actors getting added, as shown in the following images.
When you create a Label, you give it a variable name, as you like. I tend to mostly use 'Label' in the variable name i create, making it easier to recognize and organize them, especially in larger codesets like this one.
In this next image of the label, we have set its' visibility to 'false', soon after the game Action begins. If you watch the App Shot video of the game, you see the text appears on the screen then disappears soon after the game begins. First, the player must click or tap the 'Play Game' text button, then the action begins, and then the text 'Wanbu and Tigs Adventure...' disappears from the game screen.
Once the Play Game text button is tapped, this game does not require user input, it simply runs its action scenes(a loop) then it stops, and adds 5 points to the score keeper.
Once we have coded all the game characters, and set their positions, we must add them all to the Stage, by using the Actor, as shown in this next image. The 'inputProcessor' must also be set, as this is what executes all the actions we want to code.
Now, that we have added all the game characters - their positions, and added all of them to the stage, we can now code our 'ChangeListener' and add our game actions to the listener.
When a player taps the 'Play Game' text button, all the actions happens in a sequential manner. Like a loop, each time the 'play game' button is tapped, the actions complete their cycle. And, at the end of the game action, the score keeper will increment by 5 points. This is a single run game, and we did not include code to keep track of the points, so the game will only keep score the one time. You can however, exit the app, then reopen the app, and play the game again. Each time it is played, the score keeper will post the 5 points. At the Example code section on this page, you can see all the actions that we added to all the game characters, and the labels(the text you see on the screen) we included.
Once the animated wand warrior is done destroying the chiibi bandits, he must move on the screen to the right, because the white tiger has alerted him that the flying dragon is approaching. So, we don't need the warrior to be animating anymore at this point in the action, so what we do is swap out the entire animation(4 frames) for just one frame, and that is the first frame, the frame where the warrior is not shooting his wand. You can see this in the image of the spritesheet at Example code section. We can do this in our Action class sequence. To do this, we first set our Image variable - animatedWarrior, visibility to false, with, setVisible(false), this removes it from the game screen, then, we swap in the first frame only, with our Image variable named 'myWarriorfr1', and we set its' visibility to true with, setVisibile(true). Now that we have swapped in frame 1, we can add the action to it.
This next image shows the code to move our 'myWarriorfr1', across the game screen to its' right.
The last action code we included is shown in this next image. Here we code the 'ScoreKeeper' label and logic so that it will increment by 5 points each game run. We did not include a tracker to tally the score, so it will only keep score once. And, then lastly, we have our game over label, that we have set a delay on, so it only begins to appear on the screen after all the action has completed. To do this, we must first set its' visibility to false, then to true, and set the delay for how many seconds we want.
Render - At render method, we first clear the game screen, and then set our new screen color. Because with this code we are using a castle background image, we will draw it with the batch draw code call, as shown in this next image. And, we want to start the draw at 0,0, meaning for width and height, begin at 0,0, on the game screen, which is the bottom left corner. And, then we want it drawn to 720 for width, and 1340 for height. These values can be adjusted as needed.
This would depend on the screen size you base your game on, and also the size of the image your working with. In this scenario, we only want it to look good on the 5.8" smart phone screen, and these values of 720, 1340 are good for that.
We also must draw all our game characters, the animatedWarrior, the warrior guards, the chiibi bandits, the white tiger, and the flying dragon. Because we are using Stage, of scene2d, we can easily add all our game characters, with Stage.draw(). We must also include the stage.act, and the deltaTime code.
Dispose - At dispose method, we should dispose of all our game assets, to keep our game performance at its' best. If using Stage, and Actor, for our variables, we can dispose of all those assets at once, with 'Stage.dispose();' code call, otherwise we can dispose of each variable directly. Here we will dispose of the background asset, and the walk sheet asset, with batch dispose. All else is disposed of using stage.dispose().
Summary
Castle Game is a one loop action game that requires no input from the player, other than starting the game by tapping the 'play game' text button. The game includes several fixed game characters - the four castle guards, and, the actioned characters - the three chiibi bandits along with the animated wand warrior with his white tiger.We included a simple score keeper to add 5 points when the action cycle loop completes, and a game exit button, to exit the app. This game was made with only one game screen, and we posted the Play Game, Exit App, and Score Keeper, on the same screen also.
Coding with Image and Actor, you can add your game characters and then set their visibility to have them either show or hide. This is ideal if you want to introduce some of the game characters later in the game play. And, you can also add your game labels(text on screen) as Actors, and like game characters, easily add them where and when you want in the game scene.
By working with Stage, Actor, and Actions class of Libgdx Scene2d, you can create a simple game scene as we have done here, and add game characters at intervals in the game, allowing for more creativity in your game scenes. The Action class of scene2d, has many action selections you can implement for game character interactions. We have already completed several tutorials that have covered many of the Actions available.
If you want to see a simple game made with more than one screen, go to our tutorial, Game: Pixelart Warrior.
EXAMPLE CODE - Code For This Tutorial.
JUST copy and paste to update your code.
JUST copy and paste to update your code.