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.
