Animatable work

[Blax]

Hi, people!

 

http://www.babylonjs-playground.com/#2HQRVC#10

 

Here is Animatable, but why animationStarted property always false (i try any variants)?

 

And can't force work pause and stop methods.  Please, where i turned in wrong way?

 

 

 

[RaananW]

The animatable object for this animation is sent using the scene's beginAnimation. Creating an animation Animatable yourself would (probably) not work, unless you add it to the right places in the scene itself.

 

Take a look here - (a quick hack! please don't use this "frame var is your development ) - http://www.babylonjs-playground.com/#2HQRVC#11

 

(EDIT - thanks wingnut!)

Edited June 29, 2015 by RaananW

[Temechon]

You are always quicker than me Rannan... Here is my playground : http://www.babylonjs-playground.com/#2HQRVC#12

 

When saving it, the URL went from #10 to #12, and I KNEW #11 was you

 

Nevertheless, it seems animationStarted is never used in Animatable class, so it always returns false.

[RaananW]

 I'll wait next time! Sorry...

[Wingnut]

Hi guys.  Me too.  Raanan, I think you meant to say "Creating an animatable yourself would (probably) not work", right?

 

Here's my playground:  http://www.babylonjs-playground.com/#1JYOZX

 

Oh, this is such a mess (but I am a bit of a drama queen, so it's probably not very messy - I probably have a messy brain). 

 

First, the docs need update.  http://babylondoc.azurewebsites.net/page.php?p=22081  scene.beginAnimation allows up to 6 params... and not only are the last two params not documented or mentioned, but the whole section is limp.

Finally, you can launch your animation in one line of code, at any time in your application:scene.beginAnimation(box1, 0, 100, true);This function returns a BABYLON.Animatable object that you can use to get access to individual animations (for instance using getAnimationByTargetProperty function).The BABYLON.Animatable object also supports the following functions: pause() restart() * stop()You can also get access to current running BABYLON.Animatable objects by using scene.getAnimatableByTarget() providing the target object.And you are done! Don't hesitate to combine many animations for one mesh object... by creating more Animations and pushing them into the mesh's animation property.  We have now completed an Animation for box1.scaling.x. Maybe now you want to build an Animation for box1.scaling.y, and really get box1 moving playfully. 

The speedRatio parameter and the callback func are not mentioned (nor is the LOOP parameter explained).  sigh.  As soon as I learn why LOOP is there, I will put it in the docs and tell about it in this thread.  I need to learn how it relates/interacts with BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE.  *scratch scratch*  (I'm still studying). 

 

Now look at this sweetheart of a ts line... https://github.com/BabylonJS/Babylon.js/blob/master/src/babylon.scene.ts#L674

 public beginAnimation(target: any, from: number, to: number, loop?: boolean, speedRatio?: number, onAnimationEnd?: () => void, animatable?: Animatable): Animatable {

Holy crap, huh?

 

In my demo, I changed the animation mode to constant instead of cycle.  Constant is a terrible word here, because it tends to mean constantly animate.  But a constant animationmode means stop at the end, constantly staying at the last frame of the anim.  (I think)  "Hold" would have been a better term, but that's all 20/20 hindsight now... the API's are all frozen.

 

Now, back to this other stuff.  animatable.animationStarted never seems to get set, or maybe I have not found the class/object that sets it.  (same as what Temechon said.)  Scene and/or Animation doesn't set it, either... according to my github search for animationStarted.  Wouldn't it be nice if the TypeScript compiler could alert us about rogue (unused) properties? 

 

See my line 42?  It uses the two undocumented params, the last one being a callback func named itHasStopped.  But it never runs... not when my animatable.onAnimationEnd function exists.  Instead, animatable.onAnimationEnd runs when the animation stops.  (it's done via that ts line)

 

Now remark-out/disable lines 50-53 (remove the animatable.onAnimationEnd func) and boom, NOW my undocumented callback func itHasStopped() runs when the animation stops.

 

I decided at this point... to just get some fresh coffee and start crying.  :/  Oh my, I/we need to figure this out, and work on some docs .  Maybe this is all working as it should, but I have not deciphered the whole mystery quite yet.

 

Meantime, Blax, look at my demo, look at ALL of our demos, and play with things.  Thanks for finding this issue, and thanks for making a playground to help us study it.   My animatable.onAnimationEnd() func sets animatable.onAnimationEnd property, seeing no other code seems to be setting it.  

 

Maybe there is enough 'stuff' in our demos to help you.  Maybe not.  Sorry for the crappy docs... that's my fault.  I'm on it, with the help of anyone who wants to help me. 

[Blax]

Thx!  It's great!

 

But, why then described thus conctructor Animatable in documentation? It's trap )

[Temechon]

It is documented because this attribute is present in the source code. 

[Wingnut]

Hi gang.  A bit more about BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT.  In this mode, the animation doesn't stop... so there's NO isStopped indicators, on-stopped callbacks, or onAnimationEnd flags... that will trigger/change.  I read about this before, but I didn't quite understand it. 

 

A user in the forum had an issue that he/she could not find an isStopped() indicator, or similar. 

 

Or maybe it was because they had a sequence of animations[] and it never advanced to the NEXT animation. 

 

All in all, I believe it was because they were in CONSTANT loopmode, and now the term "constant" makes much more sense, right?  I was wrong, earlier.

 

I revisited "The Blax Maneuver"   (where a person makes their own standing-alone Animatable).   Blax, although Animatable is a perfectly good object to make yourself, and maybe force-attach/detach them to Animation objects, it is not a 'standard' thing to do.  (not many folks do that).  But I sort of like that you did.   It made me go experimenting and learning.  Good job!

 

Remember that mysterious loop? boolean in the 4th parameter/arg in scene.beginAnimation()?

Scene.prototype.beginAnimation = function (target, from, to, loop, speedRatio, onAnimationEnd, animatable)

Well that is used in the creation of the Animatable... a few lines later:

animatable = new BABYLON.Animatable(this, target, from, to, loop, speedRatio, onAnimationEnd);

Duh, Wingy. 

 

I still don't know if it is ignored if ANIMATIONLOOPMODE_CONSTANT (or RELATIVE mode).  I would assume so.  To remind, constant mode "pauses" at the last frame of the animation... and just sits there, unstopped, yet stopped.  One would assume that LOOP=1 is ignored in that case, and my tests seem to agree.

 

Can you use an Animatable without having an Animation associated with it?  Yeah, but only as a door stop.  There seems to be no way to START a Animatable without having an Animation.

 

I KNOW there is good reason for having both Animatables and Animations.  One represents the animatED object, and one represents the animatOR object.  I cannot quite see the big picture.  I don't know all the animation configurations and fun that this will allow... but I think it's got a crapload of power and versatility.  In a year or two, I'll learn HOW so, maybe.    The problem is... I need to forget some things in order to make room in my brain.

 

I would like to update the docs... but I'm scared that my "speculating" about how this all works... still might be wrong.  So, help me investigate, verify or shoot holes in my yappings, and suggest wordings and what should be included.  Here's the docs.  I want to "flesh out" the small section below "scene.beginAnimation(box1, 0, 100, true);"  At minimum, I will be telling about parameter 5 and 6.  But how to tell about "loop" (set to true above)... that's something I could use LOTS of help-with.  And HOW 'loop' works with constant and relative mode... errf.  Thanks for help and suggestions.  Animate on!

 

PS: Relative mode starts the animation again, but FROM the end of the previous animation run.  Wild, eh?  What does 'loop' do in THAT case?  Is there any isStopped funcs, flags, or callback funcs?  hmm.

[Blax]

Hi, Wingnut.

 

"The Blax Maneuver" turned himself because i'm newbee  

 

And now i need pair days for understand animatable modes on your samples   Thx!

[Wingnut]

 

Ok, I've updated the docs... http://babylondoc.azurewebsites.net/page.php?p=22081 ... under the scene.beginAnimation command.  I borrowed the parameters map from 2.1 Scene.beginAnimation. Seven, count 'em SEVEN allowed parameters!  Holy cow!

 

And, of course, Wingnut went speculating...

           Name        Type          Description          ------      ------        -------------          target      any           The target mesh variable (not it's name/ID)          from        number        The fps starting frame          to          number        The fps ending frameoptional  loop        boolean       If true, the animation will loop (dependent upon BABYLON.Animation.ANIMATIONLOOPMODE)optional  speedRatio  number        The speed ratio of this animation (default 1.0)optional  onAnimationEnd() => void  The function triggered on the end of the animation (also dependent upon ANIMATIONLOOPMODE)optional  animatable  Animatable    An optional specific animation

Gruesome, eh? 

 

No, it's not an EXACT copy of the parameters table in Scene v2.1.  I "enhanced" it a bit.  Now I need to do a ton of testing and see how much of the assuming and speculating I have done... is pure wrong.    I don't know if 'loop' and 'onAnimationEnd' are dependent upon the ANIMATIONLOOPMODE, but I have seen some indicators that say so.  I will adjust the docs/table as I learn more.

 

And look at #7.  Animatable.  An optional specific animation?  Oh boy. 

 

So, maybe, when I said that Animatable represents the animateED object, I was likely wrong.  Maybe, it represents the animated VALUE/PROPERTY of a target object.  In other words, position.x, rotation.y, scaling.z, material.diffuseTexture.uOffset and yourproperty.subValue... THESE are examples of Animatables.  Animatables don't represent the target object, they represent the target properties on the target object (maybe). 

 

Yet there is no mention of any target properties in its constructor.

 

new Animatable(scene, target, fromFrame, toFrame, loopAnimation, speedRatio, onAnimationEnd, animations)

 

The target property is set in the Animation keys.  *scratch scratch*

 

Notice that the parameters of the constructor of an Animatable... are exactly the same as scene.beginAnimation(), except the 'scene' is the first parameter.  How many constructors have you 'seen' in BJS... where the scene was the first parameter?  Hunh.  Interesting!

 

One particular area... Animations running one after another (sequentially)... that is something I am still highly-confused about.  Do we stack the mesh.animations array with Animations... first one from frames 0-100, second one from frames 100-200, third one from frames 200-300?  Seems logical.  Can we tell three 0-100 animations... to run one after another?  Questions questions questions.

 

Maybe I am still confused, but I am going testing, now.  Everyone, feel free to help me test, and help me clarify this section of the docs... for all of us.  Thanks! 

[Blax]

Hi!

 

But that is not all!!! 

http://www.babylonjs-playground.com/#2HQRVC#22

 

What's the difference between Animatable.stop()  and Animatable.pause()?

If there is no difference, why pay more?

 

Sure, how i can stop and "rewind" or "reset" animations in Animatable? Pick one-by-one, but why Animatable function in this case?

 

I'm at a deadlock    Please, help!

[Wingnut]

I'm getting lots of window.event is undefined in that demo's console.  Did you think your $jQuery-based event listeners would work the same in the playground... as they do OFFLINE?   hehe.   Welcome to playground click-event-listening HELL. 

I could play around with your playground click listener until it worked right, but I would be stealing your fun, Blax.

But here's a fun experiment.  Choose "Get .zip" for your demo, take a copy home, unzip it, look at the source of index.html.  No jQuery included up in the <script> tags, eh?  But two physics engines are included, so you won't be short on those. hehe.

Soooooo... maybe the playground doesn't recognize jQuery things that start with $.

Or maybe it does.  Or... hmm.  Either way, Captain Blax needs to get his demo's click event handlers... tweaked and working better.  THEN we'll deal with "The Animation that Refused to Stop!" movie/issue. 

At the bottom of http://playground.babylonjs.com/?18 ... you will see some addEventListener junk that will help you... and be sure to use the scene.onDispose() too... to remove the listeners on the way out the door.  It's important.  You will have to figure out your own ALT and CONTROL things inside your brand new onPointerDown func.  You know.... if control is being held... do this.  If alt is pressed, do that.  If no "bucky" is being held, do something else. 

Ignore (don't use) any getGroundPosition and "button" code... that is stuff used ONLY for THAT demo.  Yours won't need it.  Cya soon! 

Update:  I tried The Jerome Maneuver...  http://playground.babylonjs.com/#2HQRVC#23  -  first 5 lines sucks jQuery into the playground.  Check the console.  "Duplicate definition of module 'jquery'"  Aha!  So, jQuery IS in scope of the playground... BUT... "window.event" is different in the playground than it is offline, eh?  It's almost like you need to use canvas.event, or document.event, eh?    (Don't use The Jerome Maneuver code to suck-in jQuery - it's not needed.  It's already on-board.)

[GameMonetize]

Hello, Pause will...pause animations so you can start it again from where it was

Stop will...stop animations, remove it from active animation and raise onAnimationEnd. A stopped animatable won't be able to restart

 

On a different topic, an animatable is a group of animations, I may have named it storyboard perhaps. Its goal is to control multiple animations at once

[Wingnut]

Thanks dk.

 

Whelp, I was really really really wrong... going the wrong way.  *scratch scratch*  Animatables are like... conductors of the orchestra.  1-2-3 1-2-3 horns ... and then woodwinds... and then a flute solo, and big horns and 1-2-3, etc.  AnimationsManager.    Should have deltaTimer and scheduler on-board... hang ActionManager actions on the timeline, too... errr... no.  hmm.  Maybe.  ActionManager executeCodeActions can sure be told to start and stop animations.  hmm.  Fun!

 

Maybe we need the super dooper babylon elapsed time clock, scheduler, and event manager... on a stick?!   sigh.  But anims run on frame counts and time scheduling runs on ticks, and the two values are linked as solid as Jello.  We just never know how long it will take to finish 100 frames of animation.  Nor do we ever know how many frames are needed for an animation to last 10 seconds.  sigh.

 

All in all, I need diagrams.    Thanks for the info, dk.  Feel free to talk more, of course. 

[GameMonetize]

Actually when you ask for let's say 100frames, the animation will then run during 100x(1/60)s.

You can see here that animations are synchronized with time and not with rendering speed:

https://github.com/BabylonJS/Babylon.js/blob/master/src/Animations/babylon.animation.ts#L259

[Blax]

I'm getting lots of window.event is undefined in that demo's console.  Did you think your $jQuery-based event listeners would work the same in the playground... as they do OFFLINE?   hehe.   Welcome to playground click-event-listening HELL. 

[nam-nam]

 

Hello.

 

Sorry for that

But, it just work in my browser (Iron) and i think: jQ is on-line always in playground. Why it work i unknown...(without "Jerome Maneuver").

And core of question is another: difference between pause() and stop(). In playground just illustration

And thank for events in pg demo. Live and learn

 

Thanks, Deltakosh for answer!

I think - if animatable is "movie controller", then must have some 'reset function'. 

Now i must reset all animations in animatable on-by-one

 

upd: And can't get animations array for my animatable

upd2: Nop, i can't stop or run animation witout animatable.

 

Perhaps exist tutorials or samples, where can see any animation control? Reset, run, pause and etc? Please help!!!

[Wingnut]

Hi Blax

   Yes, I was mistaken... jQ is in the playground.  But you still have window.event is undefined errors in the console of that playground.  I think WINDOW is the problem.  When using playground, window has a different scope or something.

 

http://www.babylonjs-playground.com/#2HQRVC#24

 

I installed a non-jQuery click system that Deltakosh taught me.  Now control-click pauses, alt-click restarts a paused anim, and standard click... stops it.  As Deltakosh says, a stopped animation is not easily reset/restarted.

 

I do not have a solution for your 'how to reset?' question, sorry.  As you know, I am studying animations myself, at this time.  Animations are VERY lightweight objects, so it probably takes more CPU power to reset an animation... than to .dispose() it and re-create it. 

 

I once tried changing the keys and restarting... it didn't work.  I think the interpolation happens at CREATE time, and there is no onKeysChanged or marking the keys as dirty... in the BJS animation system, AS FAR AS I KNOW.

 

I'll keep studying.  You, too.  Maybe others will have comments.  Be well!

[GameMonetize]

So waht's missing now? Wingy's PG shows a PAUSE/PLAY working sample. Stop is definitive. You cannot restart a stopped animation (pause is here for that)

 

For resetting an animation, the best idea would be to recreate it

[Wingnut]

Thanks DK.  Umm...  Blax, if you were able to use 'cycle' anim mode on ALL your anims...

 

and...

 

...had a way to auto-pause them at first or last frame... after ONE run-cycle...

 

    ...would that help your issue?

 

I don't know if that can be done, but I think so... with a function you could write.

 

Even auto-pause after 5/10/100 run-cycles... is quite possible... with a custom animation monitoring func (maybe).

[GameMonetize]

Goood news: I added a reset() function on animatables

[Wingnut]

thanks dk!  I added it to the tutorial... like this.

 

The BABYLON.Animatable object also supports the following functions: - pause() - restart() - stop() - reset()

 

These commands will apply to every animation object contained in the Animatable's ._animations array.

 

I hope that last sentence is correct.   http://urbanproductions.com/wingy/babylon/misc/wingsBJSanimDoc.html will be completely updated soon, too, in case anyone is using that monster.  Fast service, and a job well done, DK... thanks. 

 

Blax... you're now a framework contributor... well done.    Also, I had success with The Blax Maneuver, too!  Please visit The Wingnut Chronicles to see/hear more.

[GameMonetize]

That's perfectly correct

[Blax]

Hi.

 

Delatakosh, thanks! Its great new!

Cool support and growth of BJS project!

 

Wingnut, thanks for help too!

 

I run to try reset() in my viewer ))