Game Dev Tutorial : Add Action: Pixelart Game Character
Game Dev -All Game Dev Tutorials

App Project Name: Twirl Game Warrior

For this tutorial, we are going to add some actions to our warrior2.png, the same warrior we actioned in our previous tutorial. We use the MoveToAction method, and then just add the code calls we want. First we set a position for our warrior on the game screen. Then we rotate the warrior, then add a short delay time, and finally, set the warrior to twirl indefinitely. The code for this tutorial is at the Example Code section on this page. You can simply copy and paste to replace the code at MyGdxGame.java. It is not necessary to create a new mobile app if you have completed the previous tutorial, as the 'warrior2.png' is at the assets folder for you. However if you want to create a new mobile app for this tutorial, just follow along with the tutorial.

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, Twirl Game Warrior(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.twirl_action_example'.

Click Create; Twirl Game Warrior 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 Warrior 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, 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.



Next, we add the code for the loading of our game asset, our 'warrior2.png'. First we must add it as a texture and then declare it as our game Image. The image is first loaded with the 'Texture' call, then we create a new 'Image' call, and set the Texture as the Image, and add our Image variable name which is 'myImage. You can name the variable for this as you like, I used 'myImage'. And, we gave our image a size, 128x128, as shown in this next image, along with the 'texture', and 'image', code calls.



After adding our warrior, we next must add the parameters for our actions we want to implement. So we add the float start X and the float start Y values,(280,180) to set the starting position of our game warrior on the screen. The 280 is X axis, or along the base of the game screen, and 180 is the Y, runs the height of the game screen.
Then we code the values for the 'degrees of' and the 'duration of' for the warrior, as shown in this next image. We want the warrior to rotate by 45 (degreesPerSecond) and do that in 2 seconds(rotationDuration). Then we want the warrior to pause(delay) for half of one second,0.5f and then to start twirling by 360 degrees, (rotateBy) and do that indefinitely(forever). And, we want all of these actions to happens each after each, so we include the sequence code call also myImage.AddAction(Actions.sequence... at the beginning of our code call.



Next, we set our variable, myImage as our Actor, and add the Actor to our Stage. And, we include the 'input Processor' code. This is most useful when we start adding click events, or change events to to our game code.



Next, we add the Render method, which will draw our screen color, and draw our character to the game screen. We include the stage.act with Delta Time, to get the proper time for the drawing of our character. And, we use stage.draw not 'batch.draw', because we are using a Stage in our game code.
We also code the setProjectionMatrix call, and the public void Resize call, as these two work together to make the game screen update as needed if the screen size is changed during game play either because of game rendering or other like the user going from portrait mode to landscape mode.



And, lastly we dispose of the assets in our game by using the code shown in this next image. We must add the batch.dispose, and the stage.dispose, because we are using a Stage with Actor.

Summary

In this tutorial, we learned how to implement MoveToAction method, and add Action calls 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 previous tutorial,
FadeTo - changes alpha of your actor from actor's current alpha to specific value,
MoveBy - as shown in previous and this tutorial,
MoveTo - moves your actor to specific location,
RotateBy - rotates your actor by specific angle: shown in this tutorial,
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; shown in this tutorial
Delay - delays execution for a time given; shown in this tutorial
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.