Demo: http://kripken.github.io/box2d.js/demo/webgl/box2d.html

WebAssembly demo: http://kripken.github.io/box2d.js/demo/webgl/box2d.wasm.html

Example code to give you an idea of the API: https://github.com/kripken/box2d.js/blob/master/demo/webgl/box2d.html#L14

box2d.js is a direct port of the Box2D 2D physics engine to JavaScript, using Emscripten. The source code is translated directly to JavaScript, without human rewriting, so functionality should be identical to the original Box2D.

box2d.js is zlib licensed, just like Box2D.

Discussion takes place on IRC at #emscripten on Mozilla's server (irc.mozilla.org)

Details

The automatically generated bindings have been tested to the extent that can be found in the examples in the 'testbed'. For general notes on using the bindings, see the ammo.js project (a port of Bullet to JavaScript using Emscripten), many of the details of wrapping classes and so forth are identical.

It seems to be running ok on at least the following:

Desktop PC (Linux) - Chrome22, Opera12, Firefox16

Desktop PC (OSX) - Chrome22, Opera12, Firefox16

Desktop PC (Win7) - Chrome22, Opera12, Firefox16

iOS 5 - Safari, Chrome, Dolphin

Android ICS - Chrome18

Android JB - Chrome18, Dolphin9

Testbed

The demo/html5canvas folder contains an example web page and script files to reproduce the original Box2D testbed, with similar controls and features.

Demo: http://www.iforce2d.net/embox2d/testbed.html

Like the original C++ version, the testbed is set up so that adding another test scene is easy. Look in the tests folder and find the template.js file....

Copy template.js and rename it. In the renamed file, replace all occurrences of 'embox2dTest_template' with your test name. Fill in the setup function. Optionally, fill in the other functions. Include the new file at the beginning of testbed.html with the other tests. Add the new test option to the "testNumber" select box in test.html

R.U.B.E testbed

The demo/rube_testbed folder contains the testbed with scenes which were exported from the R.U.B.E editor

Building

$ /PATH/TO/EMSCRIPTEN emmake make

To build latest (2.3.1) version:

$ /PATH/TO/EMSCRIPTEN emmake make VERSION=latest

Also, You can build the debug version of javascript file (with source maps support):

$ /PATH/TO/EMSCRIPTEN emmake make VERSION=latest BUILD=debug

This runs emscripten and uses it to compile a version of the Box2D source code stored within the box2d.js git. This source code has been modified to add constructors to some objects to ensure that emscripten will generate bindings for them.

Currently, you need to use a very recent Emscripten to build, version 1.23.0 or later (master branch as of Aug 21 2014) to build box2d.js. See http://kripken.github.io/emscripten-site/docs/building_from_source/building_emscripten_from_source_using_the_sdk.html#building-emscripten-from-source-using-the-sdk

Usage (WebIDL bindings)

The current bindings are created with the WebIDL binder. Read Box2D_v2.2.1.idl to see the class, methods, and attributes that are bound.

See test.js for a small working example.

Note: To improve readability all code snippets below assume that everything in the 'Box2D' namespace has been made available! (Check the 'using' function in helpers/embox2d-helpers.js for details.)

Class member variable access

The values of public member variables of Box2D classes (mostly the definition classes) can be set and accessed using the generated functions, which will be the variable name prefixed with set_ or get_ , eg.

// C++ circleShape.m_radius = 2