• Runtimes
  • [WebGL] Set animation to Idle after movement

  • Изменено
Related Discussions
...

Hi! I need some help with custom buttons on web for Spine animations.

I'm trying to display animations on a web page using the Spine WebGL Runtime. I was able to configure buttons to make my animation display different cycles of movement: Idle, Damage and Death.

It turns out that when the user clicks on the Damage or Death button, the respective animation keep repeating themselves in loop. I would like to make it so that, when clicking on the button, the animation does the movement just once and then returns to the Idle state. How could I do this? Can you help me?

Its important to notice that the http://pt.esotericsoftware.com/spine-demos have some examples of this behavior I'm trying to achieve.

I'm using Spine version 3.8.72 to create my animations.

Here's an exemple: https://giancarlosilva.com.br/spine/

Here's my code for this example:

// beholder.js
var clicker_beholder = new spine.SpinePlayer("spine-clicker-beholder", {
    jsonUrl: "spine_anims/clicker_game/enemies/beholder/beholder.json",
    atlasUrl: "spine_anims/clicker_game/enemies/beholder/beholder.atlas.txt",
    showControls: false,
    alpha: true,
    backgroundColor: "#00000010",
    animations: ["idle", "damage", "death"]
});

// buttons.js
function animIdle() {
    clicker_beholder.setAnimation("idle");
}

function animDamage() {
    clicker_beholder.setAnimation("damage");
}

function animDeath() {
    clicker_beholder.setAnimation("death");
}

Hi, welcome to the Spine forum!

To queue an animation to play after the previously played animation has finished, use the animationState property. You can find a code example in this section of the documentation:
Spine Web Player: Advanced playback

Hi, Misaki! It works like a charm!!

I edited my code for the button functions following your tip:

// buttons.js
function animDamage() {
    clicker_beholder.animationState.setAnimation(0, "damage");
    clicker_beholder.animationState.addAnimation(0, "idle", true, 0);
}

function animDeath() {
    clicker_beholder.animationState.setAnimation(0, "death");
    clicker_beholder.animationState.addAnimation(0, "idle", true, 0);
}

Thank you very much! :grinteeth:

Great! Thank you for sharing your code! 😃