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");
}
