添加Chipmunk物理引擎在我们的游戏世界里
一、简介

cocos2dJS能给我们力量来创造令人印象深刻的游戏世界。但缺乏某种现实。
虽然我们可以做复杂的计算，使游戏世界更真实的，但有另一个选择
它可以缓解我们的生活。答案是物理引擎。
物理引擎提供了重力，碰撞检测和物理模拟，可以使我们的游戏世界看起来更真实。
在本教程中，我们将介绍的ChipMunk的物理引擎进入我们的跑酷游戏。
二、为什么是ChipMunk物理引擎

我们为什么要选择ChipMunk的物理引擎？因为它给了我们比其他任何2D物理引擎更多的权力。
虽然使用ChipMunk的物理引擎，但是我们还有另一种选择——Box2D。
Box2D是一个很好的2D物理引擎，它已经存在了很长一段时间。许多2D游戏已经使用Box2D物理为他们的游戏。
但ChipMunk有它自己的优点。你可以去ChipMunk的网站获取更多的信息。
三、在Cocos2d-js中开启物理引擎
准备
首先，让我们开启ChipMunk物理引擎
打开project.json文件
将下面的项改成

"modules":["cocos2d"],改成


"modules":["cocos2d","chipmunk"],

因此，当cocos2dJS完成开启，它将自动导入ShipMunk物理引擎库。
接下来，让我们创建一个新的文件名为globals.js和添加两个全局变量到它。
varg_groundHight=57;
varg_runnerStartX=80;
最后，我们应该告诉框架加载文件时，引擎启动globals.js。
附加globals.js路径到jslist阵列的末端：

"jsList":[
"src/resource.js",
"src/app.js",
"src/AnimationLayer.js",
"src/BackgroundLayer.js",
"src/PlayScene.js",
"src/StatusLayer.js",
"src/globals.js"

]注意：当你要加新的类文件到Cocos2d-js是你应该记得加载新的类文件到

jsList
列表中

四、初始化Chipmunk物理世界
在ChipMunk中，有一个空间对象来表示物理世界。
首先，让我们添加一个新的成员变量playscene.js文件命名空间：
space:null,
一般来说，一场比赛只需要一个空间对象。空间对象可以通过不同层次的共享。
我们通常把空间playscene初始化代码。
下面的代码设置物理世界：
//initspaceofchipmunk
initPhysics:function(){
//1.newspaceobject
this.space=newcp.Space();
//2.setuptheGravity
this.space.gravity=cp.v(0,-350);

//3.setupWalls
varwallBottom=newcp.SegmentShape(this.space.staticBody,
cp.v(0,g_groundHight),//startpoint
cp.v(4294967295,//MAXINT:4294967295
0);//thicknessofwall
this.space.addStaticShape(wallBottom);
},
上面的代码是自解释的，我们可以安全地离开了。如果你想知道这些API的细节，你应该
指的是ChipMunk的官方文件的更多信息。
接下来，让我们确定我们的游戏主循环：
update:function(dt){
//chipmunkstep
this.space.step(dt);
}
在更新的功能，我们告诉ChipMunk开始模拟物理。
在我们继续之前，让我们添加一个微小的变化，animationlayer。因为我们将在animationlayer创建物理的演员，所以
我们应该修改animationlayer构造函数通过空间对象。
ctor:function(space){
this._super();
this.space=space;
this.init();
},
当然，我们应该定义一个弱引用成员变量在animationlayer并初始化为空。
因此我们的准备工作已经完成了。让我们把端和调用这些方法在onenter功能：
onEnter:function(){
this._super();
this.initPhysics();

this.addChild(newBackgroundLayer());
this.addChild(newAnimationLayer(this.space));
this.addChild(newStatusLayer());

this.scheduleUpdate();
},注意：你应该初始化物理空间并加载它到AnimationLayer中。
五、添加物理组件到人物精灵

在上个教程，我们用spritsheet创建人物。在本节中，我们将改写人物用physicssprite。
这是一个可重用的组件，可以physicssprite物理身体与Cocos2D精灵结合。
下面的代码来创建physicssprite人物：
//1.createPhysicsSpritewithaspriteframename
this.sprite=cc.PhysicsSprite.create("#runner0.png");
varcontentSize=this.sprite.getContentSize();
//2.inittherunnerphysicbody
this.body=newcp.Body(1,cp.momentForBox(1,contentSize.width,contentSize.height));
//3.setthepositionoftherunner
this.body.p=cc.p(g_runnerStartX,g_groundHight+contentSize.height/2);
//4.applyimpulsetothebody
this.body.applyImpulse(cp.v(150,0),cp.v(0,0));//runspeed
//5.addthecreatedbodytospace
this.space.addBody(this.body);
//6.createtheshapeforthebody
this.shape=newcp.BoxShape(this.body,contentSize.width-14,contentSize.height);
//7.addshapetospace
this.space.addShape(this.shape);
//8.setbodytothephysicsprite
this.sprite.setBody(this.body);
代码和注释的自我解释。
在
animationlayer
的init
方法
添加这些
代码
。

六、调试和测试
祝贺你。你可以按下Debug按钮在webstorm。
现在你可以看到精灵从屏幕上跑过去了！ 七、总结 在本教程中，我们已经向您展示如何设置的ChipMunk的物理世界，如何建立物理世界的界限，如何创建一个刚体和与之相关的 形状。我们还添加了物理学的精灵使其行为更现实。你可以在这里http://cocos2d-x.org/docs/tutorial/framework/html5/parkour-game-with-javascript-v3.0/chapter6/res/Parkour.zip获得完整的源代码。 八、接下来我们怎么做 在下一个教程中，我们将介绍摄像机运动进入游戏。我们也将与tiledmap取代背景图像。 更重要的是，我们会使背景无限循环的在游戏中显示。