六）在我们的游戏中添加Chipmunk 物理引擎

zeroyang 2014-09-22
10:12:266769 次阅读

介绍

Cocos2d-JS 能赋予我们创建令人印象深刻的游戏世界的能力。但它缺少了真实性。尽管我们能够处理复杂的运算来使得游戏更加真实，但有一种更轻松的方式来完成这个任务。回答是，物理引擎。

物理引擎提供重力、碰撞检测以及模拟物理场景，它们会让我们的游戏世界看上去更加真实。

在这篇教程中，我们将会在我们的parkour游戏中介绍Chipmunk物理引擎。

为什么选择Chipmunk？

为什么我们应该选择Chipmunk物理引擎？因为它相比其他的2D物理引擎，能赋予我们更多的力量。

除了Chipmunk物理引擎外，还有别的选项——Box2D。

Box2D是一个优秀的物理引擎，它存在了很长一段时间。很多2D游戏都采用了Box2D作为自己的物理引擎。

但Chipmunk有它自己的优势。你可以浏览Chipmunk的网站查阅更多的信息。

在Cocos2d-JS中激活Chipmunk

准备工作

首先，让我们在Cocos2d-JS中激活Chipmunk。

打开 project.json 文件，然后作如下修改：

将

改为:

这样，当Cocos2d-JS启动的时候，它会自动将在Chipmunk库。

然后，让我们创建一个名叫globals.js的新文件，并在里面添加两个全局变量。

最后，我们应该告诉框架在启动后，去加载globals.js文件。 在jsList数组的最后，添加globals.js的路径：

注意： 任何时候你在Cocos2d-JS里添加了一个新的文件，你要记得把它添加到jsList数组中。

初始化Chipmunk 物理世界

在Chipmunk中，用一个space 对象来表示物理世界。

首先，让我们添加一个名叫space的新成员变量到PlayScene.js文件中：

总的来说，一个游戏只需要一个space对象。space对象可以被不同的层所共享。我们经常把space对象的初始化代码 放在PlayScene。

以下是设置物理世界的代码：

上述的代码能够很好的解释它们的用途，所以我们可以把它们保持原样。如果你想要了解这些API的细节，你应该查阅Chipmunk的官方文档来获取更多信息。

在update函数中，我们告诉Chipmunk让它开始模拟物理场景。

在教程往下走之前，让我们在AnimationLayer增加一个小小的改动。既然我们将要在AnimationLayer里创建演员，所以我们应该修改AnimationLayer的构造器，让我们能传递space对象参数。

当然我们应该在AnimationLayer里定义一个弱引用成员变量，并把它初始化为null。

我们的准备工作到这里就结束了。让我们最后在onEnter函数里调用：

注意：你必须初始化物理引擎的space变量并将它传递到AnimationLayer中去。

在Runner 精灵中添加物理组件

在上一篇教程中，我们通过spritsheet创建了runner精灵。在这一节中，我们将要使用PhysicsSprite对runner进行重写。

PhysicsSprite是一个可重用的组件，它能够将cocos2d精灵和物理body组合关联在一起。

以下是使用PhysicsSprite创建runner的代码：

代码和注释都很容易看明白。把这些代码添加到AnimationLayer的init方法中去。

调试和测试

恭喜！你完成了的细节了。你可以在Cocos Code IDE里面按下debug按钮



现在你可以看到runner在屏幕上跑动了。

总结

在这篇教程中，我们向你展示了如何设置Chipmunk物理世界，如何设置物理世界的边界，如何创建一个刚性的body和与其关联的shape。我们把物理属性添加到精灵上让它显得更真实。你可以在这里获得完整的代码。

下一步

在下一篇教程中，我们将会介绍游戏里面摄像机(camera)的移动。然后我们也将会使用tiledMap代替背景图片。更重要的是，我们会使得游戏中得背景循环。在下一篇教程再见。