Home

Welcome to the craftybox wiki!

The whole purpose of this project is to integrate Box2D into Crafty.js in the most efficient way. The goal is to just add a Box2D component to the entity, and it will acts just like 2D and Collision component (nothing else) but put the entity in Box2D's world instead. That is, however you use "2D, Collision" before can be replaced by "Box2D", meaning "Box2D, Canvas, Color" should also work just like "2D, Collision, Canvas, Color".

The problem with Crafty and Box2D is that Box2D need a world to be able to create the objects. I could create the world in the app's context, then pass that world to the entity with Box2D component. However, it creates an unnecessary dependency, and each entity has to hold a reference.

The other way I'm thinking is like the Canvas component. I would need to extends Crafty itself that will create a world whenever a Box2D component is used. Looks like this will be the direction I'm going.

Another problem with Box2D is the different meaning when it comes to measurements and x, y. Crafty, as other web elements, uses pixel, but Box2D has it's own unit. Box2D has origin point at the center of the entity, as opposed to Crafty's top left. Since Box2D is to be part of Crafty and not the other way around, I decide to use pixel as unit and top left as origin point when setting attributes.

The following assumptions are made:

• Entity's x, y, w, h, rotation define the bounding rectangle for the entity.
• This bounding rectangle ensures that the entity can be drawn fully.
• Depending on the combined shape of all fixtures, x, y, w, h, and rotation are recalculated.
• The bounding rectangle will be minimal, and used for collision.
• Use one of the helpers to create/add fixtures to the entity. New bounding rectangle will be recalculated.

This is a in-development project, so stay tune, or check out

• Usage
• Examples
• Collision