Libgdx with Android For Game Dev
Game Dev Tutorial: How To Code Parallel Action
Game Dev -All Game Dev Tutorials
In this tutorial lesson, we are adding 'Parallel Action', to our two game warriors. Parallel action allows us to move our game warriors across the game screen at the same time. To load our two warriors we shall use a spritesheet. We learned about spritesheets in our previous tutorials. For this spritesheet we added our two warriors vertically to the spritesheet. Basically we stacked them and so we must make note of their position on the spritesheet. Each warrior image is 256x256, and because we stacked them vertically when we packed them on the spritesheet, their coordinates are 256x512.
This is important to know when we load them from the spritesheet in our game code. Even though they are 256x256 each, we can code them smaller if we want to, by adding the 'setSize' code call. You would not want to make them larger than 256x256, because they would not display properly on the game screen. So, you can make them the same size or smaller than their original size, when displaying them.
We shall add the Parallel action code so that they move together across the game screen.
All code for this tutorial is at the Example Code section on this page. You can click the play button at AppShot to see the actioned warriors.
Click Create; Parallel Action game app is created, and the MyGdxGame.java page opens in your AIDE coding editor.
App Shot - Portrait 5.8" Game Screen
Click the Play button to see the Warriors actioned.
Game Variables
For game variables, we must include the code calls, and then add our own variable name for each of them. This next photo shows all the variable code calls with the variable names. Note that the TextureRegion and Image code calls each have two variables. This is because we require one for each image we are adding. Because we load our assets(images) from a spritesheet that has our two warrior images, we must code two texture regions and two image calls. One for warrior one, and one for warrior two. The spritesheet png image is loaded with the 'Texture' call, and we named that variable as 'twoTextures'; just to keep it simple because we know we are adding two images.
FYI: Image is a code call in Scene2d of Libgdx. And, image is also just referring to an image that we use. Texture code call in libgdx, also means an image. So, we can use the Texture call, to load our game image(game asset). Images, videos, game characters, and the like, are all known as game assets.
Game Class
After coding the import statements, we add the code for our game class. For this tutorial, we use the Application Adapter class, as shown in this next photo.
Create Method
At Create method, we create new instances of all the game variables we are using, as shown in this next photo. We create new instances for camera and viewport and stage. Then, we load our game asset, the spritesheet, using the Texture call. Then to get the two warriors from the spritesheet, we use the TextureRegion, one for each warrior. Then we have to pass our two texture regions on to the Image code call of Scene2d; so we have to create two Image calls, one for each warrior. Next, we can set the size we want for the two warriors, and also set the starting position. This is where they are before they begin their 'parallel action' across the game screen. And, then we add the 'myImageOne', and 'myImageTwo', warriors, to the stage by adding them as Actors.
Add Parallel Action
To include the parallel action, to our warriors, we add the 'actions.Parallel', code, and then include moveTo action; which is how they get moved across the game screen. The code- 4f,4f,6f, means to place them at 4x and 4y, and take 6 seconds to do so. The second warrior code - 4f,198f,6f; means to place them at 4x, 198y, and take 6 seconds to do so. These are the coordinates for where we want the warriors to end at once they have completed their move across the game screen.
Render method
In our Render method, we want to set our screen color(1,1,1,1), and add the 'getDeltaTime' code. This is important as it ensures our characters timing is correct. The code - stage.draw draws our warriors to the game screen. We also must include the batch begin and batch end calls. The 'setProjectionMatrix', call is also important as it keeps the camera and viewport in sync with screen resizing, and so that everything displays as it should.
Dispose of Stage
In our Dispose method, we simply dispose of our stage with the following code. Because we are using Stage, we can just use 'stage.dispose()', however if we are not using stage, or adding additional assets but not using stage to add them; then we must dispose of our assets directly. This means you have to state what they are exactly; like example, if you had used 'gameImage.png', your code would be - gameImage.dispose().
FadeIn - bring character into view at certain position,
FadeOut - as shown in previous tutorial warrior tutorial,
FadeTo - changes alpha of your actor from actor's current alpha to specific value,
MoveBy - as shown in previous tutorial,
MoveTo - moves your actor to specific location, shown in this 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.
Sequence action; after each other.
And, these are available also:
Repeat - repeats given action n-times,
Forever - repeats given action forever; shown in Twirl Warrior tutorial.
Delay - delays execution for a time given; shown in Twirl Warrior tutorial.
Remove - removes given Actor from stage,
The Parallel Action executes multiple actions in parallel (simultaneously); shown in this tutorial.
The Sequence Action will execute them one after another; shown in previous 'Twirl Warrior' tutorial.
All these actions can be used to create complexity in your game character interactions. They can be used directly with an Image (or any other Actor) you implement.
Read at Wiki Libgdx, about Actions and Scene2d.
Game Dev -All Game Dev Tutorials
App Project Name: Parallel Action
In this tutorial lesson, we are adding 'Parallel Action', to our two game warriors. Parallel action allows us to move our game warriors across the game screen at the same time. To load our two warriors we shall use a spritesheet. We learned about spritesheets in our previous tutorials. For this spritesheet we added our two warriors vertically to the spritesheet. Basically we stacked them and so we must make note of their position on the spritesheet. Each warrior image is 256x256, and because we stacked them vertically when we packed them on the spritesheet, their coordinates are 256x512.
This is important to know when we load them from the spritesheet in our game code. Even though they are 256x256 each, we can code them smaller if we want to, by adding the 'setSize' code call. You would not want to make them larger than 256x256, because they would not display properly on the game screen. So, you can make them the same size or smaller than their original size, when displaying them.
We shall add the Parallel action code so that they move together across the game screen.
All code for this tutorial is at the Example Code section on this page. You can click the play button at AppShot to see the actioned warriors.
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, Parallel Action(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.parallel_action_example'.Click Create; Parallel Action game app is created, and the MyGdxGame.java page opens in your AIDE coding editor.
App Shot - Portrait 5.8" Game Screen
Click the Play button to see the Warriors actioned.
Code For This Tutorial
Import statements - we first code our import statements adding all the required ones for the code calls we are implementing. So we include Stage, Spritebatch, Texture, Actions, Image, ExtendViewport, Camera; and since we are adding the MoveByAction method, we must include all those imports as well. And, do include the 'ApplicationAdapter' class import here also.
Game Variables
For game variables, we must include the code calls, and then add our own variable name for each of them. This next photo shows all the variable code calls with the variable names. Note that the TextureRegion and Image code calls each have two variables. This is because we require one for each image we are adding. Because we load our assets(images) from a spritesheet that has our two warrior images, we must code two texture regions and two image calls. One for warrior one, and one for warrior two. The spritesheet png image is loaded with the 'Texture' call, and we named that variable as 'twoTextures'; just to keep it simple because we know we are adding two images.
FYI: Image is a code call in Scene2d of Libgdx. And, image is also just referring to an image that we use. Texture code call in libgdx, also means an image. So, we can use the Texture call, to load our game image(game asset). Images, videos, game characters, and the like, are all known as game assets.
Game Class
After coding the import statements, we add the code for our game class. For this tutorial, we use the Application Adapter class, as shown in this next photo.
Create Method
At Create method, we create new instances of all the game variables we are using, as shown in this next photo. We create new instances for camera and viewport and stage. Then, we load our game asset, the spritesheet, using the Texture call. Then to get the two warriors from the spritesheet, we use the TextureRegion, one for each warrior. Then we have to pass our two texture regions on to the Image code call of Scene2d; so we have to create two Image calls, one for each warrior. Next, we can set the size we want for the two warriors, and also set the starting position. This is where they are before they begin their 'parallel action' across the game screen. And, then we add the 'myImageOne', and 'myImageTwo', warriors, to the stage by adding them as Actors.
Add Parallel Action
To include the parallel action, to our warriors, we add the 'actions.Parallel', code, and then include moveTo action; which is how they get moved across the game screen. The code- 4f,4f,6f, means to place them at 4x and 4y, and take 6 seconds to do so. The second warrior code - 4f,198f,6f; means to place them at 4x, 198y, and take 6 seconds to do so. These are the coordinates for where we want the warriors to end at once they have completed their move across the game screen.
Render method
In our Render method, we want to set our screen color(1,1,1,1), and add the 'getDeltaTime' code. This is important as it ensures our characters timing is correct. The code - stage.draw draws our warriors to the game screen. We also must include the batch begin and batch end calls. The 'setProjectionMatrix', call is also important as it keeps the camera and viewport in sync with screen resizing, and so that everything displays as it should.
Dispose of Stage
In our Dispose method, we simply dispose of our stage with the following code. Because we are using Stage, we can just use 'stage.dispose()', however if we are not using stage, or adding additional assets but not using stage to add them; then we must dispose of our assets directly. This means you have to state what they are exactly; like example, if you had used 'gameImage.png', your code would be - gameImage.dispose().
Summary
In this tutorial, we learned how to implement Parallel Action of MoveToAction method, and add Action calls to the game characters, the warriors. We cannot perform these actions directly on a texture, however once we load our texture we can pass it to the code call Image, and we can add actions to the Image. Using Stage, Image, and Actor, of Scene2d, we can easily implement a variety of actions on the game characters and objects. There are a number of actions you can add to your character; they include:FadeIn - bring character into view at certain position,
FadeOut - as shown in previous tutorial warrior tutorial,
FadeTo - changes alpha of your actor from actor's current alpha to specific value,
MoveBy - as shown in previous tutorial,
MoveTo - moves your actor to specific location, shown in this 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.
Sequence action; after each other.
And, these are available also:
Repeat - repeats given action n-times,
Forever - repeats given action forever; shown in Twirl Warrior tutorial.
Delay - delays execution for a time given; shown in Twirl Warrior tutorial.
Remove - removes given Actor from stage,
The Parallel Action executes multiple actions in parallel (simultaneously); shown in this tutorial.
The Sequence Action will execute them one after another; shown in previous 'Twirl Warrior' tutorial.
All these actions can be used to create complexity in your game character interactions. They can be used directly with an Image (or any other Actor) you implement.
Read at Wiki Libgdx, about Actions and Scene2d.
EXAMPLE CODE - Code For This Tutorial.
JUST copy and paste to update your code.
JUST copy and paste to update your code.