Libgdx with Android For Game Dev
Game Dev Tutorial : Adding A PixelArt Character- 'Warrior', To Stage
Game Dev -All Game Dev Tutorials
As we previously learned, pixelart game assets, like this game warrior we made, can also be declared as a Sprite. Sprites are typically used for game elements; like fixed animations(a bear sitting still with his arms moving to feed himself, or a fixed rotated, or scaled position); while 'Image' code call is often used to implement action in a scene(a bear moving around the game screen, then fading out, and he disappears). By using 'Image', with Actor, and Stage, we can easily add actions to our pixelart characters, and non pixelart game characters.
In order to load our pixelart warrior, we use 'Texture' code call. Texture is commonly used to load game assets, be it pixelart, non pixelart, or spritesheet assets. Then, from the Texture call, we simply declare the loaded Texture for what we want to accomplish: non action, but fixed animation(Sprite); actionize a game character(Image). By using Texture, Image, Actor, Stage; we have an easy and effective way to add game fixtures, game scenes, game characters - with action, with animation.
The Game Warrior
I made this pixelart character(warrior) with Pixel Studio(mobile app), which we learned about in our Tutorial Sprites & Intro To Pixelart
Once created, I saved the 'warrior' png to my device, then just copied it into my game assets folder at the AppProject, Warrior_Image_Stage.
All code for this tutorial, is at the Example Code section on this page, just copy and paste to replace the code at 'MyGdxGame.java', then save, and RUN your app code to see the updated game screen.
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
Click Create; Warrior_Image_Stage app is created, and the MyGdxGame.java page opens in your AIDE coding editor.
For more info on navigating files and using the AIDE coding editor, goto Tutorial 1.
App Shot - Warrior Image Stage
5.8" Screen, Smartphone
Landscape Orientation
Looking at the app shot for the Landscape orientation, you see the warrior looks a little squished, not quite the proper aspect ratio. This happens because we did not add an 'OrthographicCamera' to our game code, and combine it with the viewport. You don't necessarily have to add the Camera, with the Viewport, but for resizing of your android device, it certainly looks nicer, even if you're not targeting for landscape mode with your game. In this case, because we are using a Stage, the image does display as we want, for Portrait mode, since Stage has its own built in viewport. However, for switching to landscape orientation, and maintaining the aspect ratio, a camera would be best practice and included with a Viewport like ExtendViewport, as it handles resizing quite well for portrait and landscape modes on android devices. In our next tutorial, we include the code for Viewport and Camera, so the warrior will display as it should in landscape mode.
First, we must add our import statements as required for our code. Here we include for Stage, and stage includes others that we require so coding Stage handles those imports also.
For our game screen class, we use 'ApplicationListener' class, and add the code for that.
Then, we include our Class Members with our named variables for them: Stage, we name as stage, Image we name as myImage, Texture we name as texture, and Spritebatch we name as batch. You can name your variables as you want, usually so it makes sense to you. Note: do camelCase your variable names if using more than one word: example; myimage is myImage, mynewimage is myNewImage, and image is image.
Next, we add the Create method calls, and here we create new instances of the variables required as shown in this next image. First, we create our new Stage. Then we load our warrior2.png, using the Texture method. Then, we set the texture variable as our new myImage variable. We also set the size and position for our image using:
myImage.setSize(128,128); and myImage.setPosition(8 ,0); 128,128 is for X and Y, those being the width and height of our image. And, position, 8 is for width along the X axis, the bottom or base of the game screen, and Y is for height along the side of the game screen. These values position our warrior close to the bottom left corner of the game screen.
The Spritebatch is also created, important here, as it prepares and then draws the image to screen. You can include it as a variable also.
We code stage.addActor(myImage), to add the variable for Image call, myImage, to the actor and then add the actor to our Stage.
In the Render method, we clear the screen and then add the screen color, for this we want white, so we code: 1,1,1,1.
We also draw the stage, with stage.draw(); and note the spritebatch is used here to begin and then end the draw process. And, lastly, we add the code to dispose of the Stage, and include the other required states: Resize, Resume, Pause. These are all required when using the game class, 'ApplicationListener' coded as 'public class MyGdxGame implements ApplicationListener'
With Image, Actor, Stage, we can easily add our game characters and action them for creating complexity in our game scenes. Stage is the often used method of Scene2d(Libgdx) that allows us to create simple or more creative games.
Stage handles all the processing and disposing of game assets for us. And, with Stage, we can load and draw our Sprite and Image characters more easily, and allow for more automation, meaning we can code less but do more.
Pixelart is easy to create, and by using characters made with pixelart, you can keep your game character sizes small, much smaller than with regular type images. This is good because a lot of images can affect the performance of your game rendering. Pixelart and non pixelart game characters and game assets(fixed elements - scenes, background, numbers, fonts)and objects can be added to a spritesheet, to further reduce game rendering lag, and make it easier to remove and add your game graphics and characters.
Pixelart makers can be found at app stores like Google Play, Amazon Apps, and others. Pixel Studio(mobile app), and Pixilart(website) are well known pixelart creators that allow you to create pixelart characters and game assets. With these, you can create for Free. There are also websites online that offer free game assets, like pixelart characters, and game scenes. I have a list of some of those websites at: Sprites & Intro To Pixelart
Game Dev -All Game Dev Tutorials
App Project Name: Warrior_Image_Stage
In this tutorial, we are going to add our own pixelart(warrior2.png, 3kb size) made character to the game screen. Because we eventually want to actionize this pixelart warrior, we are going to declare it as an Image, and then Actor, with Stage. This way, we can easily add some actions to the warrior from the many action moves available with the MoveToAction code method of Scene2d(Libgdx). To work with MoveToAction, we must declare our warrior as an Actor first, and add Actor to the Stage. And, Actor and Stage, are only compatible with Image. So, essentially, Image, Actor, Stage; all work together to allow us to add more fun interactions to our game.As we previously learned, pixelart game assets, like this game warrior we made, can also be declared as a Sprite. Sprites are typically used for game elements; like fixed animations(a bear sitting still with his arms moving to feed himself, or a fixed rotated, or scaled position); while 'Image' code call is often used to implement action in a scene(a bear moving around the game screen, then fading out, and he disappears). By using 'Image', with Actor, and Stage, we can easily add actions to our pixelart characters, and non pixelart game characters.
In order to load our pixelart warrior, we use 'Texture' code call. Texture is commonly used to load game assets, be it pixelart, non pixelart, or spritesheet assets. Then, from the Texture call, we simply declare the loaded Texture for what we want to accomplish: non action, but fixed animation(Sprite); actionize a game character(Image). By using Texture, Image, Actor, Stage; we have an easy and effective way to add game fixtures, game scenes, game characters - with action, with animation.
The Game Warrior
I made this pixelart character(warrior) with Pixel Studio(mobile app), which we learned about in our Tutorial Sprites & Intro To Pixelart
Once created, I saved the 'warrior' png to my device, then just copied it into my game assets folder at the AppProject, Warrior_Image_Stage.
All code for this tutorial, is at the Example Code section on this page, just copy and paste to replace the code at 'MyGdxGame.java', then save, and RUN your app code to see the updated game screen.
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
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, Warrior_Image_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.warrior_image_example'.Click Create; Warrior_Image_Stage app is created, and the MyGdxGame.java page opens in your AIDE coding editor.
For more info on navigating files and using the AIDE coding editor, goto Tutorial 1.
App Shot - Warrior Image Stage
5.8" Screen, Smartphone
Looking at the app shot for the Landscape orientation, you see the warrior looks a little squished, not quite the proper aspect ratio. This happens because we did not add an 'OrthographicCamera' to our game code, and combine it with the viewport. You don't necessarily have to add the Camera, with the Viewport, but for resizing of your android device, it certainly looks nicer, even if you're not targeting for landscape mode with your game. In this case, because we are using a Stage, the image does display as we want, for Portrait mode, since Stage has its own built in viewport. However, for switching to landscape orientation, and maintaining the aspect ratio, a camera would be best practice and included with a Viewport like ExtendViewport, as it handles resizing quite well for portrait and landscape modes on android devices. In our next tutorial, we include the code for Viewport and Camera, so the warrior will display as it should in landscape mode.
Code For This Tutorial
For our game screen class, we use 'ApplicationListener' class, and add the code for that.
Then, we include our Class Members with our named variables for them: Stage, we name as stage, Image we name as myImage, Texture we name as texture, and Spritebatch we name as batch. You can name your variables as you want, usually so it makes sense to you. Note: do camelCase your variable names if using more than one word: example; myimage is myImage, mynewimage is myNewImage, and image is image.
Next, we add the Create method calls, and here we create new instances of the variables required as shown in this next image. First, we create our new Stage. Then we load our warrior2.png, using the Texture method. Then, we set the texture variable as our new myImage variable. We also set the size and position for our image using:
myImage.setSize(128,128); and myImage.setPosition(8 ,0); 128,128 is for X and Y, those being the width and height of our image. And, position, 8 is for width along the X axis, the bottom or base of the game screen, and Y is for height along the side of the game screen. These values position our warrior close to the bottom left corner of the game screen.
The Spritebatch is also created, important here, as it prepares and then draws the image to screen. You can include it as a variable also.
We code stage.addActor(myImage), to add the variable for Image call, myImage, to the actor and then add the actor to our Stage.
In the Render method, we clear the screen and then add the screen color, for this we want white, so we code: 1,1,1,1.
We also draw the stage, with stage.draw(); and note the spritebatch is used here to begin and then end the draw process. And, lastly, we add the code to dispose of the Stage, and include the other required states: Resize, Resume, Pause. These are all required when using the game class, 'ApplicationListener' coded as 'public class MyGdxGame implements ApplicationListener'
Summary
Stage handles all the processing and disposing of game assets for us. And, with Stage, we can load and draw our Sprite and Image characters more easily, and allow for more automation, meaning we can code less but do more.
Pixelart is easy to create, and by using characters made with pixelart, you can keep your game character sizes small, much smaller than with regular type images. This is good because a lot of images can affect the performance of your game rendering. Pixelart and non pixelart game characters and game assets(fixed elements - scenes, background, numbers, fonts)and objects can be added to a spritesheet, to further reduce game rendering lag, and make it easier to remove and add your game graphics and characters.
Pixelart makers can be found at app stores like Google Play, Amazon Apps, and others. Pixel Studio(mobile app), and Pixilart(website) are well known pixelart creators that allow you to create pixelart characters and game assets. With these, you can create for Free. There are also websites online that offer free game assets, like pixelart characters, and game scenes. I have a list of some of those websites at: Sprites & Intro To Pixelart
EXAMPLE CODE - Code For This Tutorial.
JUST copy and paste to update your code.
JUST copy and paste to update your code.