Cocos2d-js官方完整项目教程翻译:六、添加Chipmunk物理引擎在我们的游戏世界里

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

一、简介

cocos2d JS能给我们力量来创造令人印象深刻的游戏世界。但缺乏某种现实

虽然我们可以做复杂的计算,使游戏世界更真实的但有另一个选择

它可以缓解我们的生活。答案是物理引擎

物理引擎提供了重力碰撞检测和物理模拟,可以使我们的游戏世界看起来更真实

在本教程中我们将介绍的ChipMunk的物理引擎进入我们的跑酷游戏

二、为什么是ChipMunk物理引擎

我们为什么要选择ChipMunk的物理引擎?因为它给了我们比其他任何2D物理引擎更多的权力

虽然使用ChipMunk的物理引擎,但是我们还有另一种选择——Box2D

Box2D是一个很好的2D物理引擎,它已经存在了很长一段时间。许多2D游戏已经使用Box2D物理为他们的游戏

但ChipMunk有它自己的优点。你可以去ChipMunk的网站获取更多的信息

三、在Cocos2d-js中开启物理引擎

准备

首先,让我们开启ChipMunk物理引擎

打开project.json文件

将下面的项改成

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

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

因此cocos2d JS完成开启自动导入ShipMunk物理引擎库

接下来,让我们创建一个新的文件名为globals.js添加两个全局变量到它

var g_groundHight = 57;
var g_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初始化代码

下面的代码设置物理世界

// init space of chipmunk
    initPhysics:function() {
        //1. new space object 
        this.space = new cp.Space();
        //2. setup the  Gravity
        this.space.gravity = cp.v(0, -350);

        // 3. set up Walls
        var wallBottom = new cp.SegmentShape(this.space.staticBody,
            cp.v(0, g_groundHight),// start point
            cp.v(4294967295, g_groundHight),// MAX INT:4294967295
            0);// thickness of wall
        this.space.addStaticShape(wallBottom);
    },

上面的代码是自解释的,我们可以安全地离开了。如果你想知道这些API的细节你应该

指的是ChipMunk的官方文件的更多信息

接下来,让我们确定我们的游戏主循环

  update:function (dt) {
        // chipmunk step
        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(new BackgroundLayer());
        this.addChild(new AnimationLayer(this.space));
        this.addChild(new StatusLayer());

        this.scheduleUpdate();
    },
注意:你应该初始化物理空间并加载它到AnimationLayer中。

五、添加物理组件到人物精灵

在上个教程,我们用spritsheet创建人物在本节中我们将改写人物physicssprite

一个可重用的组件可以physicssprite物理身体与Cocos2D精灵结合

下面的代码创建physicssprite人物

//1. create PhysicsSprite with a sprite frame name
        this.sprite = cc.PhysicsSprite.create("#runner0.png");
        var contentSize = this.sprite.getContentSize();
        // 2. init the runner physic body
        this.body = new cp.Body(1, cp.momentForBox(1, contentSize.width, contentSize.height));
        //3. set the position of the runner
        this.body.p = cc.p(g_runnerStartX, g_groundHight + contentSize.height / 2);
        //4. apply impulse to the body
        this.body.applyImpulse(cp.v(150, 0), cp.v(0, 0));//run speed
        //5. add the created body to space
        this.space.addBody(this.body);
        //6. create the shape for the body
        this.shape = new cp.BoxShape(this.body, contentSize.width - 14, contentSize.height);
        //7. add shape to space
        this.space.addShape(this.shape);
        //8. set body to the physic sprite
        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取代背景图像

更重要的是,我们会使背景无限循环的在游戏中显示。


你可能感兴趣的:(JavaScript,js,游戏,cocos2d,canvas)