[libGDX] day 2 – draw stuff

welcome back,

today we want to let our “game” draw something. Therefore we first have to know that libgdx uses OpenGL to render the images and OpenGL needs our textures to have a width and a height f a power of 2 (so that the graphic card can faster process it). As we are approaching christmas time I took a free image of a tree ((openclipart.org) and put it in a 512px * 1024px transparent png file.


To load this image, you have to put it in the assets-folder (that one in the testgame-android project). I created a “graphics”-folder inside it, but you can call it however you want.

Texture tree;
// [...] in der create()-Methode:
tree=new Texture(Gdx.files.internal("graphics/tree.png"));

With Gdx.files.internal() you can read files from the assets and process them. (In this example we generate a texture from it).

When your game quits, you should dispose all your textures:

@Override
public void dispose() {
 tree.dispose();
}

Now we got an object which holds our texture, but we want to draw it. Therefore we need a SpriteBatch. Simply said a SpriteBatch is a mysterious box, that collects our textures, processes them and sends them to the graphics card. We create our SpriteBatch in the create()-method and dispose it in dispose().

To finally draw a texture, we have to write the following code:

batch.begin();
batch.draw(texture,0,0);
batch.end();

Between begin() and end() you can draw all the textures, you want.

As you see a big part of the screen is empty, as our tree is located in the top left part of its image. We only want to draw a part of the texture and therefore there are TextureRegions.

When creating a TextureRegion you pass the texture (in our case “tree”) and the part of the image, which shall be marked by this region (in our case this region starts at 0,0 and has the size 450*730).

TextureRegion christmasTree;
//[...]
christmasTree=new TextureRegion(tree, 0, 0, 450,730);
//[...]
batch.draw(christmasTree,0,0);

But what is the resolution of our screen? Which coordinates do we have to give a ball that we want to be on top of our tree?

By default libgdx uses the resolution your window has initially for the resolution of the visible space.
If you change the resolution of your window, the resolution of the screenspace remains the same and therefore the image gets distorted.

If you want to change the resolution of the visible space, you have to use an OrthographicCamera.

OrthographicCamera camera;
// [...] in create():
camera=new OrthographicCamera();
camera.setToOrtho(false, 800,480); // true, if the y-axis should show downwards
// [...] in render():
batch.setProjectionMatrix(camera.combined); // tells the batch, where to draw
batch.begin();

Or you put in the resize()-method:

camera.setToOrtho(false,width,height);

If you now resize the window, you can see more from the screen as the resolution changes as well.

I’m not quite sure which one is better and how to use it right, but for the beginning I’ll use the first method as it is easier. I’ll use 800×480 as the fixed resolution, because my smartphone has that one.

You can change the standard-size of the window in the desktop/Main-class:

public class Main {
 public static void main(String[] args) {
  LwjglApplicationConfiguration cfg = new LwjglApplicationConfiguration();
  cfg.title = "bitowls adventcalendar game";
  cfg.useGL20 = false;
  cfg.width = 800;
  cfg.height = 480;

  new LwjglApplication(new TestGame(), cfg);
 }
}

The coordinatesystem of our screen starts from the left bottom:

I added a ball (openclipart.org) and resized the tree to fit the height of the screen (atm I use a batch.draw()-Method that accepts as well a width and a hight).

the full code:

public class TestGame implements ApplicationListener {

 TextureRegion christmasTree;
 Texture ball;
 SpriteBatch batch;
 OrthographicCamera camera;

 @Override
 public void create() {
  // load assets
  Texture tree=new Texture(Gdx.files.internal("graphics/tree.png"));
  christmasTree=new TextureRegion(tree, 0, 0, 450,730);
  ball=new Texture(Gdx.files.internal("graphics/ball.png"));

  batch=new SpriteBatch();

  // create viewport
  camera=new OrthographicCamera();
  camera.setToOrtho(false, 800,480);
 }

 @Override
 public void render() {  
  Gdx.gl.glClearColor(1,1,1, 1);
  Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);

  // render our images
  batch.setProjectionMatrix(camera.combined);
  batch.begin();
  batch.draw(christmasTree,0,0,450/(730.0f/480.0f),480);
  batch.draw(ball,60,170);
  batch.end();
 }

 @Override
 public void resize(int width, int height) {
 }

 @Override
 public void pause() {
 }

 @Override
 public void resume() {
 }

 @Override
 public void dispose() {
  // dispose all the trash :P
  christmasTree.getTexture().dispose();
  ball.dispose();
  batch.dispose();
 }
}

If you are itching to programm something I got some simple tasks for you:

• bring the tree with the ball to the center of the screen
• render the ball multiple times on different places of the tree
• add new textures (candles or other decorations) and put them on the tree

Tomorrow we will deal with user input (touch/mouse, keyboard).

write suggestions, complains, found mistakes or questions in the comments!