Managing the game’s frame rate

Something that has become very apparent to me in this JavaScript gaming journey is that the popular browsers all have hugely varying levels of performance. To test just how fast the browsers can crunch this code I added a new hot key to the console.

Whilst in gamemode 3 (the main game) you can now tap C to view the console and then toggle “flat out” mode with D. By default the game will attempt to cap the frame rate at around 24 FPS. If you switch cap mode off you will see just how fast the browser can chew up the code. If you have Google’s Chrome browser you might be seriously impressed with the performance.

Currently I aim for the game to be played in IE6, IE7, Firefox (all), Safari, Opera and Chrome. I’ve tested on 2 machines and performance is satisfactory although I get some fairly random performance from Opera.

The management of the frame rate is quite simple.

On every game loop (or tick as many call it) I take a snapshot of the Date(). Next time round I again take a snapshot of the date and subtract the first date from it. The result is a time in milliseconds (ms). Since it’s 1000 ms to a second I can approximate a frame rate by seeing just how many times I can get around the game loop in a second by dividing the calculated time in to 1000. Something like this:

    // Frame rate management
    var n = new Date() - timestamp;
    fps = Math.round(1000 / n);
    if (n < capamount) // If the game ticks around in less than 42 ms it's flying along so we need to cap it here.
        capticker = true;
    timestamp = new Date();

The capamount is defined at progload. By setting the capticker flag I know to ensure that the timeout method is restrain next time around.

So far all browsers are above 24fps without relaxing the capping. Chrome when running flat out can get up to 200+ fps. Impressive indeed.

Post a comment or leave a trackback: Trackback URL.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: