For example, I'm looking to animate at 60 frames per second, but clearly my artist isn't going to hand-author 60 frames of art for every second of an animation clip and even if he could, it would only work properly in locked-timestep.

So given two successive frames in a sprite-based animation, I want to smoothly "interpolate" or "morph" between them at runtime to produce a smoother, and higher frame rate animation based on where the update time for the current frame lies between the two frames.

Another way to look at it would be to say that my animation is authored such that the frames occur at regular intervals, much less frequent then 60 FPS. Say I'm 30% between when frame N should appear and when frame N+1 should appear. I want to render an image that looks like it's a 30% the way through a smooth transition from the frame N image and the frame N+1 image.

This paper seems promising, but am interested in other potential solutions I could look at for implementing this. Please do not recommend a tool as a solution.

  • \$\begingroup\$ Are you talking about "tweening"? \$\endgroup\$
    – ashes999
    Commented Jan 28, 2016 at 3:44
  • \$\begingroup\$ @ashes999 I will elaborate so that you can tell me. \$\endgroup\$
    – user78331
    Commented Jan 28, 2016 at 3:52
  • 2
    \$\begingroup\$ We don't document "industry standards" here, but asking how to implement this kind of morphing is on-topic. I assume you're talking about purely sprite-based animation, not 2D skeletal animations? Are you willing to make any concessions for the input data (e.g., does the approach have to work with just sprites, or can you mark up the sprite data in some additional fashion)? \$\endgroup\$
    – user1430
    Commented Jan 28, 2016 at 5:00
  • \$\begingroup\$ @JoshPetrie Currently I'm looking at pure sprite-based animation; the particular animation design isn't well suited to planar skeletal transforms. I'm willing to add whatever data is needed, as long as it can be done by the artist. \$\endgroup\$
    – user78331
    Commented Jan 28, 2016 at 5:16
  • \$\begingroup\$ Quite frankly, I think that a pure sprite based implementation is going to be a lot harder to write (one that looks good and is usable), than it would be to just fill in some animation frames yourself -- or finding an artist who can do it for you. Another option would be to split your sprite into separate entities (kinda like a bone system), and do the tweening like a sane person. \$\endgroup\$
    – jgallant
    Commented Jan 28, 2016 at 11:09

2 Answers 2


You can bake the "motion vectors" of the sprite-based animation and use this information to morph between frames of the sheet.

Take a look at this: http://www.klemenlozar.com/frame-blending-with-motion-vectors/


Your best bet in this scenario would be to use some sort of interpolate/blend shader since your animation is purely sprite based. It would take the pixels from the current animation frame of the sprite and then blend/interpolate it with the ones from the new frame. This probably wont look as good as an animation that was created purely from sprite sheets with the intermittent frames. But it would probably give you a similar effect as those in the linked document.

But the major concern here would be performance. I'm not a shader expert, so can't really say how practical this is when it comes to games. You might just be able to do a limited number of animations this way.


You must log in to answer this question.