Adding Physics body : cocos2dJS v3.0

2 Doubts:

1) I want to add my physics body.
I wrote this code following chapter 5 of Parkour tutorial and Chipmunk documentation here:
http://chipmunk-physics.net/release/ChipmunkLatest-Docs/

This is my Code: that I wrote within my initPhysics:function()


	var ballSprite= cc.PhysicsSprite.create(resG.Player_png);
	var contentSize = ballSprite.getContentSize();
	
	var ballBody= new cp.Body(1,cp.momentForBox(1, contentSize.width, contentSize.height));
	ballBody.p=cc.p(centerPos.x,centerPos.y+40);
	ballBody.applyImpulse(cp.v(150, 0), cp.v(0, 0));//run speed
	
	var ballShape= new cp.CircleShape(ballBody, contentSize.width/2, cp.v(contentSize.width/2,contentSize.height/2));
	this.space.addBody(ballBody);
	this.space.addShape(ballShape);
	ballSprite.setBody(ballBody);

This is not displaying anything on the screen.

Is there anything wrong with it. Or something else can be wrong.
Tell me give you the entire program if there is no problem with the above.

2)
I want to display debug boundaries of those physics(the red color Boundaries)
So, for this I added this code:

This Statement in the last of initPhysics:function()


	this.setupDebugNode();

And then added this function after initPhysics:function()


setupDebugNode : function()
{
	// debug only
	this._debugNode = new cc.PhysicsDebugNode(this.space );
	this._debugNode.visible = true ;
	this.addChild( this._debugNode,6 );
},

But it is not showing anything.
Infact it is not even showing the physics Body(with sprite) which is my first doubt

Thanks

i have found few issues in your code

1.you have not added your sprite to your layer object
so do this,
** this.addChild(ballSprite);**
in the end of your code

2.have you define centerPos in your code
3.you have created a circle shape but you have define its moment for box, although it does not matter you can do that

your debug code is working well there is no problem in it
have you tried to debug your code on browser ?

Hey… Hi thanks for reviewing my code…
I haven’t added my ballSprite. But the debug boundaries of physics must appear on the walls that I’ve created.
This thing I forgot to mention in my 1st post that I’ve created my walls, so even if I forgot to add ballSprite. It won’t matter.

Anways, here is my code:
Please review it again.


//Note: I am writing this Line for whosoever will read my below Code:
// I’ve centerPos.x=winsize.width/2 and centerPos.y=winsize.height/2, and my winsize is also defined properly.
// I’ve no problem with this file, as I can see other components from this file accept the debug lines(Red Color) of physicsBodies.
// My ballSprite is appearing absolutey fine

var GameScene = cc.Scene.extend({
space:null,

onEnter:function () {
	this._super();

	// Adding the necessary Layers to our Main Game Scene
	this.addChild(new PlayerLayer(),5);
	this.addChild(new HUDLayer(),10,2);
	this.addChild(new EnemyLayer(),-1,3);

	this.initPhysics();
	this.scheduleUpdate();

},

// init space of chipmunk
initPhysics:function() {
	this.space = new cp.Space();
	// Gravity
	this.space.gravity = cp.v(0, -98);

	var canvasSize=cc.director.getWinSize();
	
	// Top Wall
	var topWall = new cp.SegmentShape(this.space.staticBody,
			cp.v(0,0.85*canvasSize.y ),// left point
			cp.v(canvasSize.x, 0.85*canvasSize.y),// right point
			5);// thickness of wall
	// Bottom Wall
	var bottomWall = new cp.SegmentShape(this.space.staticBody,
			cp.v(0,0.3*canvasSize.y ),// left point
			cp.v(canvasSize.x,0.3*canvasSize.y),// right point
			0);// thickness of wall- I am setting it to 0 just to check what different is from topWall


	

	this.space.addStaticShape(topWall);
	this.space.addStaticShape(bottomWall);
	
	
	var ballSprite= cc.PhysicsSprite.create(resG.PauseBtn_png);

	var contentSize = ballSprite.getContentSize();
	
	var ballBody= new cp.Body(1,cp.momentForBox(1, contentSize.width, contentSize.height));
	ballBody.p=cc.p(centerPos.x,centerPos.y);
	
	var ballShape= new cp.CircleShape(ballBody, contentSize.width/2, cp.v(contentSize.width/2,contentSize.height/2));
	this.space.addBody(ballBody);
	this.space.addShape(ballShape);
	ballSprite.setBody(ballBody);
	
	this.getChildByTag(3).addChild(ballSprite);
	this.setupDebugNode();
},

setupDebugNode : function()
{
	// debug only
	this._debugNode = new cc.PhysicsDebugNode(this.space );
	this._debugNode.visible = true ;
	this.addChild( this._debugNode,6 );
},



update:function (dt) {
	// chipmunk step
	this.space.step(dt);
}

});


