Libgdx with Android For Game Dev
Game Dev Tutorial: Background Texture(FillViewport)
Game Dev -All Game Dev Tutorials
In this tutorial, we are going to learn how to add a 'TextureRegion', and then scale it so it covers all the device screen area. Then, we are going to add a second 'textureRegion', and add it to the foreground so it layers itself on top of the background texture.
For this tutorial, we must add a background texture - a sky and grassy hills image, and add a rock - small boulder in the foreground. This means we must add two images (textures), and then use the 'textureRegion' to apply them to the screen. This will allow us to match the sky background to cover the full screen width and height, and then we can position the rock in the foreground, so it appears the rock is just sitting on the grassy hills. All code for this tutorial, and images are at the Example Code section on this page. We need only update our 'MyGdxGame.java', page, and then Build/RUN our app to update the app code.
Click CREATE. Now Background Texture 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, 'rock.png'(512x512), 'skyBackground.jpg'(2048x2048), to your device also, and, copy/paste them to the App Project 'assets' folder at 'gdx-game-android/assets', in the App Project(Background Texture) file hierachy.
App Project - Background Texture
Screen Size 5.8"
First, we must add the imports to code as shown in this next image. Required are import statements for
Texture, TextureRegion, Viewport, and of course Application Adapter, and the basic imports are included by default.
We used the 'FillViewport' viewport in this tutorial because it allowed us to match the texture for width and height on our screen without issue(5.8" screen). As we learned previously, there are several viewport types we can use in game dev, each with their pros and cons. The fillviewport worked in this case for a 'portrait orientation' scenario.
In this next image, we see the variables declared for our app code. So, we include the variables for Texture, TextureRegion, Viewport, OrthographicCamera, and of course the Spritebatch which is required as this is what draws our images to the screen.
In the Create method, we must create new instances of all our variables, as shown in this next image. We also have parameters for each 'textureRegion'; each takes four values. 0,0,0,0; the first two are width and height for starting position on the texture; and the last two are the width and height which to include for the texture. For the 'skybackground.jpg', this is 0,0,1024,512. So, at 0,0 on the skybackground.jpg, it begins to include and continues for a width of 1024 and height of 512. This is the section of the skybackground image that gets included and drawn to the screen.
For the 'rock.png' texture, we want to begin to include at 49,49, for width and height, and to continue to include until 74,36. So, we start our texture at 49width, 49 height, and include until we get to 74 width, and 36 for height.
We also include our Camera, and Viewport here, and the Spritebatch. The FillViewport gets a width and height of 1024(width),1024(height); this is the portion of our image we want drawn to the screen.
The next image, shows our Render method code. This is where we include the 'draw' method, which draws our textures to the screen. You can see we include the x,y parameters for our rock and sky textures. The sky has x,y of 0,0, meaning we want to draw it at the default position, which is bottom left corner of the device screen. The rock texture, we want to draw at x,y of 400,1; meaning we want it to be at a width of 400 on the x axis,(runs along the base of the screen), and 1 for y axis, meaning it runs along the side of the screen going upwards. Looking at the rock in the screen shot you can see this is how it positioned itself.
The Render method also includes our screen color code, which we learned about in previous tutorials.
In the Dispose method, we dispose of our assets with batch.dispose();. We must dispose of the assets as this makes our game run more efficiently.
By rotating our cell phone, we can also change the orientation of our 5.8" device from portrait to landscape. This is what is known as a resize or resizing our screen from one orientation to another in this case portrait to landscape. However, when we do so, we notice that the skybackground image does not match the width and height like in does in the portrait mode. This can happen when coding your game as images do not automatically adjust to the different screen sizing. In this case, we must try code with another viewport type if we want to have our background image consistent across various screen orientations like portrait and landscape. Changing the parameter values most likely won't adjust the background image as we want. So in our next tutorial, we will tweak this same code from this tutorial, by adding a different viewport type. This will allow our background texture to scale for width and height as we want it to. Next Tutorial: BackgroundTexture - ExtendViewport
Game Dev -All Game Dev Tutorials
In this tutorial, we are going to learn how to add a 'TextureRegion', and then scale it so it covers all the device screen area. Then, we are going to add a second 'textureRegion', and add it to the foreground so it layers itself on top of the background texture.
For this tutorial, we must add a background texture - a sky and grassy hills image, and add a rock - small boulder in the foreground. This means we must add two images (textures), and then use the 'textureRegion' to apply them to the screen. This will allow us to match the sky background to cover the full screen width and height, and then we can position the rock in the foreground, so it appears the rock is just sitting on the grassy hills. All code for this tutorial, and images are at the Example Code section on this page. We need only update our 'MyGdxGame.java', page, and then Build/RUN our app to update the app code.
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, Background Texture(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.skyrock_example'.Click CREATE. Now Background Texture 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, 'rock.png'(512x512), 'skyBackground.jpg'(2048x2048), to your device also, and, copy/paste them to the App Project 'assets' folder at 'gdx-game-android/assets', in the App Project(Background Texture) file hierachy.
App Project - Background Texture
Screen Size 5.8"
Code For This Tutorial
In this next image, we see the variables declared for our app code. So, we include the variables for Texture, TextureRegion, Viewport, OrthographicCamera, and of course the Spritebatch which is required as this is what draws our images to the screen.
In the Create method, we must create new instances of all our variables, as shown in this next image. We also have parameters for each 'textureRegion'; each takes four values. 0,0,0,0; the first two are width and height for starting position on the texture; and the last two are the width and height which to include for the texture. For the 'skybackground.jpg', this is 0,0,1024,512. So, at 0,0 on the skybackground.jpg, it begins to include and continues for a width of 1024 and height of 512. This is the section of the skybackground image that gets included and drawn to the screen.
For the 'rock.png' texture, we want to begin to include at 49,49, for width and height, and to continue to include until 74,36. So, we start our texture at 49width, 49 height, and include until we get to 74 width, and 36 for height.
We also include our Camera, and Viewport here, and the Spritebatch. The FillViewport gets a width and height of 1024(width),1024(height); this is the portion of our image we want drawn to the screen.
The next image, shows our Render method code. This is where we include the 'draw' method, which draws our textures to the screen. You can see we include the x,y parameters for our rock and sky textures. The sky has x,y of 0,0, meaning we want to draw it at the default position, which is bottom left corner of the device screen. The rock texture, we want to draw at x,y of 400,1; meaning we want it to be at a width of 400 on the x axis,(runs along the base of the screen), and 1 for y axis, meaning it runs along the side of the screen going upwards. Looking at the rock in the screen shot you can see this is how it positioned itself.
The Render method also includes our screen color code, which we learned about in previous tutorials.
In the Dispose method, we dispose of our assets with batch.dispose();. We must dispose of the assets as this makes our game run more efficiently.
Summary
For this tutorial, we learned how to add a background texture(image), and then layer another image in the foreground by using a 'TextureRegion' call for both of the images being drawn to screen. By using a 'FillViewport' type, and with the parameter values given, we were able to draw the background texture to match the width and height of our device screen, and position our foreground image(rock.png).By rotating our cell phone, we can also change the orientation of our 5.8" device from portrait to landscape. This is what is known as a resize or resizing our screen from one orientation to another in this case portrait to landscape. However, when we do so, we notice that the skybackground image does not match the width and height like in does in the portrait mode. This can happen when coding your game as images do not automatically adjust to the different screen sizing. In this case, we must try code with another viewport type if we want to have our background image consistent across various screen orientations like portrait and landscape. Changing the parameter values most likely won't adjust the background image as we want. So in our next tutorial, we will tweak this same code from this tutorial, by adding a different viewport type. This will allow our background texture to scale for width and height as we want it to. Next Tutorial: BackgroundTexture - ExtendViewport
EXAMPLE CODE - Code For This Tutorial.
JUST copy and paste to update your code at, 'MyGdxGame.java'
JUST copy and paste to update your code at, 'MyGdxGame.java'