viktorljung
93 lines
4.5 KiB
Markdown
93 lines
4.5 KiB
Markdown
# Building JavaScript version
|
|
|
|
### Background
|
|
|
|
LiquidFun can be translated from C++ into JavaScript by
|
|
[Emscripten](http://github.com/kripken/emscripten/wiki).
|
|
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](http://github.com/kripken/emscripten/wiki/Emscripten-SDK#installing-from-source).
|
|
- You also need [Fastcomp](http://github.com/kripken/emscripten/wiki/LLVM-Backend#getting-fastcomp)
|
|
- And [Node.js](http://nodejs.org/download/)
|
|
- 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](http://developers.google.com/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
|
|
|
|
### Building
|
|
|
|
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
|
|
make
|
|
./uglify.sh
|
|
|
|
### 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.
|
|
|
|
### Debugging
|
|
|
|
The default output of `make` and `uglify.sh` 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/uglify.sh`. 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>
|
|
|