Managing animation state transitions

[nevon]

It's always nice to be able to have your characters actually move, rather than just float around. But one thing has been bugging me for a while now; how should you manage animation state transitions?

To explain what I mean, here's an utterly glamorous illustration:



At the top you can see the normal running animation. At the bottom you can see what happens if the player jumps in the middle of the running animation. It doesn't look terrible in this example, but sometimes jumping from one frame to another, completely unrelated one, can look very odd. So my question is, what would be the best way to handle these kinds of transitions? Ideally I would want to be able to insert one or a few transition frames between (in this case) the running animation and the jumping animation. Or have the running animation continue until it reaches a keyframe where the transition would be made.

Another issue would be how to avoid sluggish and annoying controls. I don't want to sit around waiting for my character to jump, half a second after I pressed the button, but I don't want it to jump from being in the middle of crawling on the ground to doing a somersault.

And for the lulz, here's a demo of what the animations currently look like: http://dl.dropbox.com/u/176093/walkanimation.love

[Robin]

Well, I wouldn't know, but I think just having a single transition frame (not necessarily a standing one) would be enough. To make it look just a bit better, you could have one for every combination of states (obviously only works if you don't have that many animation states). This avoids sluggishness and (hopefully) subtle but noticeable for the player.

[nevon]

To make it look just a bit better, you could have one for every combination of states (obviously only works if you don't have that many animation states).

Well, yeah, that would be ideal. But I don't really like the idea of having to create 8*#states^2 new frames (one transition frame for each combination of possible frames for each state). Making one for each combination of states would at least be kind of manageable.

[kikito]

Isn't it possible to generate the transitions programatically, or even on-the-fly?

[nevon]

Isn't it possible to generate the transitions programatically, or even on-the-fly?

Sure, motion tweening is possible to achieve programatically. Whether it'll look good or not, I don't know, but it would sure beat having to draw all those transition frames yourself. Problem is, I have no clue how to do it.

[Robin]

Isn't it possible to generate the transitions programatically, or even on-the-fly?

I think that's only a viable option if the frames are vectors anyway. (Well, not sure, but my guess is that LÖVE/Lua are not really fit for the job of motion tweening.)

[kikito]

I've given this a little more thought.

I'd say that it is not possible to preemtively "remove" frames of animation. On your example, when you are on frame 5 and the user presses "up", you can't "go back in time" and remove frame 4 from the animation - since you have already shown it.

What you can do is add some more frames so the animation is more appealing. For example, I'd insert frame 3 again after frame 4 before starting the jumping sequence. This is what the original Prince Of Persia game did, and it looked fantastic. It added some difficulty to the controls. (here's the original game's animation reference video protagonized by Jordan Mechner's brother for the lulz)

Coding transitions between animations manually doesn't look so taxing to me. You don't really need transitions between all animations and all states; you can assume that most of the time transition-less animations will look just fine, and add transitions only in those frames that need it.

Consider your example. Let's name your running sprites 1,2,3 .. 8 and your jumping sprites 9,10,11. Running sprites in which the character's "right leg" is behind the left leg and not very far from it will transition ok to jumping. So sprites 1, 2, 3, and 7 don't need a transition. Frames 4,5,6 and 8 will need some sort of transition.

With this in mind, you could code your animations like this:

Code: Select all

animations = {
  running = {
    frames = {1,2,3,4,5,6,7,8},
    transitions = {
      4 = { jumping = { 3 } },
      5 = { jumping = { 6, 7 } },
      6 = { jumping = { 7 } },
      8 = { jumping = { 1, 2 } }
    }
  },
  jumping = {
    frames = {9,10,11}
  }
}

So before transitioning from animation "running" to "jumping", I've to check: a) that the "running" animation has a "transitions" table. b) That the frame I'm in is on the "transitions" table and c) That the frame I'm in has a transition to the "new animation" (jumping, on this case). If the 3 conditions are true, I execute the transition animation. Otherwise, go to the first frame of the new animation directly.

I've left out character displacement and frame duration for the sake of simplicity, but I hope you get my point ok.

[nevon]

With this in mind, you could code your animations like this:

That doesn't seem impossible to do. Once I have some time, I'll try it out and see if it works in practice.

[spinach]

if the running jump is different from the standing jump (the jump in the illustration looks specific to running), you should be okay, since the forward momentum carried through the action would be frictive enough to suspend disbelief.

if you don't want to use the code sample above, at least.

by the way, if that illustration is your doing, generated tweens are the last thing you'd want, that sequence is great.

[nevon]

if the running jump is different from the standing jump (the jump in the illustration looks specific to running), you should be okay, since the forward momentum carried through the action would be frictive enough to suspend disbelief.

That jump is not specific to the running jump, although in a real game I would probably make a separate jumping animation for that. Either way, it doesn't really look bad in these cases, because they are all fairly similar. What I was more worried about was if there were more intricate animations, like if the character took an object from his pocket, put it on his head and then put it back in the pocket. If it went from having an anvil on its head to jumping in one frame, that would look odd.

by the way, if that illustration is your doing, generated tweens are the last thing you'd want, that sequence is great.

Yes and no. I did draw the animations, but I based the motions of off some tutorial-type-thing for cartoon animators.