Tweened Animations

So, animations!

I've been putting together my little animations using Spriter. It's a really amazing little animation tool, and despite a few rough edges (try exporting images on a mac sometime...), it really does a great job at animating all the things.

The really interesting thing for me in this was tweening between animations.

Typically sprite animations are done using a series of states; jump, run, idle, walk, etc. and you just switch straight between them as required.

This has the benefit of making the animations responsive, in that the animation sequence can start immediately as you pick the new state; however, it can be a little 'jerky' visually as you jump from one state to another.

I was experimenting with a smoother tween transition between every animation state; where each animation had an enter and exit animation to complete before it started the next sequence, defined like:

    "walk": {
      "enter": null,   <-- Jump straight into and out of walk
      "exit": null,
      "active": {
        "name": "anim_walk",
        "duration": 800,
        "repeat": true,
        "forwards": true
      }
    },
    "jump": {
      "enter": {   <-- Have a lead in animation for jump / fall
        "name": "anim_jump",
        "duration": 300,
        "repeat": false,
        "forwards": true
       },
       "exit": { ... },
       "active": { ... }
    },

This seemed like a pretty reasonable combination of the two to me, and it makes a pretty good demo to play with too:

It works out pretty well in practice, but if you swap between one of the long running states (eg. walk) and something like jump you can see a 'lag' of one complete animation cycle between chaning state and it arriving at the said animation state.

I didn't really anticipate that; it's a little annoying.

It's also fair to say that you probably want to optimize this transition set in some cases; for example, perhaps walk -> junk and walk -> die need different transition animations out of the 'walk' state.

I'm also not entirely happy with the frame skipping; frame transitions are done using absolute elapsed time in this example, which on some devices results in sudden complete transitions.

Still, this is definitely one of those things where you'll always do it wrong the first time. Onwards!

Next time maybe we'll see if we can import the animation data directly from spriter without rendering to a sprite sheet first...