2dx_icon_512_rounded

Cocos2dx-js + Chipmunk – Part 2: Creating static walls and ground

Hi, today you will learn how to simply add static walls and ground to your physics space. You will need it to prevent escaping bodies out of the screen.

I assume that you have project from previous part of this tutorial.

So let’s start!

1. Function addWallsAndGround:

Firstly we need to create some parameters: WALLS_WIDTH set in pixels, WALLS_ELASTICITY – this is a parameter describing elasticity of static walls from 0 to 1 point and WALL_FRICTION – similar parameter but describing friction of static walls from 0 to 1 point.

 

var WALLS_WIDTH = 5;
var WALLS_ELASTICITY = 0.5;
var WALLS_FRICTION = 1;

In next step let’s make use of this parameters. Here is our function:

function addWallsAndGround() {
	leftWall = new cp.SegmentShape(space.staticBody, new cp.v(0, 0), new cp.v(0, winSize.height), WALLS_WIDTH);
	leftWall.setElasticity(WALLS_ELASTICITY);
	leftWall.setFriction(WALLS_FRICTION);
	space.addStaticShape(leftWall);

	rightWall = new cp.SegmentShape(space.staticBody, new cp.v(winSize.width, winSize.height), new cp.v(winSize.width, 0), WALLS_WIDTH);
	rightWall.setElasticity(WALLS_ELASTICITY);
	rightWall.setFriction(WALLS_FRICTION);
	space.addStaticShape(rightWall);

	bottomWall = new cp.SegmentShape(space.staticBody, new cp.v(0, 0), new cp.v(winSize.width, 0), WALLS_WIDTH);
	bottomWall.setElasticity(WALLS_ELASTICITY);
	bottomWall.setFriction(WALLS_FRICTION);
	space.addStaticShape(bottomWall);

	upperWall = new cp.SegmentShape(space.staticBody, new cp.v(0, winSize.height), new cp.v(winSize.width, winSize.height), WALLS_WIDTH);
	upperWall.setElasticity(WALLS_ELASTICITY);
	upperWall.setFriction(WALLS_FRICTION);
	space.addStaticShape(upperWall);
}

2. Description
Let’s see what every line is doing:

leftWall = new cp.SegmentShape(space.staticBody, new cp.v(0, 0), new cp.v(0, winSize.height), WALLS_WIDTH);

In this line we create Chipmunk object called SegmentShape, it’s rectangle shaped object with:
– static body (space.staticBody)
– start point set to (0, 0) – (new cp.v(0, 0))
– end point set to (0, winSize.height) where winSize.height is the left top corner of the screen
– wall’s width set to 5 pixels

leftWall.setElasticity(WALLS_ELASTICITY);
leftWall.setFriction(WALLS_FRICTION);

Here we set wall’s elasticity and friction to 0.5 and 1.

And the last line

space.addStaticShape(leftWall);

Adds created static object to our physics space.

3. Execute function
Add this line:

addWallsAndGround();

To your init method.
For me it looks like this:

PhysicsScene.prototype.init = function() {
	cc.Director.getInstance().setDisplayStats(false);
	initPhysics();
	initDebugMode(controller);

	addWallsAndGround();
}

4. Compile
Let’s publish and compile our project and see what will happen.
static walls
In this picture you can see four walls marked with gray translucent lines.

5. Experiments
What will happen when we change WALLS_WIDTH to 100?
That!
Thick armored walls ;)
So that’s all for today. In the next part of tutorial you will create your first physics object (physics simulations comes 😉 )!

Sourcehttps://bitbucket.org/galante/chipmunktutorialresources/commits/branch/master