2dx_icon_512_rounded

Cocos2dx-js + Chipmunk – Part 1: Creating physics space

Hello. In this tutorial we’ll start learning Cocos2dx-js with Chipmunk physics engine.
The first step to get familiar with Chipmunk is to create a physics space. Physics space is an area where physics simulations is shown.

0. Create Cocos2dx-js project with this tutorial

1. Preparing PhysicsScene
First of all create PhysicsScene.ccb in your CocosBuilder project and then connect it to the PhysicsScene.js scripts file. This file should look like this:

var PhysicsScene = function(){};

var controller;
var winSize;

PhysicsScene.prototype.onDidLoadFromCCB = function()
{
	winSize = cc.Director.getInstance().getWinSize();
	controller = this.rootNode;

	this.init();

	this.rootNode.onTouchesBegan = function(touches, event) {
		this.controller.onTouchesBegan(touches, event);
		return true;
       }	

	this.rootNode.onTouchesMoved = function(touches, event) {
		this.controller.onTouchesMoved(touches, event);
		return true;
    }	

    this.rootNode.onTouchesEnded = function(touches, event) {
		this.controller.onTouchesEnded(touches, event);
		return true;
    }

	this.rootNode.onEnterTransitionDidFinish = function() {
		setStopAction(null, false);
		return true;
	}
}

PhysicsScene.prototype.onTouchesBegan = function(touches, event)
{
	var touch = touches[0];

	return true;
}

PhysicsScene.prototype.onTouchesMoved = function(touches, event) {
	var touch = touches[0];

	return true;
}

PhysicsScene.prototype.onTouchesEnded = function(touches, event) {
	var touch = touches[0];

	return true;
}

PhysicsScene.prototype.init = function()
{

}

2. Next step is just simply create physics space:

  • add a global ‘space’ variable
  • on the bottom of file add function initPhysics:
function initPhysics() {
	space = new cp.Space();
	space.gravity = cp.v(0, -800);
	space.iterations = 30;
	space.sleepTimeThreshold = Infinity;
	space.collisionSlop = Infinity;
}

In the above code snippet we init global variable cp.Space(). This is a Chipmunk object representing physics space.
Next line is a gravity set to cp.v(0, -800). It means that it would be Earth-like gravity, to the ground.

  • next add function initDebugMode:
function initDebugMode(controller) {
	var phDebugNode = cc.PhysicsDebugNode.create(space);
	controller.addChild(phDebugNode, 10);
}

This function will draw contours for every static and physics body in our space. It will help us to debug game.

  • last step is to add physics update function:
var updateStepValue = 60;
function update() {
	space.step(1/updateStepValue);
}

This function is a space.step function executing 60 times per second so it means simply 60fps.

  • the last step is to add functions executions in proper places in our code. The whole scene file should look like:
var PhysicsScene = function(){};

var controller;
var winSize;
var space;

PhysicsScene.prototype.onDidLoadFromCCB = function()
{
	winSize = cc.Director.getInstance().getWinSize();
	controller = this.rootNode;

	this.init();

	this.rootNode.onTouchesBegan = function(touches, event) {
		this.controller.onTouchesBegan(touches, event);
		return true;
       }	

	this.rootNode.onTouchesMoved = function(touches, event) {
		this.controller.onTouchesMoved(touches, event);
		return true;
    }	

    this.rootNode.onTouchesEnded = function(touches, event) {
		this.controller.onTouchesEnded(touches, event);
		return true;
    }

	this.rootNode.onEnterTransitionDidFinish = function() {
		setStopAction(null, false);
		return true;
	}

	this.rootNode.schedule(update);
}

PhysicsScene.prototype.onTouchesBegan = function(touches, event)
{
	var touch = touches[0];

	return true;
}

PhysicsScene.prototype.onTouchesMoved = function(touches, event) {
	var touch = touches[0];

	return true;
}

PhysicsScene.prototype.onTouchesEnded = function(touches, event) {
	var touch = touches[0];

	return true;
}

PhysicsScene.prototype.init = function() {
	initPhysics();
	initDebugMode(controller);
}

function initPhysics() {
	space = new cp.Space();
	space.gravity = cp.v(0, -800);
	space.iterations = 30;
	space.sleepTimeThreshold = Infinity;
	space.collisionSlop = Infinity;
}

function initDebugMode(controller) {
	var phDebugNode = cc.PhysicsDebugNode.create(space);
	controller.addChild(phDebugNode, 10);
}

var updateStepValue = 60;
function update() {
	space.step(1/updateStepValue);
}

Finished!

Your scene should look like that ­čśÇ Don’t worry.┬áBy now you can’t see anything but trust me, the physics space has been successfully initialised.

Physics scene

Great! Now you have ready physics space to put physics bodies in. I will write about it in our next tutorial. See ya!

Source: https://bitbucket.org/galante/chipmunktutorialresources/commits/branch/master