Jump to content

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.


Link to comment
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.

Link to comment
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).

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...