CODEWITHSUNDEEP
javaandroidlibgdx
IM-MC
IM-MC

Reputation: 53

libGDX Animating Texture Regions

I have a sprite image texture that looks like this:Kirby Run

And I'm trying to animate it. I have this code set up to store each frame into a TextureRegion variable then store all the frames into an Animation TextureRegion array

//AssetLoader class
runTexture = new Texture("kirbyrun.png");
runTexture.setFilter(TextureFilter.Nearest,TextureFilter.Nearest);

//Run Hiro
hiro1 = new TextureRegion(runTexture,0,55,37,55);
hiro1.flip(false,true);
hiro2 = new TextureRegion(runTexture,37,55,44,55);
hiro2.flip(false,true);
hiro3 = new TextureRegion(runTexture,81,55,44,55);
hiro3.flip(false,true);
hiro4 = new TextureRegion(runTexture,129,55,46,55);
hiro4.flip(false,true);
hiro5 = new TextureRegion(runTexture,176,55,41,55);
hiro5.flip(false,true);
hiro6 = new TextureRegion(runTexture,216,55,41,55);
hiro6.flip(false,true);
hiro7 = new TextureRegion(runTexture,257,55,41,55);
hiro7.flip(false,true);
hiro8 = new TextureRegion(runTexture,301,55,42,55);
hiro8.flip(false,true);

TextureRegion[] run = {hiro1,hiro2,hiro3,hiro4,hiro5,hiro6,hiro7,hiro8};
hiroRunAnimation = new Animation<TextureRegion>(0.5f,run);
hiroRunAnimation.setPlayMode(Animation.PlayMode.LOOP);

I'm current using a yDown coordinate system which is why I flip the image.

After trying to render this out using this code:

TextureRegion currentFrame = AssetLoader.hiroRunAnimation.getKeyFrame(runTime);

sb.begin();

sb.draw(currentFrame,player.getX(),player.getY(),player.getWidth(),player.getHeight());
sb.end();

It just opens with a picture of blocks instead of Kirby: enter image description here

It's obvious I'm doing something wrong, I'm guessing its with my TextureRegion section, maybe my X, Y coordinates or wrong but I'm not sure how to fix this because I used spritecow.com to obtain these coordinates. I'm assuming the top left corner is (0,0) and positive Y means moving down the image. How can I make Kirby actually appear instead of these boxes? Or would it just be easier to separate each frame image into a separate .png file and just use Texture instead of TextureRegion so I don't need to specify a definitive area. Then I could use Animation or would that not work as well?

Upvotes: 2

Views: 1202

Answers (2)

Marius
Marius

Reputation: 412

Am I see it right, that you "hard coded" the coordinated for the sprites? That is not a very good idea, libGDX has a more comfortable way to solve this: Texture Packer.

Basically, what you do is to put the single sprites into one folder an run the texture packer script to merge them all. You will also get a json file with the sprite coordinates. You can easily load them with a asset manager. I created an example for that here: https://gist.github.com/reime005/87e1ed30548be31a632292a604f397ef

Upvotes: 4

Charanor
Charanor

Reputation: 860

The black boxes are because you're incorrectly defining the region positions. You're starting all regions at y = 55 which is incorrect since the texture starts at y = 0. You're also flipping the textures, which are making them display upside-down, so remove the flipping as well. It also seems that you're incorrectly determining the region sizes for some of the regions, so you should probably double-check them.

Your code should look like this:

// Note the third value have changed to zeroes and the flipping has been removed.
hiro1 = new TextureRegion(runTexture,0,0,37,55);
hiro2 = new TextureRegion(runTexture,37,0,44,55);
hiro3 = new TextureRegion(runTexture,81,0,44,55);
hiro4 = new TextureRegion(runTexture,129,0,46,55);
hiro5 = new TextureRegion(runTexture,176,0,41,55);
hiro6 = new TextureRegion(runTexture,216,0,41,55);
hiro7 = new TextureRegion(runTexture,257,0,41,55);
hiro8 = new TextureRegion(runTexture,301,0,42,55);

After doing this the result is this:

enter image description here

Upvotes: 1

Related Questions