Here are some components I am working on to help using Box2D in Crafty.js (web | github) engine.
It uses Box2DWeb, which is a JavaScript port from Box2DFlash, which is a port from the original Box2D physic engine written in C++.
The components are written in CoffeeScript, which speeds up the developing process really quick.
A compiled JS file is available.
Box2D
: intended to replace2D, Physics, Gravity, Collision
.Throwable
: intended to replaceDraggable
. Of course it usesMouse
.
You can initialize after Crafty with a set of optional options:
Crafty.init()
Crafty.Box2D.init({gravityX:0, gravityY:0, scale:30, doSleep:true})
The default world has no gravity, allows sleeping, and has a SCALE of 30.
Or it will be initialized when you create a Box2D entity. You cannot set the world's properties at this point, and it will use the default values.
However you can change gravity through setter anytime after the world is created
Crafty.Box2D.gravity = {x: 0, y: 10}
Crafty.e("Box2D").attr({x:x, y:y, w:w, h:h});
: A static rectangleCrafty.e("Box2D").attr({x:x, y:y, w:w, type:"dynamic"});
: A dynamic squareCrafty.e("Box2D").attr({x:x, y:y, h:h, type:"dynamic});
: also a dynamic squareCrafty.e("Box2D").attr({x:x, y:y, r:r, type:"dynamic});
: dynamic circle
You can also indicate density
, friction
, and restitution
if you don't want the default values (1.0, 0.5, 0.2 accordingly).
Crafty.e("Box2D").attr({x:x, y:y, w:w, h:h, density: 1.0, friction: 0.5, restitution: 0.2});
Some shortcuts:
Crafty.e("Box2D").attr({x:x, y:y}).rectangle(w, h);
: static rectangleCrafty.e("Box2D").attr({x:x, y:y, dynamic: true}).rectangle(w, w);
: A dynamic squareCrafty.e("Box2D").attr({x:x, y:y, dynamic: true}).rectangle(w);
: also a dynamic squareCrafty.e("Box2D").attr({x:x, y:y, dynamic: true}).circle(r);
: dynamic circle- `Crafty.e("Box2D").attr({x:x, y:y}).polygon([[50,0],[100,100],[0,100]]): a
- Can set callback for when collision happens and/or ends with
.onHit(component, beginContact, endContact)
. - Can manually check for collision with
.hit(component)
- Hit data is
[{obj: Entity, type: "Box2D", points: data.points}]
obj
is the entity the current entity collides with.points
is the contact points between two entities. At most two for polygon. One for circle.
- The
b2World
is accessible withCrafty.Box2D.world
- The
b2Body
is accessible withCrafty.e("Box2D").body
See examples
folder for more usuages.
- Collision detection with
.onHit(component, beginContact, endContact)
. - Added example with collision.
- Manual collision detection with
.hit(component)
. - Refactored to use module pattern.
- Changing gravity should wake up all bodies.
- Polygon supported.
- Changed body type setting to
type: "static|dynamic|kinematic"
fromdynamic:true
. - Only allow manual shifting entity when body is sleeping.
- Added usuage.
- Same attributes as of Crafty's 2D component.
- Entities can move and rotate.
- Finished Box2D example.
- Don't recreate body when .attr({x, y}) is called again.
- Made
.isAt
,.move
,.shift
,.attach
,.detach
work. - More examples.
- Refactored to allow more usuages.
- Use Crafty's FPS for Box2D World step.
- Remove body from Box2D world before destroying entity.
- Changed the changelog version format :)
- Started writing tests
- Parameters for SetAsBox should be half width, half height
- Can create circle by
.attr({x, y, r})
- Can specify dynamic body by
.attr({x, y, r, dynamic:true})
- Added the standard example from Box2D
- Rewrote from scratch.
- Updated Crafty to v0.4.7.
- Updated Coffee-Script compiler to v1.3.1.
- Removed Box2DWorld component.
- Extended Crafty with a Box2D property to act as the world.
Link between Crafty's 2D attributes and Box2D attributesMake objects move and rotateCollision -.hit
,.onHit
.move
,.attach
,.shift
, etc..."Mouse"
,"Draggable"
,"Four-way"
, etc...ThrowableMouse Joint- Determine collision strenght
- Filter collision
- A complete example game.