Hello, I have a problem that there is no documentation and explanations anywhere on how to work with the spine-js engine.

I just wanted to play on click all the animations (l2d) prescribed for the character. But since there is no information (or I didn’t search well), I ran into some problems with smooth switching of the animations themselves (the skeleton).

According to the official documentation, in some places the commands and methods were similar.

I realized that you can switch animation tracks of the skeleton, but this does not solve the problem.

So, I have an initial animation (the appearance of the character on the screen), a constant movement animation (idle), and 4-6 animations of the character's dialogue that work on a click on the screen.

However, I do not understand how I can make a smooth transition between them.

For example, I put a permanent animation on track 0, and a dialog animation on track 1, but! The animation at this moment starts abruptly, however, at the moment of transition from one state to another, parts of the skeleton break, preventing the next animation from playing.

Help, please, to understand.

Play your enter animation, then idle on track 0. It sounds like you want your dialog animation to replace idle, so also use track 0, not track 1. You would only use multiple tracks if you want both animations to be applied at the same time, one on top of the other.

To mix in your dialog animation on track 1, you first should set an empty animation, then play your dialog animation with a mix duration that is the time you want it to take from the empty animation to the dialog animation.

To mix out your dialog animation on track 1, set an empty animation with the mix duration set to the time to mix out.

However, if you don't need track 1 you can just replace idle with dialog, setting the mix duration. Use AnimationState addAnimation to set the idle after dialog.

For example:

state.setAnimation(0, "enter", false);
state.setAnimation(0, "idle", true).mixDuration = 0.25; // Time from enter to idle.

// Later:
state.setAnimation(0, "dialog", false).mixDuration = 0.25; // Time from idle to dialog.
state.addAnimation(0, "idle", false).mixDuration = 0.25; // Time from dialog to idle.

Or if you do need track 1:

state.setAnimation(0, "enter", false);
state.setAnimation(0, "idle", true).mixDuration = 0.25; // Time from enter to idle.

// Later:
state.setEmptyAnimation(1, 0);
state.addAnimation(1, "dialog", false).mixDuration = 0.25; // Time from empty to dialog.
state.addEmptyAnimation(1, 0.25, 0); // 0.25 is time from dialog to empty. 0 is delay (end of dialog).

See TrackEntry for everything you can do with the track entry returned from add/setAnimation.

See TrackEntry mixDuration for some description. It is time in seconds. Also see AnimationState setEmptyAnimation.

Also see our latest video, released just yesterday:
https://youtu.be/DxDZtTK2nlE?t=204
We cover set/addAnimation and TrackEntry there. See timestamp ₁₂:00 for more about empty animations.

It sounds like you do need track 1. You say it doesn't work at all? What happens?

Ahh, that makes sense. I should have explained, sorry. I'll do so now!

When you pass a delay of 0, your animation will start at the end of the previous animation minus the mix duration. That is done by setting TrackEntry delay to animation.duration - mixDuration. But at that time it only knows about the mix duration that comes from the AnimationStateData. If you don't use that then the mixDuration is 0 and you get a delay of animation.duration - 0. If you set a mix duration after add/setAnimation returns, the TrackEntry delay is not changed. You can set the delay yourself, eg:

TrackEntry enter = state.setAnimation(0, "enter", false);
TrackEntry idle = state.setAnimation(0, "idle", true);
idle.mixDuration = 0.25; // Time from enter to idle.
idle.delay = enter.animation.duration - idle.mixDuration; // Time to start mixing in idle.