Game Dev Tutorial : Scaling Viewport: With Image
Game Dev -All Game Dev Tutorials

For this tutorial, we are going to look at scaling a viewport to fit our image. In this case, our image is 256x256 - 'forest_image.jpg.' Yes, that is the same square image from our previous tutorial. As we mentioned in our last tutorial, viewports can be used for a number of reasons, essentially it is based on what you want to achieve in a particular game screen. For now, we want to take our image that is about the 1/4 size of our 5.8" cell phone screen size and stretch this image so it covers the screen, for width and height. To do this we are going to use a viewport - a StretchViewport, which when added to our code can resize our image as we want. The app code and image are at the Example Code section.

Project for this tutorial - Viewport Scaled with Image

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, Viewport Scaled with Image(and, no spaces in the app name, you can add spaces after you create it at the app name folder; just select it and then select rename). Next, add the package name, 'com.aac.scaling_viewport'. Click CREATE. Now the newly created game app template opens your mygdxgame.java page in the AIDE coding editor. Save the game image, 'forest_image.jpg', to your device also, or just copy paste it from previous tutorial folder to this App Project 'assets' folder at 'gdx-game-android', in the App Project file hierachy.

App Shot

Viewport Scaled with Image

Code For This Tutorial

First we must add/update our import statements to make sure they have all the imports for the code we are going to add for this viewport. Looking at the image, you see we added them for; viewport, scaling viewport, stretch viewport, and of course, our texture, spritebatch, and camera imports.



After updating our imports we should add our variables, declare them as shown in this next image. We added code for viewport, camera, our texture, and the spritebatch to draw our texture.

At the Create method, 'public void create()' we add our camera, viewport, and set the camera to the viewport. Also added code for the texture, spritebatch.



And, in the Render method, 'public void render()' we draw our image to the full size of the game screen, We add the 'getWorldWidth' , and 'getWorldHeight', parameters, which we also add in the Create method - '(Gdx.graphics.getWidth(), Gdx.graphics.getHeight()', These are required to make the image resize to fit the entire screen area.

In Summary

In this tutorial, we learned of one way we can resize a smaller texture to become a full screen texture to the game screen. By using the 'StretchViewport', and 'getWidth', 'getHeight', parameters in both our 'create', and 'render' methods we can facilitate this type of viewport. This size of image, 256x256 worked fine on our 5.8" device screen, but may not scale as well on a larger device screen size. In that scenario you may require a larger image for your project. Of note; game asset images should be sized like: 16x16, 32x32, 64x64, 128x128, 256x256, 512x512,1024x1024, and so forth. This is both for compatibility, and game performance.
Most game 'asset images' you buy or find for free follow this type of format. You can, however, resize or crop just about any image, and use them for your mobile games.
It is easy to find free online image tools that resize and crop images, and Google Play store has many apps that can also crop and resize.

Another method you can implement to add screen backgrounds, or full/partial screen texture coverage, is Texture Atlas. With the texture atlas, you add the atlas(usually large image with one large single or multiple images added). Then you code a Texture Region to show specific areas of your atlas or certain images from it.
We'll learn more about texture atlas 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 __________________________________ App Name: Viewport Scaled With Image Package name: _______________________________ package com.aac.scaling_viewport; import com.badlogic.gdx.*; import com.badlogic.gdx.graphics.*; import com.badlogic.gdx.graphics.g2d.*; import com.badlogic.gdx.ApplicationAdapter; import com.badlogic.gdx.graphics.GL20; import com.badlogic.gdx.graphics.Texture; import com.badlogic.gdx.graphics.g2d.SpriteBatch; import com.badlogic.gdx.graphics.Camera; import com.badlogic.gdx.graphics.OrthographicCamera; import com.badlogic.gdx.utils.Scaling; import com.badlogic.gdx.utils.viewport.ScalingViewport; import com.badlogic.gdx.utils.viewport.Viewport; import com.badlogic.gdx.utils.viewport.StretchViewport; public class MyGdxGame extends ApplicationAdapter { SpriteBatch batch; Texture img; Viewport viewport; Camera camera; @Override public void create() { camera = new OrthographicCamera(); viewport = new StretchViewport(Gdx.graphics.getWidth(), Gdx.graphics.getHeight()); viewport.setCamera(camera); batch = new SpriteBatch(); img = new Texture("forest_image.jpg"); } @Override public void render() { camera.update(); Gdx.gl.glClearColor(0, 0, 0, 1); Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT); batch.begin(); batch.draw(img, 0,0,viewport.getWorldWidth(),viewport.getWorldHeight()); batch.end(); } @Override public void resize(int width, int height) { viewport.update(width,height); } public void dispose() { batch.dispose(); } @Override public void pause() { } @Override public void resume() { } } end code built end code for this tutorial game app ______________ no changes required at AndroidManifest.xml <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.aac.gamedev_code" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="8" android:targetSdkVersion="18" /> <application android:icon="@drawable/ic_launcher" android:label="@string/app_name" > <activity android:name=".MainActivity" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenSize"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest> ______________________
App Images;(one image)
forest_image.jpg

Save this image to your device, then copy/paste into the 'assets' folder at 'gdx-game-android' folder.
Add the image name to the app code.