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.
