solved jitter when manually chaining animations

[vudugun]

Hello all,
  I am chaining movement animations for a tile-based game but I am getting some annoying jitter between the steps:

https://playground.babylonjs.com/#GR24M2

The red ball is like my current code: start animation1, "wait" for onFinished() and then start animation2 (in the game, animation2
is started only if arrow key is still down)

What can I do to improve this?

Also, a weird thing I noticed: when I enable both red and blue, frequently blue jitters while red goes smooth.

[brianzinn]

I would say that follows the docs: https://doc.babylonjs.com/how_to/combine#begindirectanimation-and-parameters ("In order to have one animation follow another"). I tried with beginDirectAnimation, but saw the glitch as well - same with .asyncWait().then(() => ...).  I think with the async nature you are skipping a few frames.

scene.beginDirectAnimation(sphere, [createAnim(kf1, kf2, x1, x2)], x1, x2, false, 1, () => {
   scene.beginDirectAnimation(sphere, [createAnim(kf1, kf2, x2, x3)])
});

If you know what you are doing all ahead of time then you can also sequence all the animations together - the demo is like a movie. Are you able to do this?
https://doc.babylonjs.com/how_to/sequence

edit: it looks like you are playing position kf2 in both animations, so the "glitch" is more pronounced or is perhaps the cause.

[vudugun]

2 hours ago, brianzinn said:

If you know what you are doing all ahead of time then you can also sequence all the animations together - the demo is like a movie. Are you able to do this?
https://doc.babylonjs.com/how_to/sequence

Unfortunately, I am playing the second animation when the first one is finished AND the user is still pressing the arrow key, so it's a kind of last-minute decision.

 

2 hours ago, brianzinn said:

edit: it looks like you are playing position kf2 in both animations, so the "glitch" is more pronounced or is perhaps the cause.

As I understand it, playing kf2 twice sets the position twice within the same frame, but no further delay is expected. Of course Babylon is spending some time to start the new animation, but I am getting stable 60fps during the whole animation and it does not look like Babylon is trailing behind.

 

[JCPalmer]

I had the same thing in my animation extension until recently.  I mention this in case it might be helpful here.  I was stringing together 15 short duration morph targets synced with sound (talking).  It was acceptable when I ran in a live scene.  On the final frame of an animation, the next morph target was submitted.  That was correct, but the first frame of the next animation "reset the clock to zero", so 0 percent of the next animation was performed the first frame.

This results in 2 frames with the exact same results.  The sound kept on going, of course, so I was getting out of sync 1000/60 (16.6 millis) every animation, or a quarter second by the end.  It still looked in sync though.

When I started producing 24 fps videos, that meant I out of sync 1000/24 (41.6 millis) every frame, or .625 seconds.  Not near close enough. I have an old shoot where this is a result:

I am not familiar with waitAsync, but this "looks" exactly like duplicate frame issue.  I fixed my problem by adding on one frames worth of time into the calculation of how much to animate.  I also edited my code, putting in console.logs every frame with the value of the property to prove that was the problem. 

It sounds like a real pain to have to do edit BJS for logging.  Being sneaky, maybe you sine based, IN & OUT easing for both animations.  I never used easing (stole it though),  if eased on both sides, then it will not be moving very fast at the beginning or end of an animation, so it will look less noticeable.

[brianzinn]

49 minutes ago, vudugun said:

and it does not look like Babylon is trailing behind.

I don't think it's trailing behind either.  What I'm saying is that you need to advance the 2nd animation to give the appearance of smoothness.  Like this:

sphere.animations = [ createAnim(kf1, kf2, x2 + ((x3-x2)/engine.getFps()), x3) ];

https://playground.babylonjs.com/#GR24M2#2

[vudugun]

That's a big improvement, thank you!

Some weird things still happen when you add the blue ball, but I have only one "ball" in the game, so I am going with this