Hi

I'm trying to integrate Spine into the Godot game engine.

Unfortunately, the AnimationState API provided by Spine, doesn't really fit the engine model/interface very well.

In Godot, there's an animation player that I want to take advantage of, so I'm trying to integrate the Spine animation with that player somehow using the Timeline and Animation API.

The problem is that this API doesn't work as I expected, and I'm getting weird results.

When the walk animation is first played it looks like this:
https://gfycat.com/lameeminentblackbear

However, when I play the run animation and then the walk animation again, then the animation looks like this:
https://gfycat.com/bewitchedfirsthammerheadshark

The legs are messed up and the mouth stays like the running animation.

I tried both the MixBlend_First and MixBlend_Setup enums but neither of them reset the animation.

I'm not really sure what I'm doing wrong.

The code for updating is a simple call to animation.apply on every frame that the animation is updated.

What am I doing wrong?

Ah. Thanks again Nate - that's super helpful! I was trying to work backwards from looking at AnimationState, and I couldn't figure out the process for how the animations switch out (kind of hard to parse that out with everything going on). It's a neat piece of code - clever design

One last question while we are on this Timeline topic. I'm not sure if you can answer this question but I'll give it a shot! In the AnimationState, I was looking at the applyRotateTimeline function, and I'm not sure what it's trying to do to mix the rotations in there. If I wanted to implement my own transition logic, would I need logic like the one in there? The other apply* timelines look pretty normal but what does the applyRotateTimeline do?

I think it would be beneficial if Spine made a few more "tutorials" for the runtime. The currently available ones out there are great and actually encouraged me to write my own module - you guys made it very easy to follow and also implement this stuff, only took me couple days to learn this all. However, something that I thought lacked was mini tutorials with example usage of lower level API. I think it would be cool if, for example, there was a tutorial for a simplified AnimationState, like how there's a tutorial for a simplified Rendering technique. I think it would help a lot with fine tuning integration into engines. I liked your explanation here for example! I'm mainly a developer so learning this animation stuff is pretty new to me.

Thanks

Thanks again for the explanation. Really helpful!

I've implemented a similar system to the AnimationState system. In my system for simplicity as a I built it up, I immediately apply the old animation with 0 alpha with setup and mix out right before applying my next animation. Like how you mention here:

Another potential solution is to apply the old animation one last time using MixBlend setup, MixDirection out, and alpha 0 to reset everything it keyed. This is similar to what AnimateState does, though if you don't transition from alpha 1 to 0 over time then you'll have snapping just like Skeleton setToSetupPose.

However, while the hoverboards or different facial expressions switch to the next animation, the rotations (and possibly translations) do not.

Here's literally the c++ code I'm using to apply:

// SpineData is just a container for SkeletonData and AnimationData
// SpineData::apply just calls the apply on the passed in animation with the parameters
void State::apply(const SpineData& spine_data, spine::Skeleton& skeleton) {

// This is only being tested with 1 track so _track.size() == 1.
for (int i = 0; i < _tracks.size(); i++) {
    
    // The tracks that need to be mjxed out
    RotatingTrackVector tracks = _mixing_out[i];
    for (int j = 0; j < tracks.size(); j++) {
        const Track& track = tracks.get(j);
        if (!track.animation) continue;

        // Mix out the track
        spine_data.apply(
            track.animation,
            skeleton,
            track.progress,
            true,
            0, // Immediately mix it out
            spine::MixBlend::MixBlend_Setup,
            spine::MixDirection::MixDirection_Out);
    }

    // Mix in my next track
    const Track& track = _tracks[i];
    if (track.animation) {
        spine_data.apply(
            track.animation,
            skeleton,
            track.progress,
            false,
            1, // Immediately mix it in
            spine::MixBlend::MixBlend_Setup,
            spine::MixDirection::MixDirection_In);
    }

    // Just some clean up
    _mixing_out[i].clean();
}
}

I've tried this code with multiple permutations, like with different blend modes and different orders of application, but nothing seems to work. The animation switches to the next animation but keeps the rotations and (possibly) the translations from the old ones on the non-keyed bones.

Am I doing this right?

You're right - and I have seriously considered trying to write a wrapper around AnimationState.

The problem is that AnimationState is state-ful and difficult to control when, for example, you want to set an animation at a specific frame every frame.

The way the AnimationPlayer works in Godot is that it interpolates between properties (keys), similar to spine. So I'd like to simply be able to enter in a time for the "top layer" animation instead of doing a .setAnimation() and let it be controlled by the AnimationState.

So the issue is that I want to mix in/out but also control the current animation by setting the time directly (like the Timeline API). To do this, I thought it'd be neat to set the time of the current animation directly, and then use an "update" method similar to AnimationState for mixing in and out.

If I could write a wrapper around AnimationState to do that I would but I can't really think of way to do it without editing AnimationState code or just writing a simpler custom version of AnimationState.

Edit: I thought about it more and looked through the AnimationState API, and I think I got a way to do what I need.

Thanks Nate!