LibGDX Tutorial 8: Using Texture Packer and Atlas Images

The utility TexturePacker can pack images in a selected folder. I have four images in a folder say Images.

I can get TexturePacker from the website http://code.google.com/p/libgdx-texturepacker-gui/downloads/list. It is in a zip file. Extract the main file which is a java jar file. Run the jar file using command

In the GUI program, I select the new pack name say circles as well as the Input and Output directories. They point to images folder

The images folder after runing the program is

There are two new files. One is larger png image (with the four subimages). This is the Atlas image. We also have an atlas text file which has names, positions, and dimensions of the subimages.

Now I can create the project directories

I can modify the program as such. In this I will animate the four subimages in x-direction, each with slightly different velocity.

PackerDemo.java
package com.tutorial.packerdemo;

import com.badlogic.gdx.ApplicationListener;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.GL10;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.graphics.g2d.TextureAtlas;
import com.badlogic.gdx.graphics.g2d.TextureRegion;

public class PackerDemo implements ApplicationListener {
    private OrthographicCamera camera;
    private SpriteBatch batch;
    private TextureAtlas circleAtlas; //** Holds the entire image **//
    private TextureRegion redCircle; // ** Points to the red Circle **//
    private TextureRegion blueCircle; // ** Points to the blue Circle **//
    private TextureRegion yellowCircle; // ** Points to the yellow Circle **//
    private TextureRegion greenCircle; // ** Points to the green Circle **//
    private float velRed = 50f; // ** Red Circle velocity **//
    private float velGreen = 55f; //** Green Circle velocity **//
    private float velBlue = 60f; //** Blue Circle velocity **//
    private float velYellow = 65f; //**Red Circle velocity **//
    private float posRed, posGreen, posBlue, posYellow; //** Positions of circles**//
    private float deltaTime; //** Time between frames **//
   
    @Override
    public void create() {      
        camera = new OrthographicCamera();
        camera.setToOrtho(false, 800, 480); //** w/h ratio = 1.66 **//
        batch = new SpriteBatch();
        circleAtlas = new TextureAtlas("circles.pack"); //** Load circles.pack and circles.png **//
        redCircle = circleAtlas.findRegion("redCircle");  //** Load redCircle from circleAtlas **//
        blueCircle = circleAtlas.findRegion("blueCircle"); //** Load blueCircle from circleAtlas **//
        greenCircle = circleAtlas.findRegion("greenCircle"); //** Load greenCircle from circleAtlas **//
        yellowCircle = circleAtlas.findRegion("yellowCircle"); //** Load yellowCircle from circleAtlas **//
    }

    @Override
    public void dispose() {
        batch.dispose();
        circleAtlas.dispose();
    }

    @Override
    public void render() {      
        Gdx.gl.glClearColor(1, 1, 1, 1);
        Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
      
        deltaTime = Gdx.graphics.getDeltaTime();
      
        posRed += velRed * deltaTime; //** Increase red position by its vel * time **//
        if (posRed>750) posRed = 0f; //** If near end of screen, send to beginning **//
      
        posBlue += velBlue * deltaTime; //** Increase blue position by its vel * time **//
        if (posBlue>750) posBlue = 0f; //** If near end of screen, send to beginning **//
      
        posGreen =posGreen + velGreen * deltaTime; //** Increase green position by its vel * time **//
        if (posGreen>750) posGreen = 0f; //** If near end of screen, send to beginning **//
      
        posYellow =posYellow + velYellow * deltaTime; //** Increase yellow position by its vel * time **//
        if (posYellow>750) posYellow = 0f; //** If near end of screen, send to beginning **//
      
        batch.setProjectionMatrix(camera.combined);
        batch.begin();
        batch.draw(redCircle, posRed, 100); //** draw Red circle **//
        batch.draw(greenCircle, posGreen, 200); //** draw Green circle **//
        batch.draw(blueCircle, posBlue, 300); //** draw Blue circle **//
        batch.draw(yellowCircle, posYellow, 400); //** draw Yellow circle **//
        batch.end();
    }

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

    @Override
    public void pause() {
    }

    @Override
    public void resume() {
    }
}

This is the output at one time