Libgdx with Android For Game Dev
Game Dev Tutorial:Creating a Simple Game with Pixelart Warrior Action and Score Keeper
Game Dev -All Game Dev Tutorials
In this tutorial, we are going to create a very simple game with three screens, and use Switch Screen method to switch amongst the game screens. On screen one we add a game logo, and a Label with text that when tapped navigates to screen two. At screen two, we add more labels for text, and we code an ImageButton- the 'play game button'; that when tapped, actions the pixelart game warrior. From game two we can switch to game screen three, where we can either exit the game and app, or tap to return to the game play screen and play the game again.
We are also including a 'score' keeper on the play game screen which will increment by five points each time the warrior completes the action and returns to its' start position. The score keeper will keep adding points each time we play the game until we 'exit' the app from the game over screen. The game over screen also has a Final Score label, which shows the score as it showed on screen two. To code this game app, we are going to use Switch Screen method along with Game class, and from Scene2d - Stage, Actor, Image, Label.
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; App Name here 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" Game Screen
Pixelart Warrior Game
If we don't include all required class members or imports, we will most likely get an 'unknown entity' error when building the app code. To fix the error, just add the required class member or import, and then RUN/BUILD the app code again.
Imports and Game Class -
Variables At variables we include the class members and then our named variables for them We can name the variables as we want, so usually name them so it makes sense to you. Note here, we added 2 Image class members, one for the logo image on screen one, and one for the warrior image on screen 2. We name them - 'menuLogoImage', and 'warriorImage' Then we add them to the Stage as actors using those names. At class members we also add the 'int' for our switch screen code, and set it with a 0 integer. And, the same for our score, we also include 'int' class member and set that to 0. Also we add Stage, but not Actor. Actor is included with Stage, so we need only add the class member for stage.
We also include class member, ImageButton and name our variable 'playButton' for it. To load our game assets to the game, we must use Texture class member. Since we have three assets to load, we must add 3 Texture class members - one for 'logoTexture', one for 'warriorTexture', and one for 'playTexture'. Like mentioned, you can name them as you want, I used Texture after each name to simplify things; with a glance I know those are all my textures names to use, cause of word Texture at the end of their name. I also did the same with the menuLogoImage, and warriorImage, names i used. Because Image is at the end of these names, just makes it easier to see whats what. I know that these with Image at the end of the name are going to be my actor names that I add to the Stage.
Also for class members, we include BitmapFont name it font, and Spritebatch and name it batch. We will use these two class members to create our game font(text) and then draw them to the game screens.
Create - At create method, we include the new instances of all the class members we are going to use. We create new instance of BitmapFont, Spritebatch, OrthographicCamera, ExtendViewport, InputProcessor, and SwitchScreen.
In the Create method, we load all our game assets with the Texture code call, then we set their size and positions, and set their visibility, if required. Also in Create method, we add all the game assets to the Stage with the Actor code call. So, first we load our 3 assets, then we declare them as Image(for logo and warrior), and ImageButton(for the play button). Then we declare them each as an Actor, and then add the 3 actors to the Stage, as shown in this next image of the game code.
The play button image is declared as a ImageButton, and gets coded with TextureRegionDrawable, and added to Stage with actor name 'playButton'. Whatever name we use to add them as Actors is the name we use to do any action on them. So, if we want to add action to ImageButton class member, then we use the name 'playButton'(variable name we gave it), because that is the Actor name for it.
Switch Screen Method - this method is where we add all our code for the three game screens - including game assets, text, and game character actions. When using Switch Screen, we must give numerical values to each game screen; so screen one is known as case 0, screen 2 - case 1, and screen 3, case 2. Since Switch Screen works with 'case' to facilitate the screen switches, we can easily add additional game screens, which makes Switch Screen with Game class ideal for scalable games.
You can use Label with Switch Screen method. This is how we add our text to the game screens. You can also color the text you create. We learned about adding style to the game screens in our previous tutorial. Within Switch Screen method, we can incorporate the screen switches, add the text labels, and also add our click listeners, which allow us to add interactions as the text or buttons on screen are tapped.
So, Switch Screen is a very useful method for creating and setting your game screens. Each screen is added as a separate block of code in this method. Then just add whatever you want to each screen. In this case, we code for three separate game screens, than add to each what we want included: labels for text, color to color the text, image for that screen's graphics, and attach click listeners to wherever we want to add interaction on a particular game screen.
Within the Switch Screen method, must first clear the actors from the stage as seen in this next image of screen 1 code. Then, at Screen 1, (case 0 ), we add the Label for menu, and we add a click listener to it, so we can tap the text and goto screen 2 - the play game screen.
At screen 2(case 1), we add the Labels for Exit(goes to screen 3), and Score(tallies the score by 5). And, we add the game warrior, and game action to the warrior. The button has the click listener attached so when it is tapped, the warrior is actioned around the screen and then returns to its' starting position. Each warrior run tallies the score by 5. The score keeper code is added to the warrior action. When the action sequence completes we added logic so that the score keeper will add another 5 points. This can be any increment you want. The game warrior and play button are added as mentioned to the Create method code, however, there we set their value as invisible with value 'false'. At the screen you actually want them to display on you can set their visibility to 'true', meaning they appear on the game screen.
This next code image, shows the action sequence code, and the 'playbutton' actor is attached to the click listener. When the user taps the play button on screen, the warrior action begins. When the action completes the score increments by 5 points, and the 'You Won' text appears on screen.
Also, to include the score code, we must use the New Runnable code call. This is required because we are adding it to an action sequence. In a previous tutorial, Explosion Action Stage , we also used a New Runnable code; in that scenario, it was to add sound to our action sequence.
For the warrior action, we included several MoveToAction code calls, MoveBy, RotateBy, MoveTo, FadeOut, FadeIn. We learned about adding 'actions' in previous tutorials. Note here that we include the Runnable action to implement the score tally, and next, after that, the warrior fades out, fades in; its' action completes; and with that, the Label, 'Game Over, You Won!', appears on the screen.
This label will only show after the warrior action moves have completed, as shown in this next image of the code. It will only show here because we set its' visibility to 'true', similar to how we set the visibility of our game images. So, we created the Label for this, and set its' value to 'false', so it will not show on the game screen(screen 2). But at the conclusion of our action sequence, we do want it to show, so we include it in the action code where we want it to appear; and make it appear by now setting the visibiliity value to 'true'.
Here's how it looks in code, to make it not visible and visible.
//at Label creation do not show
gameOverYouWonLabel.setVisible(false);
//at the action code we set it to visible
gameOverYouWonLabel.setVisible(true);
At screen 3, we code three labels: Final Score, Game Over Play Again, and Exit App. We add the Play Again label with a click listener attached. When the user taps this text, they go to screen 2 to play the game. Otherwise, the user can tap the Exit App text and exit the game - exit the app. It also has a click listener attached to it. This code; 'Gdx.app.exit()', exits the user from the app when the text label is tapped.
This next code has the Final Score Label, and this text in the code '+ score' is what gets the score from game screen 2 and displays it at Final Score on screen 3. It's the math logic for adding something.
Label finalScoreLabel= new Label("Final Score: " + score, new Label.LabelStyle(font, Color.ORANGE));
Render - At render method, we first clear the game screen, and then set our new screen color. Because the screens in this app are all the same color, we can set the color once in the Render method. If however, we want the screens to have individual color, we also can set those colors in the Render method. For multiple game screen colors, we can easily implement the 'switch' case function code, to show the correct screen color for the game screen we are currently displaying. For more info on styling your game screens, see our previous tutorial: Create Game Screens: Style with Color, Labels
Render method, is where we draw our game graphics to the screen. So this would include images, fonts, game characters, and the like. Because we are using Stage, we can draw them to stage with the 'stage.draw()' code call, otherwise we would have to load them separately with the batch call, as we have done in previous tutorials.
Dispose - At dispose method, we get to dispose of all our game assets, to keep our game performance at its' best. If using Stage, we can dispose of all assets at once, with 'Stage.dispose();' code call, otherwise we can dispose of each variable directly.
A click listener was added to the button; when tapped, it actions the warrior. We action the warrior with MoveToAction function, which has several action types we can select to use. We learned about these in our previous tutorials. We can also include 'sequence' with the code, so all the actions run one after another. And, within that same code, we add the code to increment our score. This is basic math logic we added. The score increments by 5 points after the warrior completes its' screen action.
The warrior character is added to the game first in the create method, where we load it to screen with the Texture code call, and then declare it as our game Image, a code call that works with Stage and Actor, of Scene2d. We set its' visibility to 'false' in the create method, so that the warrior character does not appear on game screen 1. However, in game screen 2(aka case 1) we set its' visibility to 'true' because we want the warrior to appear on game screen 2.
From screen 2, we tap Exit to go to screen 3, the 'game over' screen. Here, we set a Label that reads 'Final Score' and it shows the game score from game screen 2. We also included a 'Play Again' label, with a click listener, so we can return to game screen 2 to play the game again. And, lastly, we add the 'Exit App' label, with a click listener, which when tapped exits the game and app.
Working with Switch Screen method, and Game class, we can easily add game characters and labels to our individual game screens, and smoothly switch amongst the game screens. We can include the 'visibility' property at Create method, when adding the warrior character, so our game character does not appear on screen 1, and, then have it appear on whatever screen we want by simply setting the visibility property on that game screen's code. That is what we did with this warrior character. Because we wanted it to display on screen 2 only, we set the visibility value to 'false' at Create method, but to 'true', at screen 2, in the Switch Screen method's code.
Switch Screen method makes it easy to navigate your game screens, and add game assets and fonts to the individual game screens. We can also add click listeners to our game characters and fixed assets to facilitate simple and complex game interactions. Stage, Actor, Image, Label, and, Switch Screen method, together with Game class, work well together to make simple or complex scalable games.
Game Dev -All Game Dev Tutorials
App Project Name: Pixelart Warrior Game
In this tutorial, we are going to create a very simple game with three screens, and use Switch Screen method to switch amongst the game screens. On screen one we add a game logo, and a Label with text that when tapped navigates to screen two. At screen two, we add more labels for text, and we code an ImageButton- the 'play game button'; that when tapped, actions the pixelart game warrior. From game two we can switch to game screen three, where we can either exit the game and app, or tap to return to the game play screen and play the game again.
We are also including a 'score' keeper on the play game screen which will increment by five points each time the warrior completes the action and returns to its' start position. The score keeper will keep adding points each time we play the game until we 'exit' the app from the game over screen. The game over screen also has a Final Score label, which shows the score as it showed on screen two. To code this game app, we are going to use Switch Screen method along with Game class, and from Scene2d - Stage, Actor, Image, Label.
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, Pixelart_Warrior_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.pixelart_simple_game'.Click Create; App Name here 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" Game Screen
Pixelart Warrior Game
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. We are working with Switch Screen Method, for our three game screens, so we include a separate coded class for Switch Screen. For our game class members we code for Label, LabelStyle, ImageButton, ClickListener, InputListener, Actions, Sequence Action, Stage, Actor. And, we also include Game class, as it is required and works best with the Switch Screen method we are going to implement.If we don't include all required class members or imports, we will most likely get an 'unknown entity' error when building the app code. To fix the error, just add the required class member or import, and then RUN/BUILD the app code again.
Imports and Game Class -
Variables At variables we include the class members and then our named variables for them We can name the variables as we want, so usually name them so it makes sense to you. Note here, we added 2 Image class members, one for the logo image on screen one, and one for the warrior image on screen 2. We name them - 'menuLogoImage', and 'warriorImage' Then we add them to the Stage as actors using those names. At class members we also add the 'int' for our switch screen code, and set it with a 0 integer. And, the same for our score, we also include 'int' class member and set that to 0. Also we add Stage, but not Actor. Actor is included with Stage, so we need only add the class member for stage.
We also include class member, ImageButton and name our variable 'playButton' for it. To load our game assets to the game, we must use Texture class member. Since we have three assets to load, we must add 3 Texture class members - one for 'logoTexture', one for 'warriorTexture', and one for 'playTexture'. Like mentioned, you can name them as you want, I used Texture after each name to simplify things; with a glance I know those are all my textures names to use, cause of word Texture at the end of their name. I also did the same with the menuLogoImage, and warriorImage, names i used. Because Image is at the end of these names, just makes it easier to see whats what. I know that these with Image at the end of the name are going to be my actor names that I add to the Stage.
Also for class members, we include BitmapFont name it font, and Spritebatch and name it batch. We will use these two class members to create our game font(text) and then draw them to the game screens.
Create - At create method, we include the new instances of all the class members we are going to use. We create new instance of BitmapFont, Spritebatch, OrthographicCamera, ExtendViewport, InputProcessor, and SwitchScreen.
In the Create method, we load all our game assets with the Texture code call, then we set their size and positions, and set their visibility, if required. Also in Create method, we add all the game assets to the Stage with the Actor code call. So, first we load our 3 assets, then we declare them as Image(for logo and warrior), and ImageButton(for the play button). Then we declare them each as an Actor, and then add the 3 actors to the Stage, as shown in this next image of the game code.
The play button image is declared as a ImageButton, and gets coded with TextureRegionDrawable, and added to Stage with actor name 'playButton'. Whatever name we use to add them as Actors is the name we use to do any action on them. So, if we want to add action to ImageButton class member, then we use the name 'playButton'(variable name we gave it), because that is the Actor name for it.
Switch Screen Method - this method is where we add all our code for the three game screens - including game assets, text, and game character actions. When using Switch Screen, we must give numerical values to each game screen; so screen one is known as case 0, screen 2 - case 1, and screen 3, case 2. Since Switch Screen works with 'case' to facilitate the screen switches, we can easily add additional game screens, which makes Switch Screen with Game class ideal for scalable games.
You can use Label with Switch Screen method. This is how we add our text to the game screens. You can also color the text you create. We learned about adding style to the game screens in our previous tutorial. Within Switch Screen method, we can incorporate the screen switches, add the text labels, and also add our click listeners, which allow us to add interactions as the text or buttons on screen are tapped.
So, Switch Screen is a very useful method for creating and setting your game screens. Each screen is added as a separate block of code in this method. Then just add whatever you want to each screen. In this case, we code for three separate game screens, than add to each what we want included: labels for text, color to color the text, image for that screen's graphics, and attach click listeners to wherever we want to add interaction on a particular game screen.
Within the Switch Screen method, must first clear the actors from the stage as seen in this next image of screen 1 code. Then, at Screen 1, (case 0 ), we add the Label for menu, and we add a click listener to it, so we can tap the text and goto screen 2 - the play game screen.
At screen 2(case 1), we add the Labels for Exit(goes to screen 3), and Score(tallies the score by 5). And, we add the game warrior, and game action to the warrior. The button has the click listener attached so when it is tapped, the warrior is actioned around the screen and then returns to its' starting position. Each warrior run tallies the score by 5. The score keeper code is added to the warrior action. When the action sequence completes we added logic so that the score keeper will add another 5 points. This can be any increment you want. The game warrior and play button are added as mentioned to the Create method code, however, there we set their value as invisible with value 'false'. At the screen you actually want them to display on you can set their visibility to 'true', meaning they appear on the game screen.
This next code image, shows the action sequence code, and the 'playbutton' actor is attached to the click listener. When the user taps the play button on screen, the warrior action begins. When the action completes the score increments by 5 points, and the 'You Won' text appears on screen.
Also, to include the score code, we must use the New Runnable code call. This is required because we are adding it to an action sequence. In a previous tutorial, Explosion Action Stage , we also used a New Runnable code; in that scenario, it was to add sound to our action sequence.
For the warrior action, we included several MoveToAction code calls, MoveBy, RotateBy, MoveTo, FadeOut, FadeIn. We learned about adding 'actions' in previous tutorials. Note here that we include the Runnable action to implement the score tally, and next, after that, the warrior fades out, fades in; its' action completes; and with that, the Label, 'Game Over, You Won!', appears on the screen.
This label will only show after the warrior action moves have completed, as shown in this next image of the code. It will only show here because we set its' visibility to 'true', similar to how we set the visibility of our game images. So, we created the Label for this, and set its' value to 'false', so it will not show on the game screen(screen 2). But at the conclusion of our action sequence, we do want it to show, so we include it in the action code where we want it to appear; and make it appear by now setting the visibiliity value to 'true'.
Here's how it looks in code, to make it not visible and visible.
//at Label creation do not show
gameOverYouWonLabel.setVisible(false);
//at the action code we set it to visible
gameOverYouWonLabel.setVisible(true);
At screen 3, we code three labels: Final Score, Game Over Play Again, and Exit App. We add the Play Again label with a click listener attached. When the user taps this text, they go to screen 2 to play the game. Otherwise, the user can tap the Exit App text and exit the game - exit the app. It also has a click listener attached to it. This code; 'Gdx.app.exit()', exits the user from the app when the text label is tapped.
This next code has the Final Score Label, and this text in the code '+ score' is what gets the score from game screen 2 and displays it at Final Score on screen 3. It's the math logic for adding something.
Label finalScoreLabel= new Label("Final Score: " + score, new Label.LabelStyle(font, Color.ORANGE));
Render - At render method, we first clear the game screen, and then set our new screen color. Because the screens in this app are all the same color, we can set the color once in the Render method. If however, we want the screens to have individual color, we also can set those colors in the Render method. For multiple game screen colors, we can easily implement the 'switch' case function code, to show the correct screen color for the game screen we are currently displaying. For more info on styling your game screens, see our previous tutorial: Create Game Screens: Style with Color, Labels
Render method, is where we draw our game graphics to the screen. So this would include images, fonts, game characters, and the like. Because we are using Stage, we can draw them to stage with the 'stage.draw()' code call, otherwise we would have to load them separately with the batch call, as we have done in previous tutorials.
Dispose - At dispose method, we get to dispose of all our game assets, to keep our game performance at its' best. If using Stage, we can dispose of all assets at once, with 'Stage.dispose();' code call, otherwise we can dispose of each variable directly.
Summary
In this tutorial, we learned how to code a 3 screen game app, and implement Label in order to add text to each game screen. We added color to the text also. We add a logo image to the first screen(pixelart game logo), and a 'Menu' text label, which when tapped switches to screen 2. At screen 2, we added a label 'Game Screen" and a 'Tap to Exit' text. A 'Score' label was added that shows the score as the game is actioned. The score keeper adds the numerical amount we set each time the warrior completes its' screen action . The play button is an image button we added, with the text pre added that says 'play now'.A click listener was added to the button; when tapped, it actions the warrior. We action the warrior with MoveToAction function, which has several action types we can select to use. We learned about these in our previous tutorials. We can also include 'sequence' with the code, so all the actions run one after another. And, within that same code, we add the code to increment our score. This is basic math logic we added. The score increments by 5 points after the warrior completes its' screen action.
The warrior character is added to the game first in the create method, where we load it to screen with the Texture code call, and then declare it as our game Image, a code call that works with Stage and Actor, of Scene2d. We set its' visibility to 'false' in the create method, so that the warrior character does not appear on game screen 1. However, in game screen 2(aka case 1) we set its' visibility to 'true' because we want the warrior to appear on game screen 2.
From screen 2, we tap Exit to go to screen 3, the 'game over' screen. Here, we set a Label that reads 'Final Score' and it shows the game score from game screen 2. We also included a 'Play Again' label, with a click listener, so we can return to game screen 2 to play the game again. And, lastly, we add the 'Exit App' label, with a click listener, which when tapped exits the game and app.
Working with Switch Screen method, and Game class, we can easily add game characters and labels to our individual game screens, and smoothly switch amongst the game screens. We can include the 'visibility' property at Create method, when adding the warrior character, so our game character does not appear on screen 1, and, then have it appear on whatever screen we want by simply setting the visibility property on that game screen's code. That is what we did with this warrior character. Because we wanted it to display on screen 2 only, we set the visibility value to 'false' at Create method, but to 'true', at screen 2, in the Switch Screen method's code.
Switch Screen method makes it easy to navigate your game screens, and add game assets and fonts to the individual game screens. We can also add click listeners to our game characters and fixed assets to facilitate simple and complex game interactions. Stage, Actor, Image, Label, and, Switch Screen method, together with Game class, work well together to make simple or complex scalable games.
EXAMPLE CODE - Code For This Tutorial.
JUST copy and paste to update your code.
JUST copy and paste to update your code.