Libgdx with Android For Game Dev
Game Dev Tutorial : Background Texture(Extend Viewport)
Game Dev -All Game Dev Tutorials
In our previous tutorial, 'BackgroundTexture', we created our app screen using a 'FillViewport' type. However, when resizing our screen,(rotating our screen to landscape view) we found the background image did not scale like it does in portrait mode. To correct this, we can try another viewport type; ExtendViewport, and adjust our parameter values also. This is just a matter of tweaking our code from the previous tutorial. Then we can just update our 'MyGdxGame.java' class, and reRun our code to build the app, this time, with the new code implemented. All code is at the Example Code section on this page, just replace/edit the code where required, save the page, and then RUN your code. No new images are required, as we are using the same images from the previous tutorial also.
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, BackgroundTextureExtendViewport(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_extendviewport'.
Click CREATE. Now Background Texture Extend Viewport app is created, and the MyGdxGame.java page opens in your AIDE coding editor.
For this tutorial, we are using the same images as our previous tutorial. If you chose to Create a new app just goto the previous tutorial to get the images, or copy paste them from the 'assets' folder from previous Project; BackgroundTexture to this one: BackgroundTextureExtendViewport. Note: All images goto the 'assets' folder at 'gdx-game-android', of your AppProject name: this tutorial it's - BackgroundTextureExtendViewport/gdx-game-android/assets/rock.png, and skyBackground.jpg.
App Project - Background Texture Extend Viewport
Screen Size 5.8" Portrait Orientation
Screen Size 5.8" Landscape Orientation
As mentioned, we need only make a few tweaks to our code from the previous tutorial. First, in the 'imports', we must add the import for 'ExtendViewport'. All other imports are the same as the previous tutorial.
And, as in this next image, we must add the variable for 'ExtendViewport', all else is the same; no edit required.
This next image has the 'Create' method code, which has all the new instances of our variables. Here we added our extendViewport also, and we set the 'ProjectionMatrix' in the resize method to combine it with the camera. Using the projectionMatrix call is important, as is the ExtendViewport. These 2 calls along with the viewport.update call; also in the create method; are what make our orientation scale properly in the landscape mode.
With the ExtendViewport(600,600,camera) call, we set the resolution for the viewport. This worked fine for our screen sizes of 5.8". However, for a larger screen or a smaller device screen size, you might have to adjust the resolution here. Best to tweak it, then run your app code to see how it looks in both orientations(portrait,landscape).
And, we also tweaked the values at our Texture Regions. You can also adjust these based on the device screen size your targeting, and what portion of the texture you want shown on the screen.
For our sky background texture:
texture = new Texture(Gdx.files.internal("skyBackground.jpg"));
backgroundTexture = new TextureRegion(texture,180,0,600,744);
As we learned in our previous tutorial, using a 'TextureRegion', we can get a portion of an image and draw it to our game screen, either as a background image, or a foreground image. We can adjust the 4 parameter values to get the portion of the image we want. For this tutorial, we used these values:180,0,600,744, meaning we wanted our texture width to start at 180(start at 180 on the image), the height at 0, and then to move widthwise to 600 on the image, and heightwise, to 744 on the image. This is the portion from our larger image which is (2048x2048) that we want to draw to our game screen. So, the portion you select to be drawn, and resolution you provide, all contribute to what you see on the game screen. And, the 'orthographic camera' is also important. Make sure to declare it as a variable, and create a new instance of it in the create method as we have done here.
By looking at these images of the app shot, and our previous tutorials', you can see with this app shot we have a more balanced proportion of sky and grassy hills. Our previous tutorial app shot shows more sky and less of the grassy hills.
This next image has the code for the render method. This as you know, draws our textures to the game screen using our 'Spritebatch', call. Also, in our draw method, we can set the width and height, the x and y axis, of our textures. So, in this case, we want our skybackground image, to start its' draw at 0,0 since it is going to be covering our entire screen area for width and height. Our other image, rock.png, we want to strategically position in the foreground, so we do give it a width(x) and a height(y). We scaled it to 260 width,(from left corner of screen), and 95 for height, scaling up the screen from the base of the screen. From looking at our app shot, you can see this is where it is positioned.
And, lastly, we dispose of our game assets with the dispose method.
As we continue our Game Dev tutorials, we will learn additional methods for adding background and foreground images that we can use for our game assets and game fixtures.
Game Dev -All Game Dev Tutorials
In our previous tutorial, 'BackgroundTexture', we created our app screen using a 'FillViewport' type. However, when resizing our screen,(rotating our screen to landscape view) we found the background image did not scale like it does in portrait mode. To correct this, we can try another viewport type; ExtendViewport, and adjust our parameter values also. This is just a matter of tweaking our code from the previous tutorial. Then we can just update our 'MyGdxGame.java' class, and reRun our code to build the app, this time, with the new code implemented. All code is at the Example Code section on this page, just replace/edit the code where required, save the page, and then RUN your code. No new images are required, as we are using the same images from the previous tutorial also.
Create our Game App Screen
We are not creating a new app, we will simply update the code in the existing app(from previous tutorial). You can however, create a new app instead if you want. If so, follow the process as noted here to create another New app for this.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, BackgroundTextureExtendViewport(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_extendviewport'.
Click CREATE. Now Background Texture Extend Viewport app is created, and the MyGdxGame.java page opens in your AIDE coding editor.
For this tutorial, we are using the same images as our previous tutorial. If you chose to Create a new app just goto the previous tutorial to get the images, or copy paste them from the 'assets' folder from previous Project; BackgroundTexture to this one: BackgroundTextureExtendViewport. Note: All images goto the 'assets' folder at 'gdx-game-android', of your AppProject name: this tutorial it's - BackgroundTextureExtendViewport/gdx-game-android/assets/rock.png, and skyBackground.jpg.
App Project - Background Texture Extend Viewport
Screen Size 5.8" Portrait Orientation
Screen Size 5.8" Landscape Orientation
Code For This Tutorial
And, as in this next image, we must add the variable for 'ExtendViewport', all else is the same; no edit required.
This next image has the 'Create' method code, which has all the new instances of our variables. Here we added our extendViewport also, and we set the 'ProjectionMatrix' in the resize method to combine it with the camera. Using the projectionMatrix call is important, as is the ExtendViewport. These 2 calls along with the viewport.update call; also in the create method; are what make our orientation scale properly in the landscape mode.
With the ExtendViewport(600,600,camera) call, we set the resolution for the viewport. This worked fine for our screen sizes of 5.8". However, for a larger screen or a smaller device screen size, you might have to adjust the resolution here. Best to tweak it, then run your app code to see how it looks in both orientations(portrait,landscape).
And, we also tweaked the values at our Texture Regions. You can also adjust these based on the device screen size your targeting, and what portion of the texture you want shown on the screen.
For our sky background texture:
texture = new Texture(Gdx.files.internal("skyBackground.jpg"));
backgroundTexture = new TextureRegion(texture,180,0,600,744);
As we learned in our previous tutorial, using a 'TextureRegion', we can get a portion of an image and draw it to our game screen, either as a background image, or a foreground image. We can adjust the 4 parameter values to get the portion of the image we want. For this tutorial, we used these values:180,0,600,744, meaning we wanted our texture width to start at 180(start at 180 on the image), the height at 0, and then to move widthwise to 600 on the image, and heightwise, to 744 on the image. This is the portion from our larger image which is (2048x2048) that we want to draw to our game screen. So, the portion you select to be drawn, and resolution you provide, all contribute to what you see on the game screen. And, the 'orthographic camera' is also important. Make sure to declare it as a variable, and create a new instance of it in the create method as we have done here.
By looking at these images of the app shot, and our previous tutorials', you can see with this app shot we have a more balanced proportion of sky and grassy hills. Our previous tutorial app shot shows more sky and less of the grassy hills.
This next image has the code for the render method. This as you know, draws our textures to the game screen using our 'Spritebatch', call. Also, in our draw method, we can set the width and height, the x and y axis, of our textures. So, in this case, we want our skybackground image, to start its' draw at 0,0 since it is going to be covering our entire screen area for width and height. Our other image, rock.png, we want to strategically position in the foreground, so we do give it a width(x) and a height(y). We scaled it to 260 width,(from left corner of screen), and 95 for height, scaling up the screen from the base of the screen. From looking at our app shot, you can see this is where it is positioned.
And, lastly, we dispose of our game assets with the dispose method.
Summary
Creating a background texture for your game play is commonplace in game dev. In this tutorial, we learned one way of adding a background texture, and also adding a foreground texture. Using a TextureRegion, you can implement images and use whatever portion of the image you want as your background or foreground texture. With this method, you can easily position images as well.As we continue our Game Dev tutorials, we will learn additional methods for adding background and foreground images that we can use for our game assets and game fixtures.
EXAMPLE CODE - Code For This Tutorial.
JUST copy and paste to update your code.
JUST copy and paste to update your code.