phaserjs / phaser-ce

Phaser CE is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.
http://phaser.io
MIT License
1.34k stars 491 forks source link

Animations are not respecting the defined FPS #606

Closed jf-m closed 5 years ago

jf-m commented 5 years ago

This behaviour may be the expected behaviour of Phaser, in this case, I would just like to know why.

The source of this problem comes from this line of code :

https://github.com/photonstorm/phaser-ce/blob/18e68a4f39ffcf1af238460674857124f19d0b97/src/animation/Animation.js#L436

Indeed it appears that any frameDiff (i.e. time lag) between two frame updates is just wiped out if this difference is not significant enough to requires a "jump" of frame. Meaning that if there is a small lag, the delay to wait for the next frame update will not take this lag into account (because set back to 0 in the code), and the overall timing of the animation will be therefore increased.

I'm not sure if I am clear enough, so here is a little diagram to explain:

This is the ideal case where no lag occurs :

image

This is the current Phaser's behaviour when encountering lags:

image

This is what I believe Phaser should do when encountering lags:

image

In the following CodePen, I've overridden the Animation.update function and removed the this._frameDiff = 0;. To try my proposed solution.

https://codepen.io/anon/pen/eQNwXe

It seems to work as the animation duration is clearly closer to the animation duration than before.

Thanks for your help.