Game Dev Tutorial : Stack Images
Game Dev -All Game Dev Tutorials

When creating your mobile game you might want to stack your images to organize your game play, and position them strategically. In this tutorial, we will learn how to stack game textures.

App Project: Stack Images

In this first image, we see the orange and banana being stacked on the game screen. This is easy to do using our batch draw method.

Portrait Shot - Screen Size 5.8"


This image shows the same game screen but in the 'landscape' orientation. Because we have added a 'viewport' and 'camera' to code, our textures are shown proper on the game screen.

Landscape Orientation Shot


And, in this next image of our game screen, the orange and banana look like they got squished. Because we did not include a 'viewport' or 'camera' with our code, this is how the textures display on the game screen.

Landscape Orientation Shot - No Camera No Viewport

Create our Game App Screen

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, StackImages(Note: no spaces in the app name, you can add lowercase _ , and, 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.stack_images_example'.

Click CREATE. Now StackImages app is created, and the MyGdxGame.java page opens in your AIDE coding editor.
Lastly, at the Example Code section on this page, Save the game images, 'orange.png', 'banana.png',to your device also, and, copy/paste them to the App Project 'assets' folder at 'gdx-game-android/assets', in the App Project(StackImages) file hierachy.

Code For This Tutorial

For this tutorial, we must include the code for; import statements, variables, create and render methods, and then dispose of our assets with the dispose method.
For imports we include those shown in this next image, also including those for 'viewport' and 'orthographic camera'.



Next, we include the code for our game variables; in this case; the two textures we are adding, the orange and the banana. And, for our camera and viewport. We also must include the variable for our Spritebatch. Without a Spritebatch, we cannot draw our textures to the game screen.



And, in our Create method, we create new instances of all the variables we are adding, as shown in this next image. We also give our viewport(camera) a screen resolution of 800.600, 800 being X, and 600 being Y. This is important because this determines what size the textures will be drawn to the game screen based on the device screen size of 5.8".
If the resolution is changed to a different one: example: 1600,1200, our textures get smaller on the screen, and if, example, the resolution is changed to 600, 400, then the textures get larger on the screen. So, the screen resolution you code, the texture size, the viewport type, and the device screen size, can all affect how your texture gets drawn to the game screen.

Also at the Create method, we include the 'set.ProjectionMatrix' method. This code should be added whenever you use the orthographic camera in your code. The matrix represents the combined view and projection matrix. Essentially this code tells the camera and viewport to communicate to each other. "When you call batch.setProjectionMatrix(camera.combined), you’re instructing the batch to use this combined matrix for rendering. You should call this whenever the value changes (e.g., during resizing or camera movement)"1(Bing)



In the Render method, we add code for our Game Screen color, and then we use the batch method(spritebatch) to draw our images to the game screen.
With each batch.draw we position our orange and banana with x and y parameters. X is width along the base of the game screen and Y is along the height of the game screen. First, we draw the banana at 0.0 position on the game screen which is bottom of the screen at the left. Then we draw the orange at 100,100. This moves this orange to the right, it also takes some screen height. Each time we add the orange or banana, we position it over from the previous one, so it looks like the oranges and bananas are zig zagging up the screen.

Lastly, we must dispose of the game assets, the banana and the orange, which you can see in the image also.

strings.xml

The strings.xml file is at AppProjects/StackImages/gdx-game-android/res/value/strings.xml. In this file you have a strings resource file where you can change the name of the app once it has been created. This changes the name shown with the app icon, however, it does not change the name in the File Hierachy; it remains what you named it when you first created the game app. However, you can change it the file hierachy also. Just select the folder name, and select rename to change it.

Summary

In this tutorial, we learned of one way we can add and stack images to our game screen play. The spritebatch method is ideal for doing this, by allowing you to stack your images with several draw calls.
We can also add sprites(images) by using Actor and Stage components to our game code. An Actor can be any widget you want, like an image, or a button; and then we simply add that Actor to the Stage. The Stage is also really useful, because it can take on more functionality for your game play; like handle input events, transformations, and positioning more easily.
If your making a platformer type game, you can use Tiled maps. These tiled graphics are great for making layers in your game which can be used for background, foreground, and the game characters(sprites). You simply add your sprites as objects in the map layers, and they will automatically get rendered in the correct order.
There are many methods you can implement into your game strategy to add your game assets. We shall learn more about these as we continue our game dev tutorials.

EXAMPLE CODE - Code For This Tutorial.

JUST copy and paste to update your code.

Example Code:
Copy Paste the Code
Copy and replace these codes into your app to replace the code on the pages there now Save each page __________________________________ AppProject: Stack Images Package name: com.aac.stack_images_example Replace edit/code on MyGdxGame.java and rebuild RUN your app code _______________________________ MyGdxGame.java package com.aac.stack_images_example; import com.badlogic.gdx.*; import com.badlogic.gdx.graphics.*; import com.badlogic.gdx.graphics.g2d.*; import com.badlogic.gdx.graphics.OrthographicCamera; import com.badlogic.gdx.utils.viewport.ExtendViewport; public class MyGdxGame extends ApplicationAdapter { SpriteBatch batch; Texture banana; Texture orange; OrthographicCamera camera; ExtendViewport viewport; @Override public void create () { batch = new SpriteBatch(); camera = new OrthographicCamera(); viewport = new ExtendViewport(800, 600, camera); banana = new Texture("banana.png"); orange = new Texture("orange.png"); } @Override public void resize(int width, int height) { viewport.update(width, height, true); batch.setProjectionMatrix(camera.combined); } @Override public void render () { Gdx.gl.glClearColor(255/255f, 241/255f, 118/255f, 1); Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT); batch.begin(); batch.draw(banana, 0, 0); batch.draw(orange,100,100); batch.draw(banana,200,200); batch.draw(orange,300,300); batch.draw(banana,400,400); batch.end(); } @Override public void dispose () { batch.dispose(); banana.dispose(); orange.dispose(); } } _______________________________ no edit required you can change the app name at strings.xml strings.xml at gdx-game-android/res/values strings.xml <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">StackImages</string> </resources> _____________________________________ end of app code, app built
App Images;(2 images)

Save the two images to your device; and then put them into the 'assets' folder at AppProjects/StackImages,'Gdx-game-android/assets; of your app project.
orange.png and banana.png