get a smooth animation for a canvas game

Question

How to get a better animation, dinamically, even when browser is busy or idle, for different devices which have different hardware capacity.

I have tried many ways and still cannot find the right way to make the game to display a better animation.

This is what i tried:

var now;
var then = Date.now();
var delta;

window.gamedraw = function(){

   now = Date.now();
   delta = now - then;

   if(delta > 18){
        then = now - (delta % 18);
        game_update();
   }

}

window.gameloop = setInterval(window.gamedraw,1);

18 is the interval value to update the game, but when browser is busy this interval is not good, and it needs to lower. How to get a better animation dinamically, even when browser is idle or busy ?

I suppose that the interval value is the problem, because if interval is lower then game animation is very fast, if this value is 18 then game animation is good but not when browser is busy, and I do not have idea how to change it dinamically.

Answer 1

To get a smooth animation, you must :
• Synchronise on the screen.
• Compute the time elapsed within your game.
• Animate only using this game time.

Synchronizing with the screen is done by using requestAnimationFrame (rAF).
When you write :

requestAnimationFrame( myCalbBack ) ;  

You are registering myCalbBack to be called once, the next time the screen is available to draw on.
( If you know about double buffering (canvas are always double-buffered), this time is the next time the GPU will swap the draw buffer with the display buffer. )

If, on the other hand, you don't use rAF but a interval/timeout to schedule the draws, what will happen is that the draws won't get actually displayed until next display refresh. Which might happen (on a 60Hz display) any time from right now to 16.6 ms later.

Below with a 20ms interval and a 16 ms screen, you can see that the images actually displayed will be alternatively 16ms away OR 2*16ms away - never 20, for sure-. You just can't know, from the interval callback, when the actual draw will show. Since both rAF and Intervals are not 100% accurate, you can even have a 3 frames delta.

So now that you are on sync with the screen, here's a bad news : the requestAnimationFrame does not tick exactly regularly. For various reasons the elapsed time in between two frames might change of 1ms or 2, or even more. So if you are using a fixed movement each frame, you'll move by the same distance during a different time : the speed is always changing.

(expl : +10 px on each rAF,
16.6 display -->> rAF time of 14, 15, 16 or 17 ms
--> the apparent speed varies from 0.58 to 0.71 px/ms. )

Answer is to measure time... And use it !
Hopefully requestAnimationFrame provides you the current time so you don't even have to use Date.now(). Secondary benefit is that this time will be very accurate on Browsers having an accurate timer (Chrome desktop).
The code below shows how you could know the time elapsed since last frame, and compute an application time :

function animate(time) {
  // register to be called again on next frame.
  requestAnimationFrame(animate);
  // compute time elapsed since last frame.
  var dt = time-lastTime;
  if (dt<10) return;
  if (dt >100) dt=16;  // consider only 1 frame elapsed if unfocused.
  lastTime=time;
  applicationTime+=dt;
  //
  update(dt);  
  draw();
}

var lastTime = 0;
var applicationTime = 0;
requestAnimationFrame(animate);

Now last step is to always use time inside all you formulas. So instead of doing

x += xSpeed ;

you'll have to do :

x += dt * xSpeed ;

And now not only the small variations in between frames will be taken into account, but your game will run at the same apparent speed whatever the device's screen (20Hz, 50Hz, 60 Hz, ...).

I did a small demo where you can choose both the sync and if using fixed time, you'll be able to judge of the differences :

http://jsbin.com/wesaremune/1/

Answer 2

You should use requestAnimationFrame instead of setInterval.

Read this article or this one.

The latter one is in fact exactly discussing your approach (with the delta time), and then introduces the animation frame as a more reliable alternative.

The first article is really a great resource. For starters, with your interval of 18 ms you're apparently aiming for something close to 60 fps. This is in fact the default for requestAnimationFrame, so you don't need to write anything special:

function gamedraw() {
  requestAnimationFrame(gamedraw); //self-reference
  game_update(); //your update logic, propably needs to handle time intervals internally
}

gamedraw(); //this starts the animation

If you want to set the update interval explicitly, you can do so by wrapping the requestAnimationFrame inside a setInterval, like this:

var interval = 18;
function gamedraw() {
  setTimeout(function() {
    requestAnimationFrame(gamedraw);
    game_update(); //must handle time difference internally
  }, interval);
}
gamedraw();

Note that the game_update() function must keep track of when it was last called in order to e.g. move everything twice as far as normal in case a frame had to be skipped.

Actually, this means you could (and probably should) refactor your game_update() function to take the time that has actually passed as an argument instead of determining that internally. (There's no functional difference, it just is better, clearer code IMO because it doesn't hide the timing magic.)

var time;
function gamedraw() {
  requestAnimationFrame(gamedraw);
  var now = new Date().getTime(),
      dt = now - (time || now);
  time = now; //reset the timer
  game_update(dt); //update with explicit and variable time step
}
gamedraw();

(Here I dropped the explicit frames again.)

Still, I urge you to read the first article because it also deals with cross-browser issues that I haven't gotten into here.

Answer 3

You should use requestAnimationFrame. It will queue up a callback to run on the next time the browser renders a frame. To achieve constant updating, call the update function recursively.

var update = function(){

//Do stuff

requestAnimationFrame(update)

}