Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
A Crafty component tha facilitates the use of the Physics Engine Box2D(box2dweb)
JavaScript
branch: master

Merge pull request #11 from fdavis/master

update crafty to work on CentOS 6 w/Firefox 25
latest commit 47cb32f707
@shogoki-vnz authored
Failed to load latest commit information.
img Add mising images
libs update box2d and crafty to work on CentOS 6 w/Firefox 25
.gitignore added bower definitions
README.md Added link to the official Box2D manual
angryshapes.js New demo
bower.json Update bower.json
box2d.js update box2d and crafty to work on CentOS 6 w/Firefox 25
changelog.txt
demo1.html version 0.1
demo2.html Drop Box Demo
demo2.js Added some variables in demo2 to make it more readable, slightly chan…
demo3.html This is the same demo in http://code.google.com/p/box2dweb but made w…
demo3.js Merge branch 'master' of git@github.com:shogoki-vnz/CraftyBox2D.git
demo4.html New demo
package.json Update package.json
pong.js Update to use the new method "onContact"
test.html version 0.1
test.js version 0.1

README.md

CraftyBox2D

It's a component that facilitates the use of the Physics Engine Box2D in Crafty. The Box2D implementation that the component use is box2dweb.


Using CraftyBox2D

First you must init the box2dWorld as follow Crafty.box2D.init(0, 10, 32, true);

The above code initialize the world with 0 for the world gravity in the x-axis, 10 for the world gravity in the y-axis 32 for the pixel-to-meter ratio, and allow the world sleep. The init method also attach the world.steep() function tho the stage "EnterFrame" event

Once the world has been initialized, you can start to add entitys with the Box2D component

// Setup floor
var floor = Crafty.e("2D, Canvas, Box2D")
    .attr({ x: 0, y: 0})
    .box2d({
        bodyType: 'static',
        shape: [
                [0, 300],
                [400, 300]
            ]
    });

// Add simple box
var box = Crafty.e("2D, Canvas, Color, Box2D")
     .attr({ x: 0, y: 0, w:20, h:20})
     .color("#FF0000")
     .box2d({
            bodyType: 'dynamic'
     });

Above first we create the floor, set the bodyType to static, and set the collition box in the botom of the stage then we create a box with 20x20 pixels, red color and set the body type to dynamic and left the collition area to the default values. Running the game a see the box falling to the floor.

the are more options that you can set, please see the demo game code for more.

Is very recommended the reading of the Box2D manual for a review of all the options that you can use

Something went wrong with that request. Please try again.