Thank You :smile:

1.you have not defined any centPos.
2. canvasSize.x and canvasSize.y doesnt exist in canvasSize object, instead of it you should use canvasSize.width and canvasSize.height

when i removed these two errors your code start to work

here is your changed code :-

var GameScene = cc.Layer.extend({
  space:null,
  onEnter:function () {
    this._super();

// Adding the necessary Layers to our Main Game Scene

this.initPhysics();
  this.scheduleUpdate();

},

// init space of chipmunk
initPhysics:function() {
  this.space = new cp.Space();
  // Gravity
  this.space.gravity = cp.v(0, -98);

var canvasSize=cc.director.getWinSize();

// Top Wall
  var topWall = new cp.SegmentShape(this.space.staticBody,cp.v(0,canvasSize.height),cp.v(canvasSize.width, canvasSize.height),5);
  // Bottom Wall
  var bottomWall = new cp.SegmentShape(this.space.staticBody, cp.v(0, 100), cp.v(1240, 100), 0);

this.space.addShape(topWall);
  this.space.addShape(bottomWall);

var ballSprite= cc.PhysicsSprite.create(res.CloseNormal_png);

var contentSize = ballSprite.getContentSize();

var ballBody= new cp.Body(1,cp.momentForBox(1, contentSize.width, contentSize.height));
  ballBody.p=cc.p(200, 200);

var ballShape= new cp.CircleShape(ballBody, contentSize.width/2, cp.v(contentSize.width/2,contentSize.height/2));
  this.space.addBody(ballBody);
  this.space.addShape(ballShape);
  ballSprite.setBody(ballBody);

this.addChild(ballSprite);
  this.setupDebugNode();
},

setupDebugNode : function()
{
  // debug only
  this._debugNode = new cc.PhysicsDebugNode(this.space );
  this._debugNode.visible = true ;
  this.addChild( this._debugNode,6 );
},

update:function (dt) {
  // chipmunk step
  this.space.step(dt);
}

});

var HelloWorldScene = cc.Scene.extend({
  onEnter:function () {
    this._super();
    var layer = new GameScene();
    this.addChild(layer);
  }
});

Hey, just see I already wrote that I’ve defined that… Don’t worry about the variables. Those variables, I am able to access perfectly. And if I wouldn’t have defined my centerPos, then why would I’ve written that MY BALLSPRITE IS APPEARING ABSOLUTELY FINE!!!

And ya for canvasSize,width… Yes I mistaken that!!! and wrote canvasize.x sorry

NOW, after changing into my code, where I only replaced canvasSize.x with canvasSize.width and same for canvasSize y<->height.

Now, I noticed that earlier it was not adding physicsBody of topWall and bottomWall but now it is adding to the scene.
BUT STILL I AM NOT ABLE TO SEE THE RED LINES ON THE BODY!!

Also, here are other changes according to your code:
Instead of making GameScene as extending to scene. I extended it to Layer, and added one more function that is as follows:
GameScene.scene = function(){

var scene = new cc.Scene();
var layer = new GameScene();
scene.addChild(layer);	
return scene;

};

Note: I’ve not implemented the way you gave in HelloWorldScene in the code you gave, but my above way also works and makes a scene. Also I am calling this scene as var s= new GameScene.scene(); and then cc.director.runScene(s)

DOES IT ADDS DEBUG NODE ADDED TO ONLY LAYERS!! I guess not, then why you asked to change GameScene to extend layer and not scene?

THIS ALSO DIDN’T SHOW ME THOSE DEBUG LINES!!

Hey, it took me so much time to figure out :smiley:
The error was in creating debugNode
In my setupDebugNode : function()
it should have been:
this._debugNode = new cc.PhysicsDebugNode. create (this.space );

Thanks for seeing my long code :smiley:

i have not said that you should change your game layer, i had found 2 mistakes in your code and i had mentioned them yesterday, overall your code was fine.

and

yes your are right debug node are not only for the layers .