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

http://www.58player.com/blog-2535-96918.html

已有 1046 次阅读2014-8-23
03:29 |系统分类:Cocos2d| 手游研发

        添加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取代背景图像。 

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