NITWIT

Proper way to animate sprites

Recommended Posts

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,

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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).

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.