Libgdx with Android For Game Dev
Game Dev Tutorial : Actor Stage
Game Dev -All Game Dev Tutorials
With Libgdx, there are lots of ways you can add your 'assets' to your game screen in order to manipulate them. Typically, you would use an image(you created or got online), and load it as a Texture. Once you've added it as your texture, you can then declare the texture according to what you what to do. So, for example, if you wanted to add some actions to your loaded Texture, you first must declare it as an Image(a code call of Stage). From that, you can now declare your Image as your Actor, and add the Actor to your Stage.
Now, in order to load a simple image as a Texture, and then declare it as an Image, you must be using Scene2d of Libgdx. Scene2d is just a class component of Libgdx, that lets us do more fun stuff with our game assets, like adding actions to them. From a coding sense, using Scene2d, means we must add the appropriate 'imports', and of course, be using the proper Scene2d code calls, like Image and Actor. Actor can simply be an image you add, or it can be a sprite(image made with pixelart) you add. Actor is any widget you deem appropriate for your game, and that can be loaded. So Actor is not actually an actor, it's more like a code name for 'assets' we want to add to our game play.
Once declared as the Actor, we simply add the Actor to the Stage, and then take some action on it. Important to add the proper import statements when using Image, Actor, and Stage. And, you will know if you didn't add the proper imports when using Stage, because you will get an 'error message', when trying to build your app code. Most likely, an 'unknown entity' error.
In the next few tutorials, we will learn how to code these Scene2d widgets; declaring them as the Actors on our Stage.
To declare this image as our Actor, we must first declare it as an 'Image'. So we load the image as a Texture call, then we declare it as an Image call, and then from that we can declare it as our Actor. In Libgdx, all Actors you use, must be added to the Stage. Stage is a big deal in Libgdx, because working with Stage, we get to add all kinds of actions and fun interactions to our game assets. And, using Stage makes it a lot easier to dispose of these assets also. We will learn more about Stage, Actor, and Scene2d, as we continue our tutorials. For this tutorial, we are simply going to learn how to add an Actor(our image) to the Stage.
You can view this tutorial code at the Example Code, section on this page. And, you can also download/save the image for this app tutorial to your device.
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, ActorStage(Note: no spaces in the app name(can use _ ), 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.actor_stage_example'.
Click CREATE. Now ActorStage app is created, and the MyGdxGame.java page opens in your AIDE coding editor.
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
App Shot - Actor Stage
Screen Size 5.8"
Before we declare our assets as Actors we first load them into the game using the Texture code call.
All Libgdx mobile game apps follow the same coding protocol: first we code the imports, then the game class, the variables, followed by the Create method, Render method, Dispose method.
The code within each of these methods can vary depending of course, on what and how you plan to devise your game play, and how many assets you plan to add.
This app requires that we add code for Imports, Game Class, Variables, Create, Render, and Dispose methods. First, we add the code for the import statements. Required are Image, Texture, Stage, Actor, and, ScreenViewport, as well as the basic imports, as shown in this next image.
Next, we add the variables that are required. For this app, we add the Stage, and Image variables. Then, in the 'create' method, we create new instances of our variables, Stage and Image. Also, we create our 'Viewport', and add it to the 'stage'. Next, add our Texture, the png, 'womans.png', and set it as the Image, and set a size and position for our Image. We then set that as the actor. And, lastly, we add the 'actor' to the stage.
And, next we must add the code for the required 'render' method. We add the color codes for our screen color using the 'rgb' colors codes as (188/255f, 152/255f,126/255f, 1). The actual color codes are the 188,152, 126; the 255f after each color is required and the 1 is also required. If you do a search online for 'html color codes' you can easily find 'rgb color codes', to use in your game apps for screen color.
Next, we must update our stage with the stage.act code using 'get.delta time'. Delta time is important because its' job to make sure actions happen when they should - the timing of them.
And, to draw our actor to the stage, we use the 'stage.draw' method. We don't have to code a spritebatch here because the spritebatch is included in the stage method. So, just using Stage.draw works when drawing your image to the game screen. At the 'dispose' method, we dispose of the assets, with the 'stage.dispose', method.
We learned how to code a Stage and add an Actor to it. An Actor can include any widget you want, such as an image, or an imagebutton. It can also be a sprite, such as a sprite made from pixel art. Pixelart is a big topic in Game Dev, and not just for Libgdx. All game engine developers use pixelart characters because they are very small in size compared to traditional game characters created like jpg and png. This is good because it means you can keep the overall size of your game small which means your game will be overall more efficient to run. We will learn more about pixelart and implementing them as we continue these game dev tutorials.
For this tutorial, we used a 'ScreenViewport', however, you can implement any of the viewport types. A commonly used one is 'ExtendViewport'. It works well for targeting a portrait and a landscape view, however, the complexity of your game determines which viewport(s) might work best.
Working with Image, Actor and Stage, you can do a lot more with your game characters and do it more easily. However, you don't have to include Stage, and Actor in a your game at all. It depends on what you want to accomplish with your game and the type you decide you make. More on this in subsequent tutorials.
Game Dev -All Game Dev Tutorials
With Libgdx, there are lots of ways you can add your 'assets' to your game screen in order to manipulate them. Typically, you would use an image(you created or got online), and load it as a Texture. Once you've added it as your texture, you can then declare the texture according to what you what to do. So, for example, if you wanted to add some actions to your loaded Texture, you first must declare it as an Image(a code call of Stage). From that, you can now declare your Image as your Actor, and add the Actor to your Stage.
Now, in order to load a simple image as a Texture, and then declare it as an Image, you must be using Scene2d of Libgdx. Scene2d is just a class component of Libgdx, that lets us do more fun stuff with our game assets, like adding actions to them. From a coding sense, using Scene2d, means we must add the appropriate 'imports', and of course, be using the proper Scene2d code calls, like Image and Actor. Actor can simply be an image you add, or it can be a sprite(image made with pixelart) you add. Actor is any widget you deem appropriate for your game, and that can be loaded. So Actor is not actually an actor, it's more like a code name for 'assets' we want to add to our game play.
Once declared as the Actor, we simply add the Actor to the Stage, and then take some action on it. Important to add the proper import statements when using Image, Actor, and Stage. And, you will know if you didn't add the proper imports when using Stage, because you will get an 'error message', when trying to build your app code. Most likely, an 'unknown entity' error.
In the next few tutorials, we will learn how to code these Scene2d widgets; declaring them as the Actors on our Stage.
Add Actor To Stage
In this tutorial, we will create an app with a Stage and add our Actor to the stage. The actor we add is going to be from our loaded image, which is just an image we found on the web(free to use).To declare this image as our Actor, we must first declare it as an 'Image'. So we load the image as a Texture call, then we declare it as an Image call, and then from that we can declare it as our Actor. In Libgdx, all Actors you use, must be added to the Stage. Stage is a big deal in Libgdx, because working with Stage, we get to add all kinds of actions and fun interactions to our game assets. And, using Stage makes it a lot easier to dispose of these assets also. We will learn more about Stage, Actor, and Scene2d, as we continue our tutorials. For this tutorial, we are simply going to learn how to add an Actor(our image) to the Stage.
You can view this tutorial code at the Example Code, section on this page. And, you can also download/save the image for this app tutorial to your device.
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, ActorStage(Note: no spaces in the app name(can use _ ), 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.actor_stage_example'.
Click CREATE. Now ActorStage app is created, and the MyGdxGame.java page opens in your AIDE coding editor.
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
App Shot - Actor Stage
Screen Size 5.8"
Code For This Tutorial
When adding an Actor or several Actors to our game, they must get added to a Stage. Once they are added to the stage, Libgdx can render them for us, including adding actions. So Actor, Stage, and Image are essential to each other, and most important, especially if you want to actionize them.Before we declare our assets as Actors we first load them into the game using the Texture code call.
All Libgdx mobile game apps follow the same coding protocol: first we code the imports, then the game class, the variables, followed by the Create method, Render method, Dispose method.
The code within each of these methods can vary depending of course, on what and how you plan to devise your game play, and how many assets you plan to add.
This app requires that we add code for Imports, Game Class, Variables, Create, Render, and Dispose methods. First, we add the code for the import statements. Required are Image, Texture, Stage, Actor, and, ScreenViewport, as well as the basic imports, as shown in this next image.
Next, we add the variables that are required. For this app, we add the Stage, and Image variables. Then, in the 'create' method, we create new instances of our variables, Stage and Image. Also, we create our 'Viewport', and add it to the 'stage'. Next, add our Texture, the png, 'womans.png', and set it as the Image, and set a size and position for our Image. We then set that as the actor. And, lastly, we add the 'actor' to the stage.
And, next we must add the code for the required 'render' method. We add the color codes for our screen color using the 'rgb' colors codes as (188/255f, 152/255f,126/255f, 1). The actual color codes are the 188,152, 126; the 255f after each color is required and the 1 is also required. If you do a search online for 'html color codes' you can easily find 'rgb color codes', to use in your game apps for screen color.
Next, we must update our stage with the stage.act code using 'get.delta time'. Delta time is important because its' job to make sure actions happen when they should - the timing of them.
And, to draw our actor to the stage, we use the 'stage.draw' method. We don't have to code a spritebatch here because the spritebatch is included in the stage method. So, just using Stage.draw works when drawing your image to the game screen. At the 'dispose' method, we dispose of the assets, with the 'stage.dispose', method.
Summary
In this lesson, you were introduced to Image, Actor and Stage of Libgdx Scene2d, which is essentially a game class that allows more game functionality.We learned how to code a Stage and add an Actor to it. An Actor can include any widget you want, such as an image, or an imagebutton. It can also be a sprite, such as a sprite made from pixel art. Pixelart is a big topic in Game Dev, and not just for Libgdx. All game engine developers use pixelart characters because they are very small in size compared to traditional game characters created like jpg and png. This is good because it means you can keep the overall size of your game small which means your game will be overall more efficient to run. We will learn more about pixelart and implementing them as we continue these game dev tutorials.
For this tutorial, we used a 'ScreenViewport', however, you can implement any of the viewport types. A commonly used one is 'ExtendViewport'. It works well for targeting a portrait and a landscape view, however, the complexity of your game determines which viewport(s) might work best.
Working with Image, Actor and Stage, you can do a lot more with your game characters and do it more easily. However, you don't have to include Stage, and Actor in a your game at all. It depends on what you want to accomplish with your game and the type you decide you make. More on this in subsequent tutorials.
EXAMPLE CODE - Code For This Tutorial.
JUST copy and paste to update your code.
JUST copy and paste to update your code.