How to start with Chipmunk and CocosBuilder?

cocos2d-x JavaScript
#1

Hello everyone!
I am still continue my journey with this awesome game engine. Thanks for great work!
Today I was trying to start with Chipmunk and CocosBuilder alpha4 with this tutoral:


and these examples:

I tried to do example “Balls” and my code looks following:

var MainScene = function(){};

var space;

MainScene.prototype.onDidLoadFromCCB = function()
{
    this.rootNode.setTouchEnabled(true);
    cc.log("onLoads");

    cc.log("======== CHIPMUNK START ========");
    space = cp.spaceNew();
    space.gravity = cp.v(0, -500);
    space.sleepTimeThreshold = 0.5;
    space.collisionSlop = 0.5;
    space.sleepTimeThreshold = 0.5; 

    var width = 50;
    var height = 60;
    var mass = width * height * 1/1000;
    var rockBody = cp.bodyNew(mass, cp.momentForBox(mass, width, height));
    var rock = cp.spaceAddBody(space, rockBody);
    rock.p = cp.v(500, 100);
    rock.angle = 1;
    shape = cp.spaceAddShape(space, cp.boxShapeNew(rock, width, height));
    shape.friction = 0.3;
    shape.elasticity = 0.3;

    for (var i = 1; i <= 10; i++) {
        var radius = 20;
        mass = 3;
        var body = cp.spaceAddBody(space, cp.bodyNew(mass, cp.momentForCircle(mass, 0, radius, cp.v(0, 0))));
        body.pos = cp.v(200 + i, (2 * radius + 5) * i);
        var circle = cp.spaceAddShape(space, cp.circleShapeNew(body, radius, cp.v(0, 0)));
        circle.elasticity = 0.8;
        circle.friction = 1;
    }  

    this.rootNode.schedule(update, 1);
};

function update(dt) {
    cc.log("update");
    cp.spaceStep(space, dt);
}

And I have HelloWorld scene (MainScene.ccb) and everything compiles without errors, I run it on CocosPlayer and I can’t see any ball. I just see sprite and button added directly to MainScene.ccb.
Update method is executing every second.
What is my mistake? What am I doing wrong?

Thanks for every advice.

#2

Ok, this code should be (new lines of code are commented out):

var MainScene = function(){};

var space;

MainScene.prototype.onDidLoadFromCCB = function()
{
    this.rootNode.setTouchEnabled(true);
    cc.log("onLoads");

    cc.log("======== CHIPMUNK START ========");
    space = cp.spaceNew();
    space.gravity = cp.v(0, -500);
    space.sleepTimeThreshold = 0.5;
    space.collisionSlop = 0.5;
    space.sleepTimeThreshold = 0.5; 

    //var sprite = cc.PhysicsSprite.create("image.png");
    var width = 50;
    var height = 60;
    var mass = width * height * 1/1000;
    var rockBody = cp.bodyNew(mass, cp.momentForBox(mass, width, height));
    var rock = cp.spaceAddBody(space, rockBody);
    rock.p = cp.v(500, 100);
    rock.angle = 1;
    //sprite.setBody(rock);
    shape = cp.spaceAddShape(space, cp.boxShapeNew(rock, width, height));
    shape.friction = 0.3;
    shape.elasticity = 0.3;
    //bg.addChild( sprite, 100);

    for (var i = 1; i <= 10; i++) {
        //var sprite = cc.PhysicsSprite.create("kolko.png");
        var radius = 20;
        mass = 3;
        var body = cp.spaceAddBody(space, cp.bodyNew(mass, cp.momentForCircle(mass, 0, radius, cp.v(0, 0))));
        //sprite.setBody(body);
        body.pos = cp.v(200 + i, (2 * radius + 5) * i);
        var circle = cp.spaceAddShape(space, cp.circleShapeNew(body, radius, cp.v(0, 0)));
        circle.elasticity = 0.8;
        circle.friction = 1;
        //bg.addChild( sprite, 100);
    }  

    this.rootNode.schedule(update, 1);
};

function update(dt) {
    cc.log("update");
    cp.spaceStep(space, dt);
}
#3

Hi Tobias S,
is your code working now?
How did you add chipmunk in your cocosbuilder project? (i have ccb3 alpha5, but still it is missing “chipmunk include” option)

#4

Hi m2 m2.
I didn’t have to include Chipmunk manually. To my surprise Chipmunk works out of box. Just refer to cp variable.
I don’t have running gravity as far, but if you create many objects in one point, they will bounce from each other so I assume that Chipmunk works. I just don’t know how to make gravity running, but I look forward with hope, because it was my first day with Chipmunk.
When you manage to run gravity with Chipmunk, it will be great if you post your code here.
Best regards :slight_smile:

#5

Hi Tobias S

I created a sample project using cocosbuilder3 alpha5 and chipmunk-you can easily drag sprites from left side of ccb3 to the mainScene and set their tag to 1 for static rectangle and 2 for dynamic circles and run… :slight_smile:

the project attached