Animating Sprite Sheets in Java using LibGdx

Question

I have some code here that takes a sprite sheet and divides it up into its individual sprites by taking in the length and width of my image and diving it by the rows and columns. This, works for my test sprite sheet, but not the one I'm actually going to be using for my game.

My Animation Class is here:

package Simple;


    import com.badlogic.gdx.Gdx;
    import com.badlogic.gdx.graphics.Texture;
    import com.badlogic.gdx.graphics.g2d.Batch;
    import com.badlogic.gdx.graphics.g2d.TextureRegion;
    import com.badlogic.gdx.graphics.g2d.Animation;

    public class RunningMan {
        private Texture texture;
        private TextureRegion[] walkFrames;
        private Animation walkAnimation;
        private float stateTime = 0f;
        private TextureRegion currentFrame;
        int rows = 5;
        int cols = 6;
        public RunningMan(Texture texture) {
            this.texture = texture;
            TextureRegion[][] tmp = TextureRegion.split(texture, texture.getWidth() / cols, texture.getHeight() / rows);  // split the sprite sheet up into its 30 different frames
            walkFrames = new TextureRegion[rows * cols];
            int index = 0;
            for(int i = 0; i < rows; i++) {
                for (int j = 0; j < cols; j++) {
                    walkFrames[index++] = tmp[i][j];    // Put the 30 frames into a 1D array from the 2d array
                }
            }
            walkAnimation = new Animation(0.06f, walkFrames);  // initialize the animation class
            stateTime = 0f;
        }

        public void draw(Batch batch) {
            stateTime += Gdx.graphics.getDeltaTime();   // stateTime is used to determine which frame to show
            if(stateTime > walkAnimation.getAnimationDuration()) stateTime -= walkAnimation.getAnimationDuration();  // when we reach the end of the animation, reset the stateTime
            currentFrame = walkAnimation.getKeyFrame(stateTime);    // Get the current Frame

            batch.draw(currentFrame,50,50); // draw the frame
        }
    }

My Class to run the Animation is here:

package Simple;

import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;

public class Animation extends ApplicationAdapter {
    SpriteBatch batch;
    RunningMan man;

    @Override
    public void create () {
        batch = new SpriteBatch();
        man = new RunningMan(new Texture(Gdx.files.internal("WalkingMan.png")));
    }

    @Override
    public void render () {
        Gdx.gl.glClearColor(1, 0, 0, 1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
        batch.begin();
        man.draw(batch);
        batch.end();
    }
}

When I use the WalkingMan.png, the code works flawlessly. But when I go to use any other sprite sheet, such as WalkingWoman.jpg (im not worried that this one is not transparent), the alignment is off when the columns and rows are adjusted accordingly. Any suggestions?

WalkingMan.png

WalkingWoman.jpg

You are in for a world of pain if you try to make a whole game using sprite sheets like this instead of TextureAtlases/TexturePacker. — Tenfour04
Is there a forum anywhere that I could use to help get me started on using that? — TheGaleForce
Start by reading the wiki instructions on TexturePacker on the libGDX github page. Then, the best place to get help these days is the LibGDX Discord server. It's quite lively. The official message board forum is kind of dead. — Tenfour04

potable potable · Accepted Answer · 2019-11-20T18:32:34

The animation class seems to split the source image into frames by assuming that all frames in the spritesheet image are evenly spaced. So for the WalkingMan image, the 512x512px original is split into 30 frames each 85.33px wide (512 / 6 columns), and 102.4px high (512 / 5 rows).

If, as you say, you adjust the column and row numbers for the WalkingWoman image (which is 1300x935), you get 36 frames each 144.44px wide (1300 / 9 columns), and 233.75px high (935 / 4 rows).

The problem is that the WalkingWoman spritesheet does not have each frame evenly spaced. If you split the first frame out of the image, you get this:

see how her foot is cut off on the right

The WalkingMan image has each image placed in the spritesheet within a bounding box of identical size. You just need to make sure the WalkingWoman sheet has each frame evenly spaced in the same way.

Animating Sprite Sheets in Java using LibGdx

1 Answers