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取代背景图像。 
         更重要的是,我们会使背景无限循环的在游戏中显示。

时间: 2024-10-12 12:48:37

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

Quick-Cocos2d-x初学者游戏教程(六) --------------------- 游戏逻辑

Quick-Cocos2d-x初学者游戏教程(六) 上一章我 们介绍了开发中会用到的辅助工具,并创建了 GameScene 场景,接下来这章我们将继续 GameScene 的传(bai)奇(bi).不过在开始编写 GameScene 场景的代码之前,我们还是先来明确一下游戏的功能和实现方法.这样可以帮我们更好的理解并设计逻辑.下面是总结出的结论: 在 GameScene 场景中,我们将创建一个飞行的娃娃角色,这个角色是游戏的唯一主角.游戏初始状态下,这个角色有满满的生命值,但随着时间的推移,生命

[ionic开源项目教程] - 第9讲 新闻详情页的实现

目录 [ionic开源项目教程] 第1讲 前言,技术储备,环境搭建,常用命令 [ionic开源项目教程] 第2讲 新建项目,架构页面,配置app.js和controllers.js [ionic开源项目教程] 第3讲 使用Tabs和SlideBox实现左右滑动菜单 [ionic开源项目教程] 第4讲 通过Service层获取新闻列表 [ionic开源项目教程] 第5讲 如何在项目中使用全局配置 [ionic开源项目教程] 第6讲 过滤器filter的使用 [ionic开源项目教程] 第7讲 实现

[ionic开源项目教程] - 第10讲 新闻详情页的用户体验优化

目录 [ionic开源项目教程] 第1讲 前言,技术储备,环境搭建,常用命令 [ionic开源项目教程] 第2讲 新建项目,架构页面,配置app.js和controllers.js [ionic开源项目教程] 第3讲 使用Tabs和SlideBox实现左右滑动菜单 [ionic开源项目教程] 第4讲 通过Service层获取新闻列表 [ionic开源项目教程] 第5讲 如何在项目中使用全局配置 [ionic开源项目教程] 第6讲 过滤器filter的使用 [ionic开源项目教程] 第7讲 实现

[ionic开源项目教程] - 第11讲 封装BaseController实现controller继承

关注微信订阅号:TongeBlog,可查看[ionic开源项目]全套教程. 截止到第10讲,tab1[健康]模块的功能基本已经完成了,但这一讲中,controller层又做了较大的改动,因为下一讲中tab2[医疗]模块的实现跟tab1类似,考虑到不让代码冗余,这里使用BaseCtrl将公共代码提取出来作为controller的基类,供其它模块使用,提取后的[健康]模块也对应有所改动. 目录 [ionic开源项目教程] 第1讲 前言,技术储备,环境搭建,常用命令 [ionic开源项目教程] 第2讲

Cocos2d-x教程(30)-3.x版本号物理引擎的使用

欢迎加入Cocos2d-x 交流群:193411763 转载时请注明原文出处 : http://blog.csdn.net/u012945598/article/details/38417333 在Cocos2d-x 2.x的版本号中,开发人员能够直接使用Box2d或chipmunk进行物理世界的模拟. 在第17篇教程(http://blog.csdn.net/u012945598/article/details/17787243)我们也以前介绍过Box2d物理引擎的使用,可是Box2d中的ap

JS正则表达式完整教程(略长)

JS正则表达式完整教程(略长) 引言 亲爱的读者朋友,如果你点开了这篇文章,说明你对正则很感兴趣. 想必你也了解正则的重要性,在我看来正则表达式是衡量程序员水平的一个侧面标准. 关于正则表达式的教程,网上也有很多,相信你也看了一些. 与之不同的是,本文的目的是希望所有认真读完的童鞋们,都有实质性的提高. 本文内容共有七章,用JavaScript语言完整地讨论了正则表达式的方方面面. 如果觉得文章某块儿没有说明白清楚,欢迎留言,能力范围之内,老姚必做详细解答. 具体章节如下: 引言 第一章 正则表

QML官方教程翻译——Use Case - Integrating JavaScript in QML

附网址:http://qt-project.org/doc/qt-5/qtquick-usecase-integratingjs.html Use Case - Integrating JavaScript in QML -- 在QML中集成JavaScript代码 JavaScript代码可以很容易被集成到QML中以提供UI逻辑,必要的控制,或是其他益处. Using JavaScript Expressions for Property Values -- 使用JavaScript表达式表示

OpenGL教程翻译 第十六课 基本的纹理贴图

OpenGL教程翻译 第十六课 基本的纹理贴图 原文地址:http://ogldev.atspace.co.uk/(源码请从原文主页下载) Background 纹理贴图就是将任意一种类型的图片应用到3D模型的一个或多个面.图片(也可以称之为纹理)内容可以是任何东西,但是他们一般都是一些比如砖,叶子,地面等的图案,纹理贴图增加了场景的真实性.例如,对比下面的两幅图片. 为了进行纹理贴图,你需要进行三个步骤:将图片加载到OpenGl中,定义模型顶点的纹理坐标(以对其进行贴图),用纹理坐标对图片进行

Qt官方教程翻译——First Steps with QML

附网址:http://qt-project.org/doc/qt-5/qmlfirststeps.html Creating a QML Document 一个QML文件定义了对象的层次结构:具有高度可读的,结构化的布局.每个QML文件由两部分组成:一个引入(import)部分,以及一个对象声明(declaration)部分.用户界面中最常用的的类型(types)和功能由引入QtQuick提供. Importing and Using the QtQuick Module 为了使用Qt Quic