HTML5 game fps render lag

Question

I am currently creating a flappyBird-like HTML5 game using Proccessing.js

You can see current work here: http://files.tips4design.com/flappySlothRelease/

The problem is that even though the FPS is 60+ (or constant) there is an obvious shuttering in rendering.

I have read a lot of game-loop articles to solve this issue, but neither with Processing.js draw loop, browser's requestAnimFrame nor constant delta-time the problem was solved.

Now I use the variable deltaTime approach and Processing.js default draw() loop.

delta = now - lastTime;
...
position = position + velocity * delta

I have been stuck for two days with this problem, and ca not really figure out how to fix the shuttering.

Any help would be greatly appreciated!

Thank you!

Answer 1

requestAnimationFrame implementation depends on browser solely. Browser will try to reduce framing if it "believes" that it will be better for user, and usually does it "smoothly" from 60 to 30. But that shift is obviously easy to see. As well once it is some time in 30fps state, it then usually shifts back to 60. The problem here is that this shifting is very bad for player experience, and it is recommended to use persistent FPS rather than shifting.

I personally did benchmarks with canvas, and use setInterval solely, as found no actual performance advantage using requestAnimationFrame in real game examples.

This will stabilize you frame rate, but you need to handle delta time which is:
var dt = (now - last) / (1000 / 60);
Assuming your target FPS is 60. That will give you number around 1.0, more - is more laggy, and less is over-performing target fps. You will have to multiply your most time based operations by this value.

Answer 2

make sure you are not creating objects in your render-loop this can cause memory leaks as well as stuttering and slow-downs.

I checked your source for data/main.js and it looks like your not doing anything improper besides maybe var auxDate = new Date(); you could put auxDate outside the render loop because each iteration its being re-created and could cause some slowdowns.