Jump to content

Proper approach to animate sprite


Recommended Posts

I use PixiJS but i don't think that context matters considering my question.

Suppose we have a sprite of a face and we going to make it's eyes blinkning. According to this topic it's up to me how to implement one: 

>there's no "proper way" of animating sprites

So i decided to use sprite mask and create a function which moves mask. Velocity of closing/opening eyes depends on game loop's update frequency (60 in PixiJS by default) and delta coords which i can easily configure in the function. When i used this approach it eventually looked pretty nice and mask moved smooth, but will i encounter any fails latter which is not obvious now? 

 

Also another important question (which disturbs me a lot more): 

What if i decided make the face to blink occasionally? How should i do that?

I know only one way in JS for such periodic tasks: `setInterval` and `setTimeout`. In fact in callback functions i only manipulate variables which mask moving based on (and indeed the moving happens in game loop), but anyway. It looked strange for me, it brought many additional state variable to source code and made code confusing a bit, but in place when i used this it works. And looked well. How can i replace this with more sophisticated approach? Or this is OK (i got doubt)?

Link to post
Share on other sites

> Will i encounter any fails latter which is not obvious now?

You probably will have to learn curves. All the easing stuff.

What if i decided make the face to blink occasionally? How should i do that?

Animation state machine. Between states there are series of tweens.

Usually people already know it all from unity, unreal or much easier game engines ;)

Maybe try to use something like GSAP for pixi  , to cover tweens, as for animation states.. well.. i dont even know where to start, its a coding thing.

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

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

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...