How to implement fixed time animations

[jamiri]

Hi everyone,

 

I'm going to play an animation on the web (desktop/mobile) using Pixi/Phaser. The performance varies from device to device. My problem is that I want the animation to be played in a fixed duration even if I have to skip some intermediate frames. To make it clear, suppose that I have a sound file with 2 minute duration and I want my animation to be played exactly at the same time to stay synchronized with sound. How can I achieve that on all devices (I assume skipping frames as a compensation for synchronization). Any ideas are welcome. 

[ivan.popelyshev]

requestAnimationFrame does that for you, just dont take into account number of frames, work only with timestamps. PIXI code does not depend on number of frames, there's only some stuff based on current time in pixi-spine.

[jamiri]

requestAnimationFrame does that for you, just dont take into account number of frames, work only with timestamps. PIXI code does not depend on number of frames, there's only some stuff based on current time in pixi-spine.

 

Thanks for reply. I'm using requestAnimationFrame but still problem exists.  Based on PIXI's flying dragon example I wrote a simple animation to test the concept which is accessible here:

 

https://jsfiddle.net/jamiri/c96bd0zm/1/

 

You can see from code that position update is done in updatePosition function which is run several times for a duration of 2 seconds and updating the view is done via requestAnimationFrame in doAnimation function. If I run it three times on a desktop computer, and watch fo total time

shown using alert() (line 74 in code), I see nearly perfect timing e.g. 2.003, 2.006, 1.096 which all are close enough to 2000 milliseconds, but on a not so good mobile device running three times yields 7.04, 6.578, 6.829 . I want latter to finish on time even if it skips many frames.

 

If you mean something different, then can you provide an example? 

 

I look forward to your reply.

[ivan.popelyshev]

No html (script pixi.js) in this example. Problem is in dragons.update(1/ FPS); , you have to pass exact time there.

var time = Date.now();function doAnimation() {    var newTime = Date.now() / 1000;    var delta = Math.min(newTime-time, 1.0);    time = newTime;    dragon.update(delta);}

[jamiri]

Sorry for no html. Now it is has everything and works:

 

http://jsfiddle.net/jamiri/c96bd0zm/4/

 

If I apply what you said, I loose my dragon's movements. Movements of wings become very limited and minuscule. You can try it yourself. And even with that change, still it takes 6.333 on mobile .

 

Cheers.

[ivan.popelyshev]

sorry, made a error in beginning:

var time = Date.now()/1000;

everything works.

 

also your updateTime is wrong too. If you dont want to depend on FPS why do your increments depend on number of times setTimeout was called? Its very easy technique: calculate delta every frame and pass it everywhere, including updateTime()

 

http://jsfiddle.net/z24rp0qg/

[ivan.popelyshev]

Btw, i suggest you to use https://github.com/pixijs/pixi-spine/blob/gpupatch/gpupatch/SkinnedMeshPatch.js when you'll have many animations with FFD timelines.

[bones]

Btw, i suggest you to use https://github.com/pixijs/pixi-spine/blob/gpupatch/gpupatch/SkinnedMeshPatch.js when you'll have many animations with FFD timelines.

Do you have any more info on this point? How does this compare to using many Movieclips?

[ivan.popelyshev]

Do you have any more info on this point? How does this compare to using many Movieclips?

 

All performance improvements of that patch are focused in FFD timelines and mesh rendering.

[bones]

All performance improvements of that patch are focused in FFD timelines and mesh rendering.

Sorry I misunderstood, thought the patch related to fixed fps, got it now.

[Exca]

You could also use the requestanimationframe -callbacks parameter to get the time instead of Date.now().

 

 

var start = null;function step(timestamp) {  if (!start) start = timestamp;  var progress = timestamp - start;  dragon.update(progress);  window.requestAnimationFrame(step);}window.requestAnimationFrame(step);

[ivan.popelyshev]

 

You could also use the requestanimationframe -callbacks parameter to get the time instead of Date.now().

 

 

I remember that example was working different in firefox and chrome, or something like that. May be IE.

[jamiri]

 

You could also use the requestanimationframe -callbacks parameter to get the time instead of Date.now().

 

 

var start = null;function step(timestamp) {  if (!start) start = timestamp;  var progress = timestamp - start;  dragon.update(progress);  window.requestAnimationFrame(step);}window.requestAnimationFrame(step);

 

Thank you, but not working again. Total time again totally depends on device performance.

[jamiri]

All performance improvements of that patch are focused in FFD timelines and mesh rendering.

 

Thanks, I used your solution but didn't see any difference.

 

I have found a solution which is a mixture of variable rate for updating dragons i.e. dragons.update(variableRate); and variable value for position of each dragon based on remaining distance in every requestAnimationFrame call. However it has minor problems and I will come back here as soon as I found a intact solution. Still any ideas are welcome  .

[ivan.popelyshev]

update( delta) method just adds delta to "tracks[0].time". If you have problems with that then you're doing something wrong. Show us the code one more time please.