distanceConstraint error.

[Angeloss]

Hello, im trying to do something like this (link). So, I started just with the hook, but i can't get the distanceConstraint work when i clicked on the box.

This is my code:

 

game.module(

    'game.main'

)

.require(

    'engine.core',

    'plugins.p2'

)

.body(function() {

game.addAsset('media/box.png', 'box');

game.addAsset('media/panda.png', 'panda');


Box = game.Class.extend({


    init: function(x, y,body) {

		var pbody = body;

		var joint = null;

		var cbody = null;

        // Add body and shape

        var shape = new game.Rectangle(1,.5);

		var cbody = new game.Body({

            mass: 1, //Static.

            position: [

                x / game.scene.world.ratio,

                y / game.scene.world.ratio

            ],

            angularVelocity: 1

        });

        this.body = cbody;

        this.body.addShape(shape);


        // Add sprite

        this.sprite = new game.Sprite('box');

        this.sprite.anchor.set(0.5, 0.5);


		this.sprite.interactive=true;

		this.sprite.buttonMode=true;

		this.sprite.click = function(){


			joint = new game.DistanceConstraint( cbody, pbody,  5,  10 );

			game.scene.world.addConstraint(this.joint);

		};


        this.update();

        game.scene.world.addBody(this.body);

        game.scene.container.addChild(this.sprite);

        //game.scene.addTimer(5000, this.remove.bind(this));

    },


    update: function() {

        this.sprite.position.x = this.body.position[0] * game.scene.world.ratio;

        this.sprite.position.y = this.body.position[1] * game.scene.world.ratio;

        this.sprite.rotation = this.body.angle;

    }

});


Panda = game.Class.extend({

    init: function(x, y) {

        // Add body and shape

        var shape = new game.Circle(63 / 2 / game.scene.world.ratio);

        this.body = new game.Body({

            mass: 1,

            position: [

                x / game.scene.world.ratio,

                y / game.scene.world.ratio

            ],

            angularVelocity: 1

        });

        this.body.addShape(shape);


        // Add sprite

        this.sprite = new game.Sprite('panda');

        this.sprite.anchor.set(0.5, 0.5);


        var force = 500;

        var angle = Math.random() * Math.PI * 2;

        this.body.applyForce([

            Math.sin(angle) * force,

            Math.cos(angle) * force

        ], this.body.position);


        this.update();

        game.scene.world.addBody(this.body);

        game.scene.container.addChild(this.sprite);

    },


    update: function() {

        this.sprite.position.x = this.body.position[0] * game.scene.world.ratio;

        this.sprite.position.y = this.body.position[1] * game.scene.world.ratio;

        this.sprite.rotation = this.body.angle;

    }

});


SceneGame = game.Scene.extend({

    backgroundColor: 0x808080,


    init: function() {

        // Init world

        this.world = new game.World();

        this.world.ratio = 100;


        // Add container

        this.container = new game.Container();

        this.container.position.x = 0;

        this.container.position.y = game.system.height;

        this.container.scale.y = -1; // Flip container.

        this.stage.addChild(this.container);


        // Add plane

        var planeShape = new game.Plane();

        var planeBody = new game.Body({

            position: [0, 0]

        });

        planeBody.addShape(planeShape);

        this.world.addBody(planeBody);


        // Add walls

        var wallShape = new game.Rectangle(2, game.system.height * 2 / this.world.ratio);

        var wallBody = new game.Body({

            position: [-1, game.system.height / 2 / this.world.ratio]

        });

        wallBody.addShape(wallShape);

        this.world.addBody(wallBody);


        wallShape = new game.Rectangle(2, game.system.height * 2 / this.world.ratio);

        wallBody = new game.Body({

            position: [game.system.width / this.world.ratio + 1, game.system.height / 2 / this.world.ratio]

        });

        wallBody.addShape(wallShape);

        this.world.addBody(wallBody);


		var panda = new Panda(game.system.width / 2, game.system.height / 2);

		this.addObject(panda);

		var box = new Box(game.system.width / 2, game.system.height / 2, panda.body);

		this.addObject(box);

    },

});


game.System.width = window.innerWidth * game.device.pixelRatio;

game.System.height = window.innerHeight * game.device.pixelRatio;


game.DebugDraw.enabled = true;

game.start();


});

 

When i was clicking the box, (it appers) i get this: "Uncaught TypeError: undefined is not a function"... in 39 line where i'm creating the constraint: 

 

joint = new game.DistanceConstraint( cbody, pbody,  5,  10 );

how can i do created the constraint?

 

Also, i have some questions: What means the ratio value in 99 line? where is it, in the p2.js plugin or in the engine itself? i can't find it in the source code.

why the container is fliped? i can't figure out why i should fliped. How it works?

I set debugDraw to true and it's show me this:

 

 

Thank you.

P.D: I love the engine

[enpu]

Hi,

 

Not all p2.js classes are included yet.

 

I just updated p2.js plugin to include game.DistanceConstraint

https://github.com/ekelokorpi/panda.js-plugins/blob/master/p2/p2.js#L10358

[enpu]

Oh and the container is flipped, because p2.js uses opposite y values. So in p2.js -100 means down, while in Panda it means up.

But you can change the gravity, when you create p2.js world:

this.world = new game.World({    gravity: [0, 5]});

Then you don't need to flip the container.