AnLim

Здравствуйте, у меня проблема, что нигде нет документации и пояснений как работать с движком spine-js.
Я хотел просто воспроизвести по клику все анимации (l2d) прописанные для персонажа. Но так как никакой информации нет (или я плохо искал) то столкнулся с некоторыми проблемами по плавному переключению самих анимаций (скелета).
По официальной документации в некоторых местах команды и методы оказали похожи.
Я понял что можно переключать дорожки анимаций скелета, но проблему это не решает.
Итак, у меня есть начальная анимация (появление персонажа на экране), постоянная анимация движения (простоя), и 4-6 анимаций диалога персонажа работающих по клику на экран.
Однако я не понимаю как мне сделать плавный переход между ними.
Например, я ставлю на дорожку 0 постоянную анимацию, а на дорожку 1 анимацию диалога, но! Анимация в этот момент резко начинается, однако в момент перехода из одного состояния в другое, ломаются части скелета мешая воспроизведению следующей анимации.
Помогите, пожалуйста, разобраться.
AnLim
  • Beiträge: 7

Nate

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.
Benutzeravatar
Nate

Nate
  • Beiträge: 12129

AnLim

Thank you so much for your response!
I apologize for the duplication of posts.
I will try to explain my situation in detail.
The second part of the answer is correct, you got the point right.
So, the thing is that the idle has some skeleton animation, which is used in the animation of the dialogue. Without this, the model will be static, and only the face will move…
So I need to overlay the animation in such a way that track 0 has idle and track 1 has dialog. So that idle works in loop mode, and I can switch the dialog animations on track 1.
And yes. The animation is originally made to support this mode, and was already implemented in a game on unity, but there were problems with it on the spine-js.
I'm not very good at Spine, if you don't mind, can you describe it in more detail?
Likewise, I did as you described before, animating the dialog, but nothing changes.
I tried your example, but in the end, track 1 does not work at all. There are no difficulties with animation 0, and it works as before.

Regarding the mix parameter…
I don't really understand what to start with and how to figure out what value is required for mix.
I just need to make the transition smoother, not immediately change the skeleton instantly.
AnLim
  • Beiträge: 7

Nate

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 ~12:00 for more about empty animations.

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

Nate
  • Beiträge: 12129

AnLim

Hello. Reread your post more carefully and watched the video.
Finally, found a way to solve the problem. It was about the mix parameter. It didn't work because the animation was added without delay.
After rewriting some code, I got it working.
Thank you so much for your help! Health and happiness to you!)
AnLim
  • Beiträge: 7

Nate

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.
Benutzeravatar
Nate

Nate
  • Beiträge: 12129


Zurück zu Русскоязычные пользователи Spine