Libgdx with Android For Game Dev
Game Dev Tutorial : Title - Dynamite Barrels Explode - Actioned Warrior
Game Dev -All Game Dev Tutorials
In this tutorial, we are going to implement an action sequence and create an explosion. We shall have our game character, a pixelart chiibi warrior, move across the screen towards a bridge, that has two barrels of dynamite next to it. When the warrior gets to the bridge the barrels explode; you can see the explosions, and you can hear the explosion sound. After the explosion, the warrior, and the bridge evap into nothing. In order to create this action, we must action our game assets with each other, and add the sound for the explosion.
We will accomplish this coordinated action by using the MoveToAction method of Scene2d of Libgdx. By using Stage, and Actor of Scene2d(Libgdx), we can easily link all our actions together, and have them Fadein(appear), Fadeout,(disappear),MoveTo(move across the screen), and include a sound(mp3) to emulate(Runnable Action) the explosion sound. As with previous tutorials, we need only add the actions we want, and link them together using the sequence code call. Timing is also important here, as we want the warrior's approach to be timed with the explosion, and we want the explosion to be timed with the explosion sound. We'll explain how we did this, as we discuss each section of coding.
All code for this tutorial is at the Example Code section on this page. You can save the game images, and the sound file to your device. To view this game screen action, you can click the play button at AppShot to see the warrior moving towards the bridge(with the dynamite barrels), and the explosion.
Click Create; Kaboom Actions game app is created, and the MyGdxGame.java page opens in your AIDE coding editor.
App Shot Video- Kaboom Action
Portrait 5.8" Game Screen
Click the Play button to see the Explosion action.
Import statements - we first code our import statements by adding all the required ones for the code calls we are implementing. We include the imports for Spritebatch, Viewport, Camera, Stage, Actor, Texture, Image, Actions, Sound, and all the code calls we are working with in code.
After coding our import statements, and before adding our 'variables' code, we code our public 'game class', as this code is required for the game screen and which one we use determines what we can execute in our code. The ApplicationAdapter class is the public class we are going to use for this game screen coding. There are other game screen classes we shall learn about when we begin to add additional game screens to our game play.
Variables -
The code calls for Stage, SpriteBatch, OrthographicCamera, ExtendViewport, Texture, Image, Sound, are coded at our variables, and then we create a variable name for each of them(name them as you like), as shown in this next image. So, first we add the code call name, then we create a variable name for it. Because we must first add our game images as 'Texture', we require a variable for them, and because we are adding the images also as 'Image', code call, we must create variables for those also.
So, we create the variable names for each of these code calls we are going to use: For our texture call variables, we create textureWarrior, textureBarrels, textureBoomOne, textureBoomTwo, and for our Image code call, we create the variables: imageWarrior, image Barrels, imageBoomOne, imageBoomTwo, and we also create a variable for the Sound, is explosionSound, which is the sound file that plays after each explosion image is seen, like, Kaboom. Because the explosion image is coded twice, (2 separate images), we then add the sound file to each of them. The same sound file can be used for both. We simply code the sound file when we code each explosion image. Note, we did not create a variable for Actor in this tutorial. Because of the context in which we are using Actor, a variable is not required, because Actor is included with Stage, and we did create a variable for Stage. In another scenario, you might have to include the Actor as a variable. We do however, have to include the 'import statement' for Actor.
FYI; Variable names(code calls) are capped including any additional words added together. However, the variable names we create for those code calls are not all capped. They are 'camel cased'.
Variable names are lower case, and if using more than one word, then we camel case the letters. So, for our example, our code variables; Stage stage, Texture textureWarrior, we used lower case for the s in stage, cuz its only a one word variable we created, but for Texture we used textureWarrior as the variable name, so we cap the second word's first letter. If you use three words together, then the second and third words first letter would be capped, but leave the first letter in the first word uncapped. This is how we camel case our variable names.
Create -
Next, after coding our variables, we must create instances of all the code methods we are going to use. This usually means creating instances of all the variables that we added to code. In the following code photos, all code calls are for the Create Method, except for the Render, and Dispose methods.
Note, that first we must add the 'Texture' call to add all of our required images. Then from that we create new instances for the Image code call. This is important, since we want to add actions to our game assets, the warrior, dynamite/bridge, explosion images, the explosion sound mp3 file; and by using the Image code call, we do so easily, with the MoveToAction method. However, to use MoveToAction, we need to create an Actor for each of the game assets we add and use for our action sequence.(the images and sound file).
First, we create the instances of our spritebatch, viewport, camera, and stage, making sure to include the float code for screen width and height.
Create Camera, Viewport, Stage
Load Images with Texture; Load Audio with Sound
Next, we load all our game images as a 'Texture' code call as shown in this next photo of our code. And, we load the sound file as 'explosion-sound-cr.mp3'. Note, the code 'gdx.files.internal'. This tells the system to look for our assets (images and sound file) in the assets folder at 'gdx.game-android' of the app Project; Kaboom Actions
Declare Texture as Image -
Next, we declare our Texture calls as Image calls, and add the variable names we gave each of them. We are declaring them as an Image call, because Image call works with Stage(of Scene2d), and by using Image and Stage, we can add the actions to our game warrior, barrels (with dynamite), and include our boomOne(sound), boomTwo(sound).
Working with Stage, makes it easy to action our game assets.
Also in this code, we want to set the size and position for the warrior, and barrels, and code it as shown in this next photo. The 'imageWarrior' is set to size 128,128, and its' starting position is 8,16. That's 8 for width(x) and 16 for height(y), along the x and y axis of the game screen. And, for the 'imageBarrels', size of 256,128, and starting position of 430,30; along the x and y axis of the game screen. The barrels don't actually move during the action sequence they remain at their starting position until they are faded out of the game action. The warrior does move from its' position as it heads across the game screen towards the bridge with the two dynamite barrels.
We don't actually set the size for the sound. Because we want to keep the kaboom images hidden until the explosion occurs, we can do that by using the code: imageBoomOne.getColor().a = 0. This hides our explosion images until we fade them into the game screen. We want to fade them in when the warrior reaches the bridge with the dynamite barrels.
Declare Image as Actor; Add Actors to The Stage
First we loaded our game assets as 'Texture', then we declared Texture as our Image,(Image calls). Now we can take Image and add them as Actor to our stage. Once we add them each as an Actor, we can begin to add the action to each of them. Adding the Actor code is easy to do, as shown in this next photo of our code. We must add each variable name as we declare them as Actor.
Now that we have our Actor calls coded, we can being to add the actions we want to them. We also want our actions to happen in a sequence manner, so we must include the action sequence in our actions code. For each action we first must state our variable, the add the addAction, and then add actions.Sequence. Let's look at the code for each variable, and each action we added.
The warrior(a pixelart chiibi warrior we created), we want to move it to the position of width 370f, on the game screen, and 30f for height, and we want it to do so in 3 seconds, 3f. Lastly, we want the warrior to fadeOut at 5 seconds, 5f.
Next, is the boomOne, and boomTwo, actions. We want them to delay slightly, then fadeIn, one after another, hence our two explosion images, and then the explosion sound is heard at each explosion image. This is all timed to the warrior. Once the warrior reaches the bridge, the explosion sequence begins. We wanted to have two explosion images shown, one after the other, together with the explosion sound. The sound file is the same sound just actioned twice, once on each explosion image that we added.
Once the explosion occurs, we wanted the warrior and the bridge and barrels to evaporate into the explosion. So, we had to time the explosion sequences with the fading out of the bridge and the fading out of the warrior. This is just a matter of setting times and then running the app code to see how it plays. It took a few tweaks to get it proper for the timing.
Adding Sound to Our Action
The code for the 'sound' was most interesting. We add the sound code directly to the first image code-imageBoomOne, and second imageBoomTwo explosion images. To get the sound file action(it plays, we hear the explosion sound), we have to code it as a New Runnable as shown here.
We first delay the boomOne image, then fade it in using 2.1f, meaning fade it in at 2.1 seconds. Then we add the sound file with the code Actions.run(new Runnable() code. The (0.8f) is the loudness you want for the sound file. All code in bold is for the 'sound' action itself. Lastly, we fadeOut the boomOne image in 0.1f, seconds. We use the same code for the second Kaboom, only we tweak the timing so it occurs slightly after the first boom image and sound.
imageBoomOne.addAction(Actions.sequence(Actions.delay(1.6f),
Actions.fadeIn(2.1f),
Actions.run(new Runnable() {
@Override public void run(){
explosionsound.play(0.8f); }}),
Actions.fadeOut(0.1f)));
Looking at this photo of the 'sound' code, you can see the second image(imageBoomTwo) is faded in a slight time after the first boom image(imageBoomOne).
Action the Game Assets
Looking at the photo of the 'action' code, you see that we start the code by coding first for the warrior. As the warrior begins the action we usually use that as our code starting point. And, we can also include in that code, the fadeOut action for the warrior even though it occurs after other points of action in our game. This is where 'timing' for your action becomes important. As long as your coordinate all the timing of each action scene you can code each at the same time.
After the warrior we included the code for each of our explosion images, along with the sound file. Again, we just have to include the 'timing' so they all sequence as we want them to.
Our last coded action is for the fading out of the bridge and barrels along with the warrior.
With this tutorial you have seen one way to action your game characters easily. Using the MoveToAction method of Scene2d, you can incorporate your own creativeness to action your Android game.
Add Actions to The Actors
At Render method, we include our ProjectionMatrix code, and set the screen color. And, we code the 'stage.act', and include the important 'delta time', which is required for our timing sequences to properly process. Stage.draw is used here, because we are using 'Stage', we don't have to code each game variable directly. Stage draw will draw them all to the screen for us. We must however, still include the batch.begin, and batch.end code calls. Lastly,stage.getViewport.update, also important as it updates our screen for size when necessary.
FYI: when drawing your assets to the game screen; by using Stage, you don't have to code each game asset separately; one code call draws them all to the screen, and one call disposes of them. This could save a lot of coding, especially in larger mobile games that have a lot of assets.
Render -
Dispose
As with all game code, we must dispose of our game assets in the Dispose method. Here we only have to use stage.dispose. Coding each assets directly is not required, again, because we are using the Stage. If not using Stage, then we would have to dispose of each asset separately, as you have done in previous tutorials.
Here we list the many actions available for characters in your mobile game app.
MoveTo - moves your actor to specific location, shown in this tutorial with our warrior character moving across the game screen,
Delay - delays execution for a time given; shown in this tutorial to delay the fading in of our explosion images, and also shown at our Twirl Warrior tutorial.
FadeIn - bring character into view at certain position, shown with fading in our explosion images in this tutorial,
FadeOut - shown in this tutorial as we fade out the explosion images, and the warrior character; and also shown in our previous tutorial, warrior tutorial,
FadeTo - changes alpha of your actor from actor's current alpha to specific value,
MoveBy - as shown in previous tutorial,
RotateBy - rotates your actor by specific angle: shown in previous warrior tutorial,
RotateTo - rotates your actor to specific angle, similar to rotate by.
ScaleTo - scales your stage actor.
For Composite actions that combine multiple actions in one action, there are:
Parallel action; actions act together, shown in our 'Parallel Action' tutorial, previous tutorial.
Sequence action; after each other, shown in this tutorial, and previous tutorials also.
And, these are available also:
Repeat - repeats given action n-times,
Forever - repeats given action forever; shown in Twirl Warrior tutorial.
Remove - removes given Actor from stage,
Game Dev -All Game Dev Tutorials
App Project Name: Kaboom_Actions
In this tutorial, we are going to implement an action sequence and create an explosion. We shall have our game character, a pixelart chiibi warrior, move across the screen towards a bridge, that has two barrels of dynamite next to it. When the warrior gets to the bridge the barrels explode; you can see the explosions, and you can hear the explosion sound. After the explosion, the warrior, and the bridge evap into nothing. In order to create this action, we must action our game assets with each other, and add the sound for the explosion.
We will accomplish this coordinated action by using the MoveToAction method of Scene2d of Libgdx. By using Stage, and Actor of Scene2d(Libgdx), we can easily link all our actions together, and have them Fadein(appear), Fadeout,(disappear),MoveTo(move across the screen), and include a sound(mp3) to emulate(Runnable Action) the explosion sound. As with previous tutorials, we need only add the actions we want, and link them together using the sequence code call. Timing is also important here, as we want the warrior's approach to be timed with the explosion, and we want the explosion to be timed with the explosion sound. We'll explain how we did this, as we discuss each section of coding.
All code for this tutorial is at the Example Code section on this page. You can save the game images, and the sound file to your device. To view this game screen action, you can click the play button at AppShot to see the warrior moving towards the bridge(with the dynamite barrels), and the explosion.
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, Kaboom Actions(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.explosion_example'.Click Create; Kaboom Actions game app is created, and the MyGdxGame.java page opens in your AIDE coding editor.
App Shot Video- Kaboom Action
Portrait 5.8" Game Screen
Click the Play button to see the Explosion action.
Code For This Tutorial
After coding our import statements, and before adding our 'variables' code, we code our public 'game class', as this code is required for the game screen and which one we use determines what we can execute in our code. The ApplicationAdapter class is the public class we are going to use for this game screen coding. There are other game screen classes we shall learn about when we begin to add additional game screens to our game play.
Variables -
The code calls for Stage, SpriteBatch, OrthographicCamera, ExtendViewport, Texture, Image, Sound, are coded at our variables, and then we create a variable name for each of them(name them as you like), as shown in this next image. So, first we add the code call name, then we create a variable name for it. Because we must first add our game images as 'Texture', we require a variable for them, and because we are adding the images also as 'Image', code call, we must create variables for those also.
So, we create the variable names for each of these code calls we are going to use: For our texture call variables, we create textureWarrior, textureBarrels, textureBoomOne, textureBoomTwo, and for our Image code call, we create the variables: imageWarrior, image Barrels, imageBoomOne, imageBoomTwo, and we also create a variable for the Sound, is explosionSound, which is the sound file that plays after each explosion image is seen, like, Kaboom. Because the explosion image is coded twice, (2 separate images), we then add the sound file to each of them. The same sound file can be used for both. We simply code the sound file when we code each explosion image. Note, we did not create a variable for Actor in this tutorial. Because of the context in which we are using Actor, a variable is not required, because Actor is included with Stage, and we did create a variable for Stage. In another scenario, you might have to include the Actor as a variable. We do however, have to include the 'import statement' for Actor.
FYI; Variable names(code calls) are capped including any additional words added together. However, the variable names we create for those code calls are not all capped. They are 'camel cased'.
Variable names are lower case, and if using more than one word, then we camel case the letters. So, for our example, our code variables; Stage stage, Texture textureWarrior, we used lower case for the s in stage, cuz its only a one word variable we created, but for Texture we used textureWarrior as the variable name, so we cap the second word's first letter. If you use three words together, then the second and third words first letter would be capped, but leave the first letter in the first word uncapped. This is how we camel case our variable names.
Create -
Next, after coding our variables, we must create instances of all the code methods we are going to use. This usually means creating instances of all the variables that we added to code. In the following code photos, all code calls are for the Create Method, except for the Render, and Dispose methods.
Note, that first we must add the 'Texture' call to add all of our required images. Then from that we create new instances for the Image code call. This is important, since we want to add actions to our game assets, the warrior, dynamite/bridge, explosion images, the explosion sound mp3 file; and by using the Image code call, we do so easily, with the MoveToAction method. However, to use MoveToAction, we need to create an Actor for each of the game assets we add and use for our action sequence.(the images and sound file).
First, we create the instances of our spritebatch, viewport, camera, and stage, making sure to include the float code for screen width and height.
Create Camera, Viewport, Stage
Load Images with Texture; Load Audio with Sound
Next, we load all our game images as a 'Texture' code call as shown in this next photo of our code. And, we load the sound file as 'explosion-sound-cr.mp3'. Note, the code 'gdx.files.internal'. This tells the system to look for our assets (images and sound file) in the assets folder at 'gdx.game-android' of the app Project; Kaboom Actions
Declare Texture as Image -
Next, we declare our Texture calls as Image calls, and add the variable names we gave each of them. We are declaring them as an Image call, because Image call works with Stage(of Scene2d), and by using Image and Stage, we can add the actions to our game warrior, barrels (with dynamite), and include our boomOne(sound), boomTwo(sound).
Working with Stage, makes it easy to action our game assets.
Also in this code, we want to set the size and position for the warrior, and barrels, and code it as shown in this next photo. The 'imageWarrior' is set to size 128,128, and its' starting position is 8,16. That's 8 for width(x) and 16 for height(y), along the x and y axis of the game screen. And, for the 'imageBarrels', size of 256,128, and starting position of 430,30; along the x and y axis of the game screen. The barrels don't actually move during the action sequence they remain at their starting position until they are faded out of the game action. The warrior does move from its' position as it heads across the game screen towards the bridge with the two dynamite barrels.
We don't actually set the size for the sound. Because we want to keep the kaboom images hidden until the explosion occurs, we can do that by using the code: imageBoomOne.getColor().a = 0. This hides our explosion images until we fade them into the game screen. We want to fade them in when the warrior reaches the bridge with the dynamite barrels.
Declare Image as Actor; Add Actors to The Stage
First we loaded our game assets as 'Texture', then we declared Texture as our Image,(Image calls). Now we can take Image and add them as Actor to our stage. Once we add them each as an Actor, we can begin to add the action to each of them. Adding the Actor code is easy to do, as shown in this next photo of our code. We must add each variable name as we declare them as Actor.
Now that we have our Actor calls coded, we can being to add the actions we want to them. We also want our actions to happen in a sequence manner, so we must include the action sequence in our actions code. For each action we first must state our variable, the add the addAction, and then add actions.Sequence. Let's look at the code for each variable, and each action we added.
The warrior(a pixelart chiibi warrior we created), we want to move it to the position of width 370f, on the game screen, and 30f for height, and we want it to do so in 3 seconds, 3f. Lastly, we want the warrior to fadeOut at 5 seconds, 5f.
Next, is the boomOne, and boomTwo, actions. We want them to delay slightly, then fadeIn, one after another, hence our two explosion images, and then the explosion sound is heard at each explosion image. This is all timed to the warrior. Once the warrior reaches the bridge, the explosion sequence begins. We wanted to have two explosion images shown, one after the other, together with the explosion sound. The sound file is the same sound just actioned twice, once on each explosion image that we added.
Once the explosion occurs, we wanted the warrior and the bridge and barrels to evaporate into the explosion. So, we had to time the explosion sequences with the fading out of the bridge and the fading out of the warrior. This is just a matter of setting times and then running the app code to see how it plays. It took a few tweaks to get it proper for the timing.
Adding Sound to Our Action
The code for the 'sound' was most interesting. We add the sound code directly to the first image code-imageBoomOne, and second imageBoomTwo explosion images. To get the sound file action(it plays, we hear the explosion sound), we have to code it as a New Runnable as shown here.
We first delay the boomOne image, then fade it in using 2.1f, meaning fade it in at 2.1 seconds. Then we add the sound file with the code Actions.run(new Runnable() code. The (0.8f) is the loudness you want for the sound file. All code in bold is for the 'sound' action itself. Lastly, we fadeOut the boomOne image in 0.1f, seconds. We use the same code for the second Kaboom, only we tweak the timing so it occurs slightly after the first boom image and sound.
imageBoomOne.addAction(Actions.sequence(Actions.delay(1.6f),
Actions.fadeIn(2.1f),
Actions.run(new Runnable() {
@Override public void run(){
explosionsound.play(0.8f); }}),
Actions.fadeOut(0.1f)));
Looking at this photo of the 'sound' code, you can see the second image(imageBoomTwo) is faded in a slight time after the first boom image(imageBoomOne).
Action the Game Assets
Looking at the photo of the 'action' code, you see that we start the code by coding first for the warrior. As the warrior begins the action we usually use that as our code starting point. And, we can also include in that code, the fadeOut action for the warrior even though it occurs after other points of action in our game. This is where 'timing' for your action becomes important. As long as your coordinate all the timing of each action scene you can code each at the same time.
After the warrior we included the code for each of our explosion images, along with the sound file. Again, we just have to include the 'timing' so they all sequence as we want them to.
Our last coded action is for the fading out of the bridge and barrels along with the warrior.
With this tutorial you have seen one way to action your game characters easily. Using the MoveToAction method of Scene2d, you can incorporate your own creativeness to action your Android game.
Add Actions to The Actors
At Render method, we include our ProjectionMatrix code, and set the screen color. And, we code the 'stage.act', and include the important 'delta time', which is required for our timing sequences to properly process. Stage.draw is used here, because we are using 'Stage', we don't have to code each game variable directly. Stage draw will draw them all to the screen for us. We must however, still include the batch.begin, and batch.end code calls. Lastly,stage.getViewport.update, also important as it updates our screen for size when necessary.
FYI: when drawing your assets to the game screen; by using Stage, you don't have to code each game asset separately; one code call draws them all to the screen, and one call disposes of them. This could save a lot of coding, especially in larger mobile games that have a lot of assets.
Render -
Dispose
As with all game code, we must dispose of our game assets in the Dispose method. Here we only have to use stage.dispose. Coding each assets directly is not required, again, because we are using the Stage. If not using Stage, then we would have to dispose of each asset separately, as you have done in previous tutorials.
Summary
With Libgdx, adding action to your game characters is straightforward and easy to do. In this tutorial, we implemented a simple way to action our game character and images. The MoveToAction method of Scene2d, along with Stage and Actor allow you to coordinate action and add sequencing with timing so you can add a lot of fun interactions amongst your game assets. In these last few tutorials, we've introduced and demonstrated many of the actions available with the MoveToAction method.Here we list the many actions available for characters in your mobile game app.
MoveTo - moves your actor to specific location, shown in this tutorial with our warrior character moving across the game screen,
Delay - delays execution for a time given; shown in this tutorial to delay the fading in of our explosion images, and also shown at our Twirl Warrior tutorial.
FadeIn - bring character into view at certain position, shown with fading in our explosion images in this tutorial,
FadeOut - shown in this tutorial as we fade out the explosion images, and the warrior character; and also shown in our previous tutorial, warrior tutorial,
FadeTo - changes alpha of your actor from actor's current alpha to specific value,
MoveBy - as shown in previous tutorial,
RotateBy - rotates your actor by specific angle: shown in previous warrior tutorial,
RotateTo - rotates your actor to specific angle, similar to rotate by.
ScaleTo - scales your stage actor.
For Composite actions that combine multiple actions in one action, there are:
Parallel action; actions act together, shown in our 'Parallel Action' tutorial, previous tutorial.
Sequence action; after each other, shown in this tutorial, and previous tutorials also.
And, these are available also:
Repeat - repeats given action n-times,
Forever - repeats given action forever; shown in Twirl Warrior tutorial.
Remove - removes given Actor from stage,
EXAMPLE CODE - Code For This Tutorial.
JUST copy and paste to update your code.
JUST copy and paste to update your code.