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.

Intro

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.

FPS

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.

Demo

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.

Analysis

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.

Summary

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

(This is Part 3 in a series about Dart. Check out Part 2, Function in Dart .) Warning : We expect the Dart libraries to undergo potentially sweeping changes before Dart goes to alpha. This document is relevant as of 2011-12-22. Intro Dart is a "batteries included" effort to help app developers build modern web apps. An important "battery" is the bundled core Dart libraries, providing common and rich functionality. Dart is building a solution for large, complex web apps, and providing well tested, integrated, and common libraries is key to helping a web app developer be more productive out of the box. The Collection libraries are a crucial set of APIs that Dart developers get for free. Much more than simple arrays and maps, the Collection library includes standard ways to filter, iterate, inspect, compose, and sort your data. This post specifically looks at List<E> , Dart's ordered, indexable collection of objects. Aside: The Dart project is lucky
Read more

Converting Array to List in Scala

Now, this has to have a built-in somewhere in Scala , because it just seems too common. So, how to convert an Array to a List in Scala? Why do I need this? I needed to drop to Java for some functionality, which in this case returns an Array. I wanted to get that Array into a List to practice my functional programming skillz. **Update**: I figured out how to convert Arrays to Lists the Scala way. Turns out it's a piece of cake. val myList = List.fromArray(Array("one", "two", "three")) or val myList = Array("one","two","three").elements.toList The call to elements returns an Iterator , and from there you can convert to a List via toList . Nice. Because my first version wasn't actually tail recursive, what follows is a true tail recursive solution, if I were to implement this by hand. The above, built in mechanism is much better, though. object ArrayUtil { def toList[a](array: Array[a]): List[a] = { d
Read more

Null-aware operators in Dart

Image
Three new language features just landed in the latest dev channel build of the Dart ! Collectively known as null-aware operators , these new features will help you reduce the code required to work with potentially null objects. I'm excited for these new abilities, because typing less is always a good thing. Read on to learn more, and be sure to try these new features on Dart Pad . ?? Use ?? when you want to evaluate and return an expression IFF another expression resolves to null. exp ?? otherExp is similar to ((x) => x == null ? otherExp : x)(exp) ??= Use ??= when you want to assign a value to an object IFF that object is null. Otherwise, return the object. obj ??= value is similar to ((x) => x == null ? obj = value : x)(obj) ?. Use ?. when you want to call a method/getter on an object IFF that object is not null (otherwise, return null). obj?.method() is similar to ((x) => x == null ? null : x.method())(obj) Yo
Read more