Proper way to animate sprites

[NITWIT]

I'm wondering what the best way to animate a sprite is. Is there a basic example or tutorial out there somewhere?

I have ten images in a spritesheet that are part of an idling animation, and I made a texture for each of the images. I put the textures in an array, and my plan is to just change the texture of my sprite each frame in the gameloop, looping through the array of textures over and over again. Maybe using Sprite.setTexture ???

Is that a good way to go about it? Any links to info or tutorials would be much appreciated.

Thanks,

[ivan.popelyshev]

tutorial for pixi https://github.com/kittykatattack/learningPixi

example of animated sprite: http://pixijs.io/examples/#/basics/spritesheet.js

pixi animated sprite sources: https://github.com/pixijs/pixi.js/blob/dev/src/extras/AnimatedSprite.js , its `PIXI.extras.AnimatedSprite`

proposition to automatically change textures array: https://github.com/pixijs/pixi.js/pull/4433 , you can view source in "Files" tab

I suggest you make your  own animation class based on AnimatedSprite. Pixi vanilla animation is very limited, just because there are so many ways how to animate sprites, we just keep it simple. Try AnimatedSprite , then try to make your own. 

You also have to learn how pixi ticker works , there are always problems with ticking, for example you can just forget that you removeChild on sprite, but not stopped it from ticking.

SUMMARY: there's no "proper way" of animating sprites. there are many formats for animations like Spine or GAF, and simple implementations that just change the texture. Its up to you to choose one or make your own.

[NITWIT]

Thanks Ivan, I'll dig into these links tomorrow when I get a minute.

If anyone else wants to share, I'd love to hear how all you people animate your sprites.

[alex_h]

When you say 'change the texture of my sprite each frame in the gameloop' don't forget that you also need to consider what your desired frame rate is, and hence how long each frame should be displayed for in milliseconds. Eg, if your animation is meant to play at 25 frames per second, your milliseconds per frame is 1000 / 25, which makes 40.

Within the update method of your animation sprite you need to monitor how many milliseconds have passed since the last change of texture, and only once that has reached the threshold of your required frame duration (40) should you then change to the next texture and reset your time counter (subtract 40 from it, not set to zero, otherwise it will drift).

[botmaster]

I only use spritesheets for all my animations, there are tons of tools with which you can create spritesheets. I'm not sure if PIXI handles that cos I wrote my own stuff for it but it might and handling spritesheet with yur own code is not that hard anyway.