Game Dev Tutorial : Texture Region
Game Dev -All Game Dev Tutorials

In this tutorial, we are going to create a 'Texture Region', from our image - 'park-nature-2.jpg', shown here with the app shot image. A 'Texture Region' call,(call - means adding the Texture Region method to our code) lets us select a region from a larger image and then position that selected region onto our game screen. We can use the region we select as the screen background or just to cover a portion of our game screen.
The texture region image is an 'asset', so we place the image into our assets folder at our game's gdx-game-android/assets folder.

App Shot:

Project Name:Texture Region
Smartphone with 5.8" screen.


Image: park-nature-2.jpg
Size: 2048x1024

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, TextureRegion(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.texture_region_example'.

Click CREATE. Now Texture Region 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 image, 'park-nature-2.jpg', to your device also, copy/paste to the App Project 'assets' folder at 'gdx-game-android/assets', in the App Project(TextureRegion) file hierachy.

Code For This Tutorial

Image - texture

For this tutorial, we have one image we add to our code, as a texture, then we use the 'Texture Region', to get a region from the texture we added.
In this next image, you can see the code:
texture = new Texture(Gdx.files.internal("park-nature-2.jpg"));
region = new TextureRegion(texture,0,0,960,940);

First, we added our image,(our texture), 'park-nature-2.jpg', then we code our 'region', 'new TextureRegion'. For our Texture region, there are four parameters(numbers) we can set; so, in this case, we want it to begin at 0,0. These represent the width and height where the region should begin. 0.0 is the bottom left corner of the image, so at the left of the image, left of the bunch of trees.
Then the next two numbers are the width and height we want for the texture region were selecting. For that we selected: 960,940, as shown in the image of the code. We want our image to go 960 for width, and 940 for height. Our image in total is 2048x1024, so basically we want to region an area that is almost half of the width of our original image, and almost as tall as the original image. By looking at our app shot, you see this is what we did.

Lets look at codes for Imports, Variables, Create, Render, and Dispose, for this tutorial.

Imports
We add our 'import statements', as shown in this next image. We include our basic imports, and also those for 'texture', 'spritebatch', 'textureRegion', and the 'camera', and 'viewport'.


Now, we add our variables. For texture, textureRegion, Orthographic Camera, Viewport, and of course, the SpriteBatch.



In the Create method, we add our float for worldWidth and worldHeight; this is important for our camera and viewport, as they position the texture region based on the numbers we provide. And, we declare our new texture, and textureRegion, and, camera, viewport, are declared, and set to worldWidth also. Lastly, we include our spriteBatch declaration.



Setting the Projection Matrix is important, as this is how the camera and viewport interact, and then set the view of the screen based on the info given in code like worldWidth, worldHeight.



We must use the 'batch.draw' method to draw our TextureRegion to the screen. Note the 288,0 values given for the draw method. This means we want our 'region' selected to be drawn at a certain point on the screen, in this case; at 288 on the X parameter, and 0 on the Y parameter. So the 288 is the width running along the base of the screen, and 0 is the height it will be positioned from the base of the screen, meaning it does not move from the base for height. Looking at the app shot image, you can see this is how it is placed in the screen.

We also dispose of our assets as shown in this image and see all code at the Example Code section this page.

Summary

With the adjustable parameters of the texture region you can select any part of the original image and bring it onto your game screen. Also, if you change the 'float worldWidth, float worldHeight', numbers you can make the image region scale larger or small depending on the numbers you add. So, in this tutorial example, if you were to select numbers smaller than 1600,1200 as your float world numbers: example 1200,800; the selected region would scale larger and take up more space on the game screen. And, if you select numbers larger than 1600,1200, example 1800,1400, then the image would scale itself to look smaller on your game screen.
Do note; this is based on several factors, those being the screen size of the smartphone, the size of the original image your using, and also what width and height values you used for the region, and also, what 'viewport' type you used. In this tutorial, we selected the 'extendViewport', however, for example, a 'fitViewport', or any of the other viewport types, could change the scale factor.

With this tutorial, we viewed an example of how to get a smaller image section from a larger image and put it on your game screen. In Libgdx, Texture Region method is one way we can achieve this. Another method of getting images to your game screen from a single image is with a 'Spritesheet'. A spritesheet is a collection of many images all placed together on one larger sheet. Similar to the Texture Region call, you can then just select which single image you want from the Spritesheet. We can learn more about Spritesheets 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 this code into the MyGdxGame.java, Save the page __________________________________ App Name: Texture Region Package Name: com.aac_texture_region_example MyGdxGame.java package com.aac_texture_region_example; import com.badlogic.gdx.*; import com.badlogic.gdx.graphics.*; import com.badlogic.gdx.graphics.g2d.*; import com.badlogic.gdx.graphics.GL20; import com.badlogic.gdx.graphics.Texture; import com.badlogic.gdx.graphics.g2d.SpriteBatch; import com.badlogic.gdx.graphics.g2d.TextureRegion; import com.badlogic.gdx.ApplicationAdapter; import com.badlogic.gdx.utils.viewport.ExtendViewport; import com.badlogic.gdx.graphics.OrthographicCamera; public class MyGdxGame extends ApplicationAdapter { Texture texture; TextureRegion region; SpriteBatch batch; ExtendViewport viewport; OrthographicCamera camera; @Override public void create() { float worldWidth = 1600; float worldHeight = 1200; batch = new SpriteBatch(); texture = new Texture(Gdx.files.internal("park-nature-2.jpg")); region = new TextureRegion(texture,0,0,960,940); camera = new OrthographicCamera(); viewport = new ExtendViewport(worldWidth,worldHeight,camera); viewport.apply(); camera.position.set(worldWidth / 2f, worldHeight / 2f,0); } @Override public void resize(int width,int height) { viewport.update(width,height,true); batch.setProjectionMatrix(camera.combined); } @Override public void render() { Gdx.gl.glClearColor(139/255f, 133/255f, 137/255f, 1); Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT); camera.update(); batch.begin(); batch.draw(region,288,0); batch.end(); } @Override public void dispose() { batch.dispose(); texture.dispose(); } @Override public void pause() { } @Override public void resume() { } } end code Texture Region app built
App Images;(one image) park-nature-2.jpg
Save image to device, copy/paste, add to 'assets' folder in AppProject - Texture Region