Libgdx with Android For Game Dev
Game Dev Tutorial : Create MoveByAction with a Warrior, and Stage
Game Dev -All Game Dev Tutorials
With this tutorial, we are going to add a MoveByAction call to the same pixelart warrior character we added to our game screen in the previous tutorial. So, we only have to replace our code at the MyGdxGame.java, with this tutorial code. All code is at the Example Code section on this page.
We are again working with Stage, and Actor, two common methods used in the Scene2d of Libgdx. With this tutorial, we are going to add some action to our game warrior. There are several move types you can add to your game character. With this tutorial, we will move our warrior across the screen, then rotate the warrior, and finally fade it slowly from the game screen.
Click Create; MoveByAction_Warrior_Stage app is created, and the MyGdxGame.java page opens in your AIDE coding editor.
App Shot - MoveByAction_Stage_Warrior
5.8" Screen, Smartphone
Portrait Orientation
At Position (8,0)
Landscape Orientation
Moving left to right.
Add Variables - here we add all the variables we use in code for this tutorial. We include Stage, Spritebatch, Texture, Image; and also for ExtendViewport, and Camera. You can name your variables for these code calls as you like; so Stage we named it stage; Spritebatch we named batch; Texture we name it texture; Image we named it myImage; ExtendViewport we named it extendViewport; and OrthographicCamera we name it camera.
Create New Camera and ExtendViewport
For this create method, we first create our new instances of Spritebatch, Camera and Viewport, with the code shown in this next image. We set the view to the width and height of the viewport, we create the new stage, and set the viewport to the stage, and also include the camera and set it to the same width and height values.
Add Texture
With this next image of code in the create method, we add our new Texture - warrior2.png, and then set it as the new Image, and then set the position and size for that image. Note here, commented code, you can add your warrior2.png with Texture texture = new Texture("warrior2.png"); code, or with the Gdx.files.internal("warrior2.png"); code. Either will work.
We also set the position at (8,0), meaning our warrior sits at 8 width(X) from the left bottom, the base of the game screen, and 0 for height(Y). And, its size is 128x128.
Note; commented code, if you wanted to have the warrior center around the center of the game screen you can use this code:
myImage.setPosition(screenWidth /2, screenHeight / 2);. This means to set it at 1/2 of the screen width, and 1/2 of the screen height, so no matter what the device screen size is, this code will position your image at center of the game screen.
Also in the Create method, we set the myImage, as the Actor, and then add the actor to the stage. And, we also add the code for the Actions we want to add to our game warrior. We want to move the warrior across the stage(the screen), and then have it rotate, and finally fade from the screen.
We move it 420(X) units to the right of its starting position, and it also moves up the screen at the same time its moving across the screen by 280(Y) units, and does so in 6 seconds. Then it rotates by 360degrees and takes 1 second to do so. And, lastly, it fades from the screen in 1 second. Here's the code.
myImage.addAction(Actions.sequence(Actions.moveBy(420f, 280f, 6f),
Actions.rotateBy(360f,1f),
Actions.fadeOut(1f)));
We add Actions.sequence to our addAction code, because we want our actions to take place without pausing, so sequentially.
If we didn't want our actions to act with a sequence, then our code would look like this example:
myImage.addAction(Actions.moveBy(420f, 280f, 6f));
Lastly, in our Create method, we add the setInputProcessor code, which adds the input Processor to the Stage. This is important, because it handles all the events that happen in our app code.
Add Image to Stage and Add Actions
Render - method, we clear the screen, and add our new screen color. Then we set the projectionMatrix, which updates the viewport with the camera.
Then the stage gets updated with this code:
stage.act(Gdx.graphics.getDeltaTime());
Next, we use the Spritebatch(batch), to set the draw method, and then stage draws the warrior to the screen.
Also, in Render method, we add this next code:
@Override
public void resize(int width, int height) {
stage.getViewport().update(width,height,true);
This code is what updates the viewport which in turn updates the camera. This is useful code to keep your screen aspect ratio proper when you switch from portrait mode to landscape mode while viewing your game screen. If not included, your images will looked squished in landscape mode. You also have to include the ExtendViewport code and Camera code as we added in the Create method. And, include the 'batch.setProjectionMatrix(camera.combined);' as we added at the Render method.
Lastly, for this app, we dispose of Stage, and batch, in the dispose method.
FadeIn - bring character into view at certain position,
FadeOut - as shown in this tutorial,
FadeTo - changes alpha of your actor from actor's current alpha to specific value,
MoveBy - as shown in this tutorial,
MoveTo - moves your actor to specific location,
RotateBy - rotates your actor by specific angle,
RotateTo - rotates your actor to specific angle,
ScaleTo - scales your stage actor.
For Composite actions that combine multiple actions in one action, there are:
Parallel - execute given actions in parallel - all actions at once,
Sequence - shown in this tutorial - execute given actions in sequence - one after another,
And, these are available also:
Repeat - repeats given action n-times,
Forever - repeats given action forever,
Delay - delays execution for a time given,
Remove - removes given Actor from stage,
The ParallelAction executes multiple actions in parallel (simultaneously), while the SequenceAction will execute them one after another.
All these 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: MoveByAction_Stage_Warrior
With this tutorial, we are going to add a MoveByAction call to the same pixelart warrior character we added to our game screen in the previous tutorial. So, we only have to replace our code at the MyGdxGame.java, with this tutorial code. All code is at the Example Code section on this page.
We are again working with Stage, and Actor, two common methods used in the Scene2d of Libgdx. With this tutorial, we are going to add some action to our game warrior. There are several move types you can add to your game character. With this tutorial, we will move our warrior across the screen, then rotate the warrior, and finally fade it slowly from the game screen.
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, MoveByAction_Warrior_Stage(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.moveby_example'.Click Create; MoveByAction_Warrior_Stage app is created, and the MyGdxGame.java page opens in your AIDE coding editor.
The warrior is rotating.
The warrior is fading.
Note: image is Not squished in Landscape mode, because we added a Camera with ExtendViewport.
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, Texture, 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.
Add Variables - here we add all the variables we use in code for this tutorial. We include Stage, Spritebatch, Texture, Image; and also for ExtendViewport, and Camera. You can name your variables for these code calls as you like; so Stage we named it stage; Spritebatch we named batch; Texture we name it texture; Image we named it myImage; ExtendViewport we named it extendViewport; and OrthographicCamera we name it camera.
Create New Camera and ExtendViewport
For this create method, we first create our new instances of Spritebatch, Camera and Viewport, with the code shown in this next image. We set the view to the width and height of the viewport, we create the new stage, and set the viewport to the stage, and also include the camera and set it to the same width and height values.
Add Texture
With this next image of code in the create method, we add our new Texture - warrior2.png, and then set it as the new Image, and then set the position and size for that image. Note here, commented code, you can add your warrior2.png with Texture texture = new Texture("warrior2.png"); code, or with the Gdx.files.internal("warrior2.png"); code. Either will work.
We also set the position at (8,0), meaning our warrior sits at 8 width(X) from the left bottom, the base of the game screen, and 0 for height(Y). And, its size is 128x128.
Note; commented code, if you wanted to have the warrior center around the center of the game screen you can use this code:
myImage.setPosition(screenWidth /2, screenHeight / 2);. This means to set it at 1/2 of the screen width, and 1/2 of the screen height, so no matter what the device screen size is, this code will position your image at center of the game screen.
Also in the Create method, we set the myImage, as the Actor, and then add the actor to the stage. And, we also add the code for the Actions we want to add to our game warrior. We want to move the warrior across the stage(the screen), and then have it rotate, and finally fade from the screen.
We move it 420(X) units to the right of its starting position, and it also moves up the screen at the same time its moving across the screen by 280(Y) units, and does so in 6 seconds. Then it rotates by 360degrees and takes 1 second to do so. And, lastly, it fades from the screen in 1 second. Here's the code.
myImage.addAction(Actions.sequence(Actions.moveBy(420f, 280f, 6f),
Actions.rotateBy(360f,1f),
Actions.fadeOut(1f)));
We add Actions.sequence to our addAction code, because we want our actions to take place without pausing, so sequentially.
If we didn't want our actions to act with a sequence, then our code would look like this example:
myImage.addAction(Actions.moveBy(420f, 280f, 6f));
Lastly, in our Create method, we add the setInputProcessor code, which adds the input Processor to the Stage. This is important, because it handles all the events that happen in our app code.
Add Image to Stage and Add Actions
Render - method, we clear the screen, and add our new screen color. Then we set the projectionMatrix, which updates the viewport with the camera.
Then the stage gets updated with this code:
stage.act(Gdx.graphics.getDeltaTime());
Next, we use the Spritebatch(batch), to set the draw method, and then stage draws the warrior to the screen.
Also, in Render method, we add this next code:
@Override
public void resize(int width, int height) {
stage.getViewport().update(width,height,true);
This code is what updates the viewport which in turn updates the camera. This is useful code to keep your screen aspect ratio proper when you switch from portrait mode to landscape mode while viewing your game screen. If not included, your images will looked squished in landscape mode. You also have to include the ExtendViewport code and Camera code as we added in the Create method. And, include the 'batch.setProjectionMatrix(camera.combined);' as we added at the Render method.
Lastly, for this app, we dispose of Stage, and batch, in the dispose method.
Summary
In this tutorial, we learned how to add Actions to a game character. 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 this tutorial,
FadeTo - changes alpha of your actor from actor's current alpha to specific value,
MoveBy - as shown in this tutorial,
MoveTo - moves your actor to specific location,
RotateBy - rotates your actor by specific angle,
RotateTo - rotates your actor to specific angle,
ScaleTo - scales your stage actor.
For Composite actions that combine multiple actions in one action, there are:
Parallel - execute given actions in parallel - all actions at once,
Sequence - shown in this tutorial - execute given actions in sequence - one after another,
And, these are available also:
Repeat - repeats given action n-times,
Forever - repeats given action forever,
Delay - delays execution for a time given,
Remove - removes given Actor from stage,
The ParallelAction executes multiple actions in parallel (simultaneously), while the SequenceAction will execute them one after another.
All these 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.