Animations Problem

[royibernthal]

I have a scene with 5 models with animations.

Each model is supposed to act like that:

idle animation in loops by default

whenever an action is called, it is played, and when its animation is completed, the model goes back to idle animation in loops

 

The scene starts with 5 models in the idle animation loop.

Click the "Test" button to trigger an action animation.

 

1) Is there a way to remove onComplete callback from an Animation once it is created? It seems it is also triggered by animation.stop(), and I'd like to avoid that. I tried to null animation.onAnimationEnd but it resulted in very weird behavior.

2) Each time I try to play an action animation in all models by hitting the "Test" button, animations are played on a seemingly random (probably not really random) number of models, and the rest simply stop (probably following the stop() call).

If you try to hit the "Test" button a couple of times during an action animation you'll notice an even weirder behavior. Why is this happening?

If I use a setTimeout to delay playing a new animation after stopping the previously played one, it seems to create some order in the chaos, but I'd like to understand better what's going on, since even this is a very imperfect solution that has its own problems, or possibly other problems that'd appear regardless of this one.

 

 

Here's the PG:

http://www.babylonjs-playground.com/#1SVN3I#46

[RaananW]

Hi Royi,

1) I assume you mean the onAnimationEnd ? you could simply set to to be undefined and it will not be called (https://github.com/BabylonJS/Babylon.js/blob/master/src/Animations/babylon.animatable.ts#L119) . Unless I misunderstood, and then - forget it

2) About your scene - I think this has something to do with the way the skeletons are stored and initialized. But it needs to be further debugged. I try finding time later this evening.

[royibernthal]

Hi Raanan,

1) Yeah that's what I meant, I tried it and for some reason I encountered many weird behaviors afterwards (no errors thrown).

I'll try it again as soon as I can to see if I can pinpoint the problem.

2) Can't wait  I really need fresh (and more experienced) eyes to take a look it.

[RaananW]

Sorry, been busy ☺ 

But this evening looks promising

[RaananW]

Man, asynchronity is a b*tch

So, here is a working demo for you - http://www.babylonjs-playground.com/#1SVN3I#48

You had a few problems with the "this" settings. for example the this.loop was used incorrectly The onAnimationEnd (your "onCallback" function) was called, and stopped the triggered animation, right after it started.

If you "beginAnimation" on a single skeleton, you stop the animation that is currently running. You can see in lines 146-150 how you could have implemented it rather easily, but I do understand the need to work with objects. You just need to restructure your code, and use less object variables and more standalone variables (like the loop or callback) to avoid reuse of functionalities that will prevent the other animations from working.

I am also not sure why you were disabling and enabling your skeletons, but I am pretty sure you need that for your actually demo.

I read what I just wrote and it can sound a bit cryptic. If I am not too clear, please let me know!

[royibernthal]

On 12/16/2016 at 5:51 PM, RaananW said:

If you "beginAnimation" on a single skeleton, you stop the animation that is currently running.

Good to know, I wasn't aware of that.

I'm enabling skeletons only during animations and disabling them right afterwards to improve performance (avoiding bones calculation when not needed), following Deltakosh's advice.

I need MeshGroup.onComplete to disable the skeleton when the animation is finished. In this case there's always an animation playing so it doesn't matter very much, but I need this to work in other cases.

 

I managed to keep the same structure by fat arrowing all the functions leading to the onComplete. I nulled the onAnimationEnd before playing a new animation so that the callback is no longer called when the previous animation is stopped.

http://www.babylonjs-playground.com/#1SVN3I#52

 

Is this objects based structure not a good practice in your opinion? Is it problematic other than having to pay close attention to the "this" context?

 

Anyway, thanks for the help  I wouldn't have managed without it.

[adam]

You should generally try to get a working example going before doing any optimizations that might not even be worth the trouble.

[RaananW]

Setting a callback to call this.onCallback() and then changing this.onCallback is the main reason why async is a wonderful and horrible thing.

I am not sure why you set the architecture like that, but when you set this as the callback:

() => this.onCallback()

You are creating an anonymous function that will call this.onCallback. If you changed it afterwards, it will run the newer one.

I would personally not use such an object to control callbacks. I don't quite see the reason for over complicating things in that case. But again, it really depends on your entire game architecture, which I don't really see. As long as you understand your code and the code scales, it's more than fine. Everyone has opinions regarding software architecture. Hard to please'em all  

Regarding your question (why it is executed when beginAnimation was executed) - this is because the last animation stopped (the idle animation) right before starting the "happy" animation.

And about skeletons - I just didn't understand why you call false, and right after (the same function scope, if I remember correctly), you set it to true. Just didn't make any sense to me. But again - we don't see the real picture.

 

[royibernthal]

I get the feeling you didn't notice (or partly noticed?) my edit before sending your reply (I edited almost everything). I should've probably just sent a new reply instead

Regarding creating an anonymous function - yes I'm aware of that, actually in my project I'm defining the function with a fat arrow to begin with instead of constantly creating new anonymous functions, it doesn't seem to work in the PG for some reason:

Mesh.prototype.onComplete = () => { }

Yeah I guess you're right about software architecture