2d animations using sprites in LibGDX

Check out Lines Galaxy Android game to view the results in action.

2d animations of entities in LibGDX can be done in multiple ways.

One option would be to draw each pixel - not that easy but the result would be great. Second option is using textures - similar to sprite sheets but for other purposes.

The last option that I know of and that is described here is using a set of images packed together in a larger image named sprite.

2d animations can be created quite fast using these sprites.  The sprite does not need to have a text file describing the contents of it - sizes, positions, etc. All you need to know is how many rows and columns your animation has.

The bellow code sequence creates a continuous animation using a 5x1 frames sprite.

Here's how you can create LibGDX 2d animations using sprites:

// you'll manage the imports public class MyAnimationClass {

public static Texture bounce_sprite;
private static final int COLS = 5;
private static final int ROWS = 1;

static Animation bounce_animation;
static TextureRegion[] bounce_frames;
static TextureRegion current_frame;
static float state_time;

@Override
public void create () {

    bounce_sprite = `new Texture(Gdx.files.internal("bounce_sprite.png"));        Te`xtureRegion[][] tmp = TextureRegion.split(bounce_sprite, bounce_sprite.getWidth()/COLS, bounce_sprite.getHeight()/ROWS);
    bounce_frames = new TextureRegion[COLS * ROWS];
    int index = 0;
    for(int y=0; y<ROWS; ++y) {
        for(int x=0; x<COLS; ++x) {
            bounce_frames[index++] = tmp[y][x];
        }
    }
    bounce_animation = new Animation(0.1f, bounce_frames);
    state_time = 0f;

}

@Override public void render () {

    Gdx.gl.glClearColor(1,1,1,1);
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

    batch.begin();

    state_time += delta;
    current_frame = bounce_animation.getKeyFrame(state_time, true);
    batch.draw(current_frame,

x,                    y,                    width,                    height,                    origin_x,                    origin_y,                    scale_x, scale_y, rotation);

    batch.end();

}

}

That's all for the basic 2d sprite animation using LibGDX.

In case you want to run the animation only once when some event triggers you could keep the state of the animation in a boolean variable:

// you'll manage the imports public class MyAnimationClass {

public static Texture bounce_sprite;
private static final int COLS = 5;
private static final int ROWS = 1;

static Animation bounce_animation;
static TextureRegion[] bounce_frames;
static TextureRegion current_frame;
static float state_time;

boolean bounce_animation_running;

@Override
public void create () {

    bounce_sprite = `new Texture(Gdx.files.internal("bounce_sprite.png"));        Te`xtureRegion[][] tmp = TextureRegion.split(bounce_sprite, bounce_sprite.getWidth()/COLS, bounce_sprite.getHeight()/ROWS);
    bounce_frames = new TextureRegion[COLS * ROWS];
    int index = 0;
    for(int y=0; y<ROWS; y++) {
        for(int x=0; x<COLS; x++) {
            bounce_frames[index++] = tmp[y][x];
        }
    }
    bounce_animation = new Animation(0.1f, bounce_frames);
    state_time = 0f;

    // set this variable true when you want the animation to run once
    bounce_animation_running = true;

}

@Override public void render (float delta) {

    Gdx.gl.glClearColor(1,1,1,1);
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

    batch.begin();

    if(bounce_animation_running) {
        state_time += delta;
        current_frame = bounce_animation.getKeyFrame(state_time, true);
        batch.draw(current_frame,

x,                    y,                    width,                    height,                    origin_x,                    origin_y,                    scale_x, scale_y, rotation); if(bounce_animation.isAnimationFinished(state_time)) { state_time = delta; bounce_animation_running = false; } }

    batch.end();

}

}

Obviously a more detailed example can be found on the Github LibGDX page, but if you want to skip dirrectly to the code, this should help you get started.

Here's the sprite used in this demo:

Check out Lines Galaxy Android game to view the results in action.