Game Dev Tutorial III: Draw New Texture, Change Screen Color
Game Dev -Prev - Tutorial II| Next Tutorial IIII
To see all Game Dev tutorials goto our Blog

This tutorial will continue on from our second tutorial, and discuss the same game screen code from 'MyGame' app project. We are going to change the color of the game screen from white to red, and also change the game screen image to the 'badlogic image', as shown in this photo. And, we are going to change the position of the 'badlogic' image also. You can download/save the badlogic image from the Example Code section on this page. Then you can add it to your app project; My Game, at the assets folder. Just put it into the same folder that now has the 'android.png' image. All updated code is at the Example code section also, just copy and paste or make the simple code changes where indicated.



Change Game Screen Color



As we learned in the previous tutorial, the color of the game screen is easily changed by using the gdx.gl.glClearColor method in your game code. White is 1,1,1,1, and red is 1,0,0,0, so we simply change our code to show this. Then once we run our app the screen color will change from white to red.

Draw Texture(New Image) and Position the Texture

Next, we want to add a different image(texture) to our game screen; the 'badlogic' image as shown in the example code section on this page. Just download/save it to your device then add the name into your code as shown.


We must update our code with the new image name, so just replace the 'android.png' name with the 'badlogic.png' name, and then add the 'badlogic' image to the assets folder in the 'MyGame' project at gdx-game-android directory.

Position Image

After we add our 'badlogic' image, we want to move it to another area on our game screen. By default, our template game app puts our image at the bottom and center of the game screen. The code for that is shown in this next image.

Gdx.graphics.getWidth. Gdx.graphics.getWidth () / 4, 0,
Gdx.graphics.getWidth() / 2, Gdx.graphics.getWidth() / 2);


'Gdx.graphics.getWidth', is a method call in the libGDX game dev framework. It basically draws a rectangle on the screen. The first parameter (in this case the number 4) is the x coordinate of the bottom left corner of the rectangle. The second parameter (in this case the 0) specifies the y coordinate of the bottom left corner of the screen(the rectangle). The third and fourth parameters specify the width and height of the rectangle itself, in this case the image itself.
FYI: x runs along the bottom of the rectangle, and y runs the height. So, whether we change the width and height of the image position, or the width and height of the image itself it is still the x and y coordinates.

The Gdx.graphics.getWidth() method returns the width of the screen in pixels. Therefore, Gdx.graphics.getWidth() / 4 would be one-fourth of the screen width(that's where the image begins). The second parameter 0 specifies that the bottom-left corner of the rectangle should be at y-coordinate 0. Y is for the height position, and since it's 0, it just stays on the bottom of the rectangle or bottom of the screen.
The third and fourth parameters (the /2 and/2 are the width and height of the image itself), so if you change them from /2 and /2, you change the shape of the image.

We want to move the 'badlogic' image; so we must update our code to correspond to where we want to move the image. We will move this image to a few different areas on the game screen so you can see how this works.

To add our new image positions, we will change the parameters in the code, by adding new numbers which tell the libgdx to reposition the image based on the number we use.
Then we save our code page, and run the app to see the new position. So, if we change the first and second number, we move the image on the game screen. And, if we change the third and fourth parameters(the numbers), we change the width and height of the image itself.
Additionally, if we change the first and second number, and also change the third and fourth numbers, then we move the image to another position on the screen, and we also change the shape of the image.

How To Change Image Position - Game Screen

Using the Gdx.graphics.getWidth method, we are going to change the position of our image 'badlogic'. Let's first just move the image to the center of the screen without changing its shape. Here's the code to do that. All we do is change our second parameter-Y- to 470. So, at the second parameter, now 0, change it to 470. Y moves the image up or down the page, its height on the screen. The 'badlogic' image is now more centered on our game screen.



Next, we are going to change the number for the fourth parameter to 8. This fourth paramenter represents the height of the image itself. So, these next images show that code and the appshot shows the squished image because we changed only its' height. In the gdx 'getWidth' method, the third and fourth parameters represent the width and height of the image itself, so since we changed only the y coordinate of the image(fourth parameter), it changed only its height, thus making it look squished.



Now, we can change it back to look unsquished by adding the same number, 8, to the width, our third parameter. As you see in these next images, its' coded with the number 8, and badlogic image now looks squared and not squished. You will see also that the image is not as centered like it was, it is now left of center. This is because our position parameters have not changed(first and second parameters), and so the image still starts its' position at exactly the same place; but since we made our image smaller, it now looks like we did not center it.

The gdx getWidth method does not automatically center or re center our image once we resize it. We must change the parameters manually so it will be centered. Try a practice with the first and second parameters to get the image to center on your game screen.
Coding Tip: first, change the code, then save the page, then run your app, by clicking the little black arrow at the top of the AIDE coding editor. Then click the MyGame icon on your device, to see the updated changes, in this case the centered 'BadLogic' image.




And, here's another example of changing the width and height of the image. This one has the width and height at 4, so the image is slightly larger than the previous example where we coded it at 8. The larger the number we add for our third and fourth parameters, the smaller the image gets on the game screen.

In Summary

In this tutorial you learned how to change the screen color by simply changing the color code numbers with the Gdx.gl.glClearColor method. In additional to using the single digit color codes you can use rgb color codes. With these you can get more selective in your color choices for your game screen colors.

Adding or updating your game screen image is easy to do. Just replace the name of the image in the code, then add the image to the assets folder in your Gdx-game-android/assets file folder. Just look for the 'android.png' that's already in that folder.
Of note, in 'libgdx' game dev you must add the image extension like 'png' or 'jpg' to your image when coding it, however in non-game android apps, you don't have to add the extension.

The Gdx.graphics.getWidth method is useful to position your images on the game screen. It is recommended to use this method, otherwise your images could take a fixed position which could put your images out of context with your game screen when used on larger or smaller screen sizes for game play. There are also other methods available to draw and position your images to screen which we'll learn about as we continue our tutorials. The method you select is a personal choice but usually depends on how many images your adding and what you want to achieve.

EXAMPLE CODE - Code For This Tutorial.

JUST copy the code for this tutorial from the Example Code in this section.

Example Code:
Copy Paste the Code
Copy the updated code for this tutorial and run your app code again make the changes to your game screen. Save each page __________________________________ This tutorial new image - badlogic add the new image name to your code as shown screen color - we now want a red screen color, update the code as indicated image position - we also moved the image, you can practice moving the 'badlogic' image on your game screen, use the example codes as indicated. __________________________________ the code at: MyGame/gdx-game/src/ MyGdxGame.java _______________________________________ package com.aac.mygame_example; import com.badlogic.gdx.*; import com.badlogic.gdx.graphics.*; import com.badlogic.gdx.graphics.g2d.*; public class MyGdxGame implements ApplicationListener { Texture texture; SpriteBatch batch; @Override public void create() { texture = new Texture(Gdx.files.internal("badlogic_image.png")); batch = new SpriteBatch(); } @Override public void render() { Gdx.gl.glClearColor(1, 0, 0, 0); Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT); batch.begin(); batch.draw(texture, Gdx.graphics.getWidth() / 4, 0, Gdx.graphics.getWidth() / 2, Gdx.graphics.getWidth() / 2); batch.end(); } @Override public void dispose() { } @Override public void resize(int width, int height) { } @Override public void pause() { } @Override public void resume() { } } _____________ end code example end of app code
App Image;
badlogic_image.png