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取代背景图像。
更重要的是,我们会使背景无限循环的在游戏中显示。
Cocos2d-js官方完整项目教程翻译:六、添加Chipmunk物理引擎在我们的游戏世界里的更多相关文章
- three.js cannon.js物理引擎制作一个保龄球游戏
关于cannon.js我们已经学习了一些知识,今天郭先生就使用已学的cannon.js物理引擎的知识配合three基础知识来做一个保龄球小游戏,效果如下图,在线案例请点击博客原文. 我们需要掌握的技能 ...
- [ionic开源项目教程] - 手把手教你使用移动跨平台开发框架Ionic开发一个新闻阅读APP
前言 这是一个系列文章,从环境搭建开始讲解,包括网络数据请求,将持续更新到项目完结.实战开发中遇到的各种问题的解决方案,也都将毫无保留的分享给大家. 关注订阅号:TongeBlog ,查看移动端跨平台 ...
- [ionic开源项目教程] - 第11讲 封装BaseController实现controller继承
关注微信订阅号:TongeBlog,可查看[ionic开源项目]全套教程. 截止到第10讲,tab1[健康]模块的功能基本已经完成了,但这一讲中,controller层又做了较大的改动,因为下一讲中t ...
- [ionic开源项目教程] - 第10讲 新闻详情页的用户体验优化
目录 [ionic开源项目教程] 第1讲 前言,技术储备,环境搭建,常用命令 [ionic开源项目教程] 第2讲 新建项目,架构页面,配置app.js和controllers.js [ionic开源项 ...
- [ionic开源项目教程] - 第9讲 新闻详情页的实现
目录 [ionic开源项目教程] 第1讲 前言,技术储备,环境搭建,常用命令 [ionic开源项目教程] 第2讲 新建项目,架构页面,配置app.js和controllers.js [ionic开源项 ...
- 《Genesis-3D开源游戏引擎完整实例教程-2D射击游戏篇04:碰撞检测》
4.碰撞检测 碰撞概述: 游戏世界里,游戏对象不能做出如同在真实世界里的物理运动效果.对于大部分游戏来说,都要为其添加物理系统,让其可以模拟真实世界发生的物理运动.但是在这个打飞机游戏Demo中,是用 ...
- Cocos2d-x教程(30)-3.x版本号物理引擎的使用
转载时请注明原文出处 : http://blog.csdn.net/u012945598/article/details/38417333 在Cocos2d-x 2.x的版本号中,开发人员能够直接使用 ...
- 《Genesis-3D开源游戏引擎--横版格斗游戏制作教程03:碰撞检测》
3.碰撞检测 碰撞检测的概述: 碰撞在物理学中表现为两粒子或物体间极端的相互作用.而在游戏世界中,游戏对象在游戏世界自身并不受物理左右,为了模拟真实世界的效果,需要开发者为其添加属性,以模拟真实事件的 ...
- 造个海洋球池来学习物理引擎【Three.js系列】
github地址:https://github.com/hua1995116/Fly-Three.js 大家好,我是秋风.继上一篇<Three.js系列: 游戏中的第一/三人称视角>今 ...
随机推荐
- python中mp3转wav(Couldn't find ffmpeg or avconv - defaulting to ffmpeg, but may not work")
1.下载pydub:pip install pydub 2.下载与操作系统一致的ffmpeg:http://ffmpeg.org/download.html 3.解压后将下载的ffmpeg下的bin目 ...
- getServletConfig().getInitParameter("count1") java.lang.NullPointerException
通常在doget中 System.out.println(getServletConfig()); System.out.println(getServletConfig().getInitParam ...
- Protobuf C#
// ProtoBuf序列化 using(var file = System.IO.File.Create("Person.bin")) ...
- weblogic的集群与配置图文方法
一.Weblogic的集群 还记得我们在第五天教程中讲到的关于Tomcat的集群吗? 两个tomcat做node即tomcat1, tomcat2,使用Apache HttpServer做请求派发 ...
- 【转】如何利用多核CPU来加速你的Linux命令 — awk, sed, bzip2, grep, wc等
如何利用多核CPU来加速你的Linux命令 — awk, sed, bzip2, grep, wc等 你是否曾经有过要计算一个非常大的数据(几百GB)的需求?或在里面搜索,或其它操作——一些无法并 ...
- PowerDesigner16 安装包及破解文件
一.准备工作 PowerDesigner16 安装包:http://pan.baidu.com/s/11Qv9H 或http://cloud.suning.com/cloud-web/share/li ...
- Android5 Zygote 与 SystemServer 启动流程分析
Android5 Zygote 与 SystemServer 启动流程分析 Android5 Zygote 与 SystemServer 启动流程分析 前言 zygote 进程 解析 zygoterc ...
- 跨域问题解决方式(HttpClient安全跨域 & jsonp跨域)
1 错误场景 今天要把项目部署到外网的时候,出现了这种问题, 我把两个项目放到自己本机的tomcat下, 进行代码调试, 执行 都没有问题的, 一旦把我须要调用接口的项目B放到其它的server上, ...
- Foreach嵌套Foreach速度慢优化方案
有时候这样的效率还可以,但是只要牵涉到操作数据库,那就GAMEOVER.. 最近在维护项目,一个Foreach循环,4分半才能出来结果. 代码: foreach ($content as $key = ...
- nginx+keepalived实现双机热备高可用性
搭建准备: 机器两台 ip分别为192.168.100.128 192.168.100.129(能够用虚拟机測试.虚拟机网络模式为NET模式.且为静态ip) 另外须要准备一个虚拟ip对外提供服务.即通 ...