requestAnimationFrame

Fost

I've been having a look at requestAnimationFrame.
It's easy to do some basic tests by editing gamequery:

Search for:
setInterval(function () {
$.gameQuery.resourceManager.refresh();
},($.gameQuery.refreshRate));

and replace with:
requestAnimationFrame(function () {$.gameQuery.resourceManager.refresh();});

then add to the end of the resource manager's refresh function:

//Start the next loop render frame
requestAnimationFrame(function () {$.gameQuery.resourceManager.refresh();});

you'll also need to include the requestAnimationFrame shim:
https://gist.github.com/1579671


Supposedly DOM updates are the main performace hit in DOM based engines and using requestAnimationFrame should put them all into one repaint (if the browser is correctly doing it's thing).

This does mean that the rest of the game logic is probably best put into it's own setinterval timer - this is what I'm doing now by just running game controls in their own interval. Essentially register callback is unreliable as you have no idea how fast the requestAnimationFrame loop is running.

I can see a lot of potential perfomance inceases with this method - if all the transform methods instead store their changes and set a dirty flag on the sprite, then the refresh method is called using requestanimationFrame we could make all the DOM updates run in one repaint.

I'll see if I can add the base requestAnimationFrame changes in a way that doesn't break registerCallback(). That would be a start.