Integration with Box2d physics engine

I swapped the animation at the top of the Koolmoves home pageĀ https://www.koolmoves.com with an animation I created in KoolMoves using a sprite sheet, custom javascript, and Box2d, a physics engine used in a lot of games. The Box2d didn’t play well with jQuery requiring a change in the order of the javascript code. I got the idea from a CreateJS/EaselJS example http://sandbox.createjs.com/EaselJS_Box2dWeb/. In a future version, I will integrate the engine into the software.

As I learned from the CreateJS example, Box2d handles the animation (movement) of objects on the stage taking into account gravity, collisions and the friction, density, and bounciness of objects. EaselJS handles the display of the objects. Each EaselJS object has a Box2d counterpart defined generally as either a circle or a box. In the javascript tick function which is called every 20 or so times per second by the Ticker class in EaselJS, the position and rotation angle of each Box2d object are copied to the corresponding EaselJS objects. Thus the two libraries work in tandem.

Debugging all of this is not for the faint of heart. I use FireFox (I press F12 to enter the debug environment). I use Console tab to check for gross errors and Debugger tab to set break points. Box2d has its own debug mode that displays the Box2d objects (bodies). You obviously want each EaselJS object to sit on top of its corresponding Box2d object. It usually takes some fiddling to make that happen. You have to take into account where the position of each is measured relative to the footprint of the object (upper left or center).

Leave A Comment?