Box2D FPS and World Step Tests with JavaScript

Sponsor: Register today for New Game, the conference for HTML5 game developers. Learn from Mozilla, Opera, Google, Spil, Bocoup, Mandreel, Subsonic, Gamesalad, EA, Zynga, and others at this intimate and technically rich conference. Join us for two days of content from developers building HTML5 games today. Nov 1-2, 2011 in San Francisco. Register now!

This is the third article in a series of Box2D for the JavaScript programmer articles. The previous article detailed a walkthrough of the Box2D example demo.


Continuing on our journey through Box2D for the JavaScript programmer, today we will look at the effects of frame rate and world step values and differences on performance and smoothness.

One of the challenges facing the web developer is building experiences that must gracefully handle the many different machines and performance characteristics found on the web. Users with widely varying capabilities will visit your game, from the old Pentium to the modern six core machine. Your game, and your physics simulations, should scale to both extremes with some measure of grace.

There are two variables that can control the user's experience: frames per second, or FPS, and Box2D's world step frequency. Understanding how those two variables affect the user's experience is important for a quality physics simulation experience

Demo Controls

Below you will find a Box2D demo with two simulated worlds. For each world, you can control the FPS, the World Step Frequency, and toggle an Adaptive Step Frequency.


The FPS is frames per second, or how often we are drawing our world to the canvas. We are using requestAnimationFrame, which means the browser is ultimately in charge of regulating frame rate. In most cases, this will be 60 FPS. You can control this with the FPS slider.

Note: the FPS slider also allows you to configure a Random FPS. By sliding the value all the way to Zero, the simulation will pick a frame rate between 20 and 60. It's important to understand, though, that the FPS meter below the canvas is showing you average frame rates. Even though you pick random, it will probably average out to around 30. Regardless, you will see jitters in the animation.

Step Frequency

The Step Frequency slider controls the Box2D simulation time step value in Hz. The general advice is to keep this as high as possible, with 60Hz as the recommended value. This value, if set, will remain constant throughout the simulation. Note: there is no random step rate, the lowest value is 1Hz.

Adaptive Step Frequency

If checked, the Step Frequency value is disabled and ignored, and the delta time between frames is used for the Box2D time step rate.


Below is the demo. Play with the controls and compare and contrast the performance and animation differences between the world on the left (static, set at 60Hz) and the world on the right (you should change both FPS and Step Freq).

You probably want the full side by side experience, which, alas, cannot fit in Blogger's window.

Again, the above demo doesn't really work in Blogger's narrow view, so I encourage you to check out the full side by side example for the full effect.


Running the simulation at 60/60 (fps/step rate) or 30/30 leads to same visual output. Both simulations appear to simulate the objects falling at the same rate.

Running at 20/20 or less will show inconsistencies as the step rate is too slow for Box2D. It will ultimately correct itself, but you will see objects overlapping (however the world will correct itself).

Running a simulation at 60/30 (high fps, low step rate) will make the world appear "fast". That is, the objects will fall faster than at 60/60.

Running a simulation at 30/60 will make the world appear "slow". This is a more common scenario, with your best intentions to run the simulation at 60Hz but the client machine stuck at 30 FPS for some reason. There do not appear to be any inconsistencies with the simulation.

My favorite stress test was Random/Adaptive. That is, a Random FPS and an adaptive step rate. This simulation appears to be able to handle the stress, and performs quite well. The speed matches the 60/60 best case scenario, even though you see jitters due to the sometimes laggy FPS.


To get consistent performance, you should keep your FPS and world step rate close in values. The step rate shouldn't drop far below 30Hz, though. Best results are obviously 60 FPS and 60 Hz. However, it does appear that Box2D can handle slight fluctuations with step rate.

Please play with the side by side example. What did you learn?

Up Next

The next article in the series explores how to run Box2D inside of a Web worker for better performance.

Popular posts from this blog

Lists and arrays in Dart

Converting Array to List in Scala

Null-aware operators in Dart