LiquidFun Build and Run Instructions
Building JavaScript version


LiquidFun can be translated from C++ into JavaScript by Emscripten. The entire JavaScript translation is in one file: liquidfun.js.

The LiquidFun source includes a pre-made version of liquidfun.js. You can reference that liquidfun.js to start writing LiquidFun programs in JavaScript right away.

However, if you make changes to the LiquidFun C++ code, or if you need to expose more of the LiquidFun API, you will need to remake liquidfun.js by following the steps on this page.

Before Building

We use Emscripten on Linux, but you should be able to use the Emscripten SDK on Mac or Windows too, if you prefer. Note that Mac and Windows build environments have not been tested.

  • Get Emscripten. See Installing from Source.
  • Setup Emscripten.
    • As suggested in the Emscripten docs, run "emcc -v"
    • Update your ~/.emscripten file. You'll probably want something like this:
      • LLVM_ROOT = os.path.expanduser('~/Code/emscripten-fastcomp/build/Release/bin')
      • NODE_JS = os.path.expanduser('~/Code/node-v0.10.29-linux-x64/bin/node')
  • Get the Closure Compiler.
  • Set environment variables. Depending on your setup, you may want to add some lines like this to your ~/.bashrc file.
    • export EMSCRIPTEN=~/Code/emscripten
    • export CLOSURE_JAR=~/Code/closure/compiler.jar


The following commands run Emscripten to translate C++ to lf_core.js, then combine lf_core.js with the bindings in jsBindings into liquidfun.js.

cd Box2D/lfjs

Executing the Testbed

For an example program, try openning `Box2D/lfjs/index.html' in your browser. This will load a JavaScript version of the LiquidFun Testbed. It uses the liquidfun.js file that you built above.


The default output of make and is whitespace-optimized JavaScript that is difficult to debug. To create an un-optimized version of the testbed, please follow the steps below.

  • In lfjs/Makefile change -O2 to -O0, to disable Emscripten optimizations.
  • In lfjs/index.html replace <script src="liquidfun.js"></script> with a similar line for every .js file in lfjs/ It should look something like,
      <script src="lf_core.js"></script>
      <script src="jsBindings/offsets.js"></script>
      <script src="jsBindings/Common/b2Math.js"></script>
      <script src="jsBindings/Collision/b2Collision.js"></script>
      <script src="jsBindings/Collision/Shapes/b2EdgeShape.js"></script>
      <script src="jsBindings/Collision/Shapes/b2PolygonShape.js"></script>
      <script src="jsBindings/Collision/Shapes/b2Shape.js"></script>
      <script src="jsBindings/Collision/Shapes/b2ChainShape.js"></script>
      <script src="jsBindings/Collision/Shapes/b2CircleShape.js"></script>
      <script src="jsBindings/Dynamics/b2Body.js"></script>
      <script src="jsBindings/Dynamics/b2World.js"></script>
      <script src="jsBindings/Dynamics/Joints/b2WheelJoint.js"></script>
      <script src="jsBindings/Dynamics/Joints/b2WeldJoint.js"></script>
      <script src="jsBindings/Dynamics/Joints/b2GearJoint.js"></script>
      <script src="jsBindings/Dynamics/Joints/b2Joint.js"></script>
      <script src="jsBindings/Dynamics/Joints/b2FrictionJoint.js"></script>
      <script src="jsBindings/Dynamics/Joints/b2RevoluteJoint.js"></script>
      <script src="jsBindings/Dynamics/Joints/b2MotorJoint.js"></script>
      <script src="jsBindings/Dynamics/Joints/b2PulleyJoint.js"></script>
      <script src="jsBindings/Dynamics/Joints/b2DistanceJoint.js"></script>
      <script src="jsBindings/Dynamics/Joints/b2PrismaticJoint.js"></script>
      <script src="jsBindings/Dynamics/Joints/b2RopeJoint.js"></script>
      <script src="jsBindings/Dynamics/Joints/b2MouseJoint.js"></script>
      <script src="jsBindings/Dynamics/Contacts/b2Contact.js"></script>
      <script src="jsBindings/Dynamics/b2Fixture.js"></script>
      <script src="jsBindings/Dynamics/b2WorldCallbacks.js"></script>
      <script src="jsBindings/Particle/b2ParticleSystem.js"></script>
      <script src="jsBindings/Particle/b2ParticleGroup.js"></script>
      <script src="jsBindings/Particle/b2Particle.js"></script>