Debugging Box2D with pixi.js

I’m creating a game using Pixi.js for rendering and Box2D (via box2d.js) for rigid body physics. If you’re trying to debug collision issues you really need to see what Box2D thinks your world looks like, which means implementing the b2DebugDraw class. This requires a lot of pointer wrapping, but fortunately the box2d.js repo provides a sample for rendering to a canvas. This interface is actually how the demo is rendered.

It turned out to be fairly simple to adapt the code to pixi.js, which provides a canvas-like Graphics class. You can find my code as a gist. The recommended way to use Box2D is to scale from MKS (metres, kilograms, seconds) units into screen pixels, so my version incorporates a scaling factor.

Leave a Reply

Your email address will not be published. Required fields are marked *