AnimationEvent on skeletal animation

I would like to attach an AnimationEvent to a skeletal animation.
https://www.babylonjs-playground.com/#BHH4UG#2

Following this example from the documentation:
https://doc.babylonjs.com/babylon101/animations#attach-events-to-animations

From the API I understand skeleton has the property animations, but when I try to to print, it throws an error. AnimationEvent - Babylon.js Documentation

What am I doing wrong? :slight_smile:
Thanks in advance for any hint to solve the problem!

Animations in your case are not on the skeleton itself but on each individual bone:
https://www.babylonjs-playground.com/#BHH4UG#3

1 Like

Thanks for you help @Deltakosh
I hope, Iā€™m not stupid again but Iā€™m kinda expecting a console.log ā€˜Yeahā€™, which I donā€™t see. Ė†Ė† ā€¦

1 Like

No worries

What I was actually trying to say was:

I canā€™t see the console.log in your playground. So I assume that the event is not raised. Though, I think itā€™s not working yet :relaxed:

Or did I miss something? @Deltakosh

haha sorry :slight_smile:
You just need to start animations AFTER setting the events:
https://www.babylonjs-playground.com/#BHH4UG#4

3 Likes

Reading up on this thread. Also trying to attach an AnimationEvent to a frame number. For example: : At frame number 1.3, console.log(ā€œhello world.ā€).

Feel like Iā€™ve been through every conceivable combination of object and array in the console, but no luck being able to attach an event to anything. Finally found an object that would accept addEvent without erroring outā€¦ but doesnā€™t seem to do anything. How the heck do you grab a handler to an animation group? Seems like itā€™s all there in inspectorā€¦ but canā€™t figure out how to grab it.

https://www.babylonjs-playground.com/#55MFSX

Hey @bigrig, I adjusted your playground. I think it should work now:
https://www.babylonjs-playground.com/#55MFSX#1

I think, the problem was, that the animation duration was frame: 4.5 but your event was attached to frame: 10.

Not 100% sure ā€“ maybe the proā€™s know more about that ā€“ But I think glTF and glbā€™s donā€™t work with frames anymore but with actual time. Thatā€™s why framesPerSecond is 1 in your file but your animation plays fluidly.

Ohmygosh. I was so focused on finding the path to animation that i didnā€™t notice that param! Thank you thank you!

Yes, strange about FPS. Also the structure of the exported GLB seems kind of a mess. Thereā€™s a couple replicated skeletons within armatures, all those keyframes, and an extraneous camera/light. I figure its related to my convoluted pipeline (FBX->Mixamo->GLB->Blender->GLB). But Iā€™m not complaining, b/c with this frame event, everything in my game is now working! Awesome.

00%20AM

2 Likes

Hi Sir, I completely understand all the above answers. But I have a question here:
How can I attach an AnimationEvent to animation if the animation is LOOPING
I expect I can console.log message every time the animation arrives at that progress point when looping.

I expect it console.log(ā€œYeah!ā€) every at 10% progress when looping
Currently it just console.log once

Thanks in advance for any hint to solve the problem!

Thanks, Deltakosh! I keep on finding these bits of wisdom tucked away in old posts. :smile:. I was perplexed that I couldnā€™t get an event to trigger until I saw your post and placed the animation after the event-setting.

1 Like

Itā€™s been a few months since you posted (so you probably resolved this already), but I thought Iā€™d try to make Events repeat during the ā€œDudeā€™sā€ looped walk cycle. Itā€™s a pretty rough and messy attempt, so the Events go out of sync after a whileā€“but they do repeat! The basic idea behind it is to use an event (event3, in this case) at the end of each walk cycle that restarts the animation. I used two versions of the same walk cycle and the switching of a number variable to try to alleviate the events-going-out-of-sync problem, but it didnā€™t work. Anyway, hereā€™s a PG, for what itā€™s worth:

Repeated AnimationEvents during looped animation

Edit: the lights dimming and brightening (the events I used) went out of sync in exactly the same way no matter how I revised the codeā€“and they repeatedly got back in sync again for a short while, which makes me wonder if the problem is due to lag caused by the light increasing in intensity? Maybe itā€™s slower than the dimming of the light? Not sure if that makes logical senseā€¦

@carolhmj could you have a look at this one ?

Hello! Instead of attaching the events to the bones, the way I would do it is by creating a ā€œdummyā€ animation to handle events, and adding everything to an AnimationGroup. This way, I wouldnā€™t have to worry about choosing a bone to add an animation to, or anything else, and it loops nicely this way: AnimationEvent and skeleton animation | Babylon.js Playground (babylonjs.com).