NITWIT Posted November 14, 2017 Share Posted November 14, 2017 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, Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted November 14, 2017 Share Posted November 14, 2017 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. jay3sh and MrBurda 1 1 Quote Link to comment Share on other sites More sharing options...
NITWIT Posted November 14, 2017 Author Share Posted November 14, 2017 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. Quote Link to comment Share on other sites More sharing options...
alex_h Posted November 15, 2017 Share Posted November 15, 2017 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). Quote Link to comment Share on other sites More sharing options...
botmaster Posted November 16, 2017 Share Posted November 16, 2017 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.