JavaScript Physics Engines and Windows 8 Games

  • Article

Driven by opportunity and visions of success in the Windows Store, you set to work, turning your gaming idea into code.

“It Was My Understanding There’d Be No Math”

Maybe you wanted to move something across the screen.  Maybe check if it hit a target.  Oh, and there’s wind, and friction, and maybe things should bounce when they collide…

Forgotten Math...The specter of forgotten math begins to loom.

Thankfully, there are physics engines.  Simply put, they take care of some of the math and work involved in games and simulations.  Of course they don’t eliminate math and complexity, but they can make many scenarios easier:

  • Physics-related math – Matrices, vectors, velocity, rotation, momentum, etc.
  • Rigid body dynamics – Sounds unfriendly, but focuses on the motion and interactions of things whose shapes don’t change (save when deformed by say a collision or damage.)  This also includes joints to connect multiple objects together to create more complex objects like a ragdoll of a person, a truck with parts/wheels/cargo, etc.
  • Soft body dynamics – Less frequently-used, this is simulation of objects whose shape can change.  Cloth is a pretty common example of this.
  • Collision detection – Need to know when something hits or overlaps another?  There are may ways to do this, from relatively simple bounding shapes, to often more accurate (and more complex) per-pixel approaches, and on to the vast world of 3D.

Why write such things yourself when others have taken the time to create great libraries?

That said, you may not need a physics engine at all.  For the simplest games, it’s pretty easy to roll your own logic for basic bounding-box collision checking and basic motion.  However, games become complex quickly, so even if you don’t imagine you’ll need one, the up-front investment in learning & using physics engines can pay off sooner than you’d think.

JavaScript Physics Engines

Here’s a list of some key JavaScript-based physics engines that you might consider in your Windows Store game or simulation.   

imagebox2dweb

Home - https://code.google.com/p/box2dweb/
Download - https://code.google.com/p/box2dweb/downloads/list

A JavaScript port of Box2DFlash (aka Box2DFlashAS3), itself a port of the Box2D engine, box2dweb offers a single-file implementation, which makes it easy to add to your app.

The box2dweb site has an interactive demo and directs you to Box2DFlash for documentation (since it’s a direct port).  According to the box2dweb download site, it was last updated in June, 2011. 

imageBox2DJS

Home - https://box2d-js.sourceforge.net/
Download - https://sourceforge.net/projects/box2d-js/

Like box2dweb, Box2DJS is also port of Box2DFlash/Box2DFlashAS3. It’s somewhat older (at least at time of writing) and does require more files to be added to your project than box2dweb.

The Box2DJS home page has instructions, sample code, and demos.  Here are a few of them:

imageimageimage

According to the Box2DJS download page, the last update was in April, 2010.

imagePixel Lab Box2d-JS

Home - https://box2d.thinkpixellab.com/
Download - https://github.com/thinkpixellab/box2d

This version of Box2d by Pixel Lab is a clone of Box2DJS, updated to have better compression and to resolve bugs in the original version.

The Pixel Lab Box2d-JS site has some live demos, mirroring the ones featured on the Box2DJS site.  Interestingly, this engine was used in the Agent 8 Ball game:

image

According to the download page on Github, the compiled version was last updated in April, 2012.

imageAmmo.js

Home - https://github.com/kripken/ammo.js
Download - https://github.com/kripken/ammo.js

Ammo.js is a 3D physics engine, and an automated port of the Bullet Physics Library (written in C++).  Like box2dweb, it is built into a single file (“ammo.js”), making it simple to import.

The lastest version of Ammo.js (built as “/builds/ammo.js”) was updated in September, 2012.  Again, with this post being primarily an index, see the last section for links to more detailed analysis of Ammo.js.

imageJigLibJS2

Home - https://brokstuk.com/jiglibjs2/
Download - https://github.com/bartdeboer/JigLibJS2

JigLibJS2 is an automated port of the JigLibFlash physics engine.  It’s a 3D physics engine, and on the JibLibJS2 home (and in the download source) there’s an interesting canvas demo (using three.js for 3D rendering) with multiple objects, including a car you can drive:

image

The download page on Github shows the latest updates in September, 2012. 

imageCannon.js

Home - https://schteppe.github.com/cannon.js/
Download - https://github.com/schteppe/cannon.js

Cannon.js is a 3D physics engine, based on… well, nothing.  Unlike many physics engines, cannon.js is “100% open source JavaScript, written from scratch”.  Cannon.js cites inspiration from three.js and ammo.js, yet claims to be lighter and smaller than ported engines such as ammo.js and JigLibJS.

Though the home page samples use WebGL, Chandler Prall’s Javascript Physics Engine Comparison has a nice example of using cannon.js with the three.js CanvasRenderer.

According to the cannon.js download page, the latest updates were made in September, 2012.

Another Option: Windows Runtime Components

Another interesting option for Windows Store apps is to use Windows Runtime Components, components written in other languages such as C++, C#, and VB, and call them from your JavaScript-based game.

imageFor example, the Farseer Physics Engine is based on .NET, but could be wrapped and exposed to a JavaScript-based Windows Store app.

Keep in mind that while this can work, it also adds new levels of complexity to your app.  For example, which side “owns” the various pieces of game state?  But, if you’re already familiar with another non-JavaScript physics engine, this may be worth considering.

What Next?

Here are some other helpful articles to get you started:

As I mentioned, this post lists only a subset of what’s out there.  If you know of other helpful engines, please post in the comments!

-Chris