I’m using Spine 3.8.72. I set a custom event at the end of a Spine animation, but I don’t know how to listen for it. I set a keyframe in Spine in the middle of a loop to test below, and used a standard listener.
Doesn’t Work:
spine_Animation01.on(‘middle-of-the-loop’, (spine) => {
console.log(‘Middle of the Loop’)
})
Works:
spine_Animation01.on(‘complete’, (spine) => {
console.log(‘Loop Completed’)
})
I tried binding an event listener specifically to this, but no luck yet in capturing it. Is this maybe an implementation issue of the plugin?
this.yourSpineObject.state.addListener({
event: function (entry, event) {
// handle event
}
}, this);What is meant by state? And where do you put the specific event to listen for?
Uncaught TypeError: Cannot read property 'state' of undefined
State is AnimationState, a property of your Spine gameobject. Console out the entry and event and you’ll see the track entry and the event data (which includes the event name).
What is weird is that I don’t see any event in console.log of it, but it shows up in the JSON of the Spine. I have seen it show up, but I don’t remember how I saw it. I was unable to hook it though.
I only see these events, which all work:
I tried this and a few other things. Can’t get anything without an error.
this.spine_Animation01.event(0, "middle-of-the-loop").addListener({
event: function (entry, event) {
console.log('omfg it worked')
}
}, this);
Uncaught TypeError: Cannot read property ‘event’ of undefinedUncaught TypeError: Cannot read property ‘event’ of undefined
Edit: I got it to show up with what I did before:
spine_Animation01.on(‘middle-of-the-loop’, (spine) => {
console.log(‘Middle of the Loop’)
})
No luck with anything still.
Edit: This doesn’t work either.
spine_Animation01.stateData.skeletonData.events[0].name.addListener({
event: function (entry, event) {
// handle event
}
})I asked on the Spine forums, but no traffic there. I’ve not got an answer to this, nor have I seen anyone who has even talked about doing this. I have a few workarounds, not the end of the world, but I’m going crazy a bit trying to figure it out.
@rich Is this even possible to do in Phaser with Spine 3.8.72?
Thank you very much. I’m not getting your pen to work in my config, so it must be something not related blocking. Testing now. Will mark as the solution and update my findings when I figure out my issue blocking it. So weird.
I also learned how to setPath for the Phaser examples with your pen. Good trick.
@prob The Alien example is made with 3.8.14Beta and the JSON looks completely different. I thought this might be the problem, but it is not. Sigh.
I am using setSkin() and setAnimation() to play the spine animations, not simply .play. Even if I play with your way, the event is not picked up.
I am confused at how you loaded the spine like var b = this.add.spine(400, 500, 'set1.alien') when I load it like the docs say like:
let jelly = this.add.spine(512, 550, 'jelly', 'jelly-think', true)
Maybe this makes a difference? If I try to use the name of the skeleton like the former way, I get an error.
Edit: I did get the alien to work, but not my own or the Spine provided examples.
Edit 2: b.setAnimation(0,'death', true) works fine in your example. I’m thinking it has to be related to the version of Spine exporting.
Edit 3: Nope. Sigh. I exported the file locally and got it to work with 3.8.72 just fine with the new JSON structure and importing it my way. I also confirmed the file is similar to mine. There’s no reason my file shouldn’t work. This is beyond a mystery.
Omfg, got it to work! I think this might actually be a Spine bug, but there were some warnings on export that might be the cause. I added another keyframe of the event to the second animation in my file and selected pretty print and it worked. I deselected pretty print for a minified version and it still worked.
@prob, thank you again for your help!