Thursday, May 20, 2010

Tracking the FPS of a Canvas Animation

I wanted to see how I was doing with FPS on the fish game. So here's how we get at that.

// at the top somewhere         
var diffTime=0;
var frames=0;
var startTime = new Date().getTime();
setInterval('doAnimation', 100);

function doAnimation() {
// get the timestamp
   time  = new Date().getTime();
   diffTime += (time - startTime);
   frames++;
   if (diffTime >= 1000) {
    $("#fps").text("FPS: " + frames);
    frames = 0;
    diffTime = 0;
    startTime = time;
   }
   // animation code
}




P.s. don't try this at home
while (true) {
    countTime();
   }


And the final result:
http://jamund.com/fishes.html

No comments:

Post a Comment