Spritesheet with animations of differing number of frames

Newbie & Debugging Questions
#1

Hey everyone, I’m new here and have been programming casually for a couple years now but am new to game development and just wondering what the normal procedure is for animations of different frame lengths. For the sprites I’m using there are more frames for the walk animations than the attack animations. So in effect what happens when using the same spritesheet (which is 8 tiles wide by 7 tiles high) is that the walk animations work fine since there 8 frames, but the attack animation only has 5 frames and so will animate the 3 blank frames in that row of the sheet before returning to the first frame, thus giving a flashing out effect at the end of the attack sequence.

I was just wondering if it’s best to have a second spritesheet for attack so that I could keep it to 5 tiles in width, or if there is a better way to go about this such as somehow indicating that when attacking, only play to frame 5 then restart? What would standard procedure normally be?

I hope this question hasn’t been asked a million times already, I did some googling but could really only find information on how to deal with different sized sprites/images, rather than differing number of frames per animation.

Thank you very much for any advice.

#2

You probably want to create some kind of animation class which can store some information about each animations size and behaviour rather than basing everything on the fixed size of a sprite sheet.

#3

Thanks for the response. That sounds reasonable to me. I actually followed a tutorial series on youtube that was never fully finished by the poster. So for the learning experience I’ve been trying to work from where he left off. I’ll try to modify the animation class to be able to handle non-uniform animation sizes rather than just running through the entire x-axis of the spritesheet for each animation.

Thanks again.

#4

As liquidNitrogen said

yes, you need to make animation class and what is the content ?

  1. an array of your image
    using fixed size image or
    variant size (this is adding more your work to have more array on each image. so, dont do this)
  2. 1st image change to 2nd image and goes on until last image
    you can opt this image to freeze or change it to first image back
  3. timing when you want to change image
  4. get a current image

i think that’s the idea on how to make animation class

#5

If I had to guess, you aren’t clearing the array when swapping from the long animation to the short animation. So, your iteration is set to the longer animation, which would point to 3 blank cells in your case.

#6

Thanks everyone for the help. Yes there is already a working animation class but it is currently structured so that each animation essentially just runs for one entire row of tiles/cells, so yes for the animations that have shorter lengths than the number of tiles/cells in the width of the spritesheet, then it is pointing to blank cells for those as the current code structure assumes a fixed size for number of frames per animation. So the next job is to restructure this so the frames per animation can vary :slight_smile:

#7

Just an update. I realized that because there was an entity superclass for both the player and enemy classes. The animation was being called from the superclass with an animation length of number of cells per row in the spritesheet. So in the end the structure was actually already set up to be able to deal with differing numbers of cells per animation. It was just a matter of overriding the animate method being called from the superclass and giving it the proper parameter for number of cells for each animation. I feel kind of silly now that it turned out to be simple like that, but I’m learning. Thanks again to all who helped.

#8

Hmm, come to think of it that will only allow me to deal with the problem for a single type of enemy and the player. I guess I will have to restructure this afterall.

#9

Hey, Sean!

If you’re hard coding (and not using a framework), the best way is to create a class for your 2D animations. The main variables should be:

- The spritesheet itself

It can be a simple array of images. And just it. You can use one spritesheet to each animation or a game spritesheet. For individual files is actually easy to work, but not much efficient.
A huge spritesheet that will hold all of the game images is the usual approach. You just need to have a logic to point to each animation. In that case, you can have some variable like “INICIAL_FRAME”.

- The number of frames

If you’re using the big spritesheet, so you will need the number of frames. Could be the array size, for exemple.

- The animation’s speed

That’s an important one. Some times you want to change some of the animation speed, so could be useful.

- The kind of animation

I don’t know if “kind” is the right word, but I mean how the frames go. If you have, for example, 4 frames (1, 2, 3 and 4), the usual animation will play in that order:

1, 2, 3, 4 - repeat. This is “LOOP” kind

But you can have some other cool types, like “PING_PONG”, like this:

1, 2, 3, 4, 4, 3, 2, 1 - repeat

You can also use “REVERSED_LOOP”,like:

4, 3, 2, 1 - repeat

If you are creating your own class, keep this in mind. All of this will be useful in the future.

Here is an example of the LIBGDX class Animation; you can take some ideas from it;
https://libgdx.badlogicgames.com/ci/nightlies/docs/api/com/badlogic/gdx/graphics/g2d/Animation.html

Hope this could help!