(转)CocosCreator零基础制作游戏《极限跳跃》六、制作游戏障碍物实现碰撞检测

CocosCreator零基础制作游戏《极限跳跃》六、制作游戏障碍物实现碰撞检测

前面我们实现了背景和主角的操作,下面我们开始添加游戏的障碍物以及碰撞检测的功能。

一、制作障碍物Prefab(预制)

Prefab(预制)是cocoscreator官方文档提出的,是为了解决需要重复使用的节点问题。

如何制作预制体prefab呢?具体可以参照官方文档,这里简单的说下,就是在场景中编辑好节点后,直接将节点从 层级管理器 拖到 资源管理器 中即可。

我们来看下极限跳跃的游戏截图分析下。。

游戏中障碍物我们分为2种,一个是向左移动的,一个是向右移动的,这里我就简单省事了,直接创建了2个预制体,每个预制体实现自己的脚本。可以集成在一起的。

我们先制作左边的障碍物,首先把障碍物素材拖进层级管理器取名zhangaiwu1。然后我们来实现并制作左边的脚本,创建脚本guawuleft。实现代码。

01 //guaiwuleft.js
02 cc.Class({
03     extends: cc.Component,
04     properties: {
05          
06         times: 0,//控制时间
07          
08         },
09     },
10     onLoad: function () {
11        
12         this.moveRight();
13     },
14 //左右移动
15     moveRight: function(){
16          
17         var seq = cc.repeatForever(
18              cc.sequence(
19                  cc.moveBy(this.times, cc.p(240, 0)), cc.moveBy(this.times, cc.p(-240,0))
20              ));
21         this.node.runAction(seq);
22     },

脚本写好了,我们对节点进行绑定。

绑定好后,我们把层级管理器中的节点zhangaiwu1拖进我们资源管理器的Texture文件夹中,成功后我们的层级管理器中的节点就会变成蓝色,同时我们会在资源管理器中得到一个预制体文件zhangaiwu1,我们这里改成zhangaiwuleft,方便和辨认。

预制体文件zhangaiwu1,我们这里改成zhangaiwuleft。然后删除层级管理器的zhangaiwu1节点。使用同样的方法,我们创建脚本zhangaiwuright,并制作预制体zhangaiwuright。

01 //guawuright.js
02 cc.Class({
03     extends: cc.Component,
04     properties: {
05          
06         times: 0,//控制时间
07          
08         },
09     },
10     onLoad: function () {
11        
12         this.moveRight();
13     },
14     //左右移动
15     moveRight: function(){
16          
17          
18         var seq = cc.repeatForever(
19              cc.sequence(
20                  cc.moveBy(this.times, cc.p(-240, 0)), cc.moveBy(this.times,cc.p(240,0))
21              ));
22        this.node.runAction(seq);
23     },

这样我们就制作好了2个预制体,分别为zhangaiwuleft和 zhangaiwuright。可以在资源管理器中看到。

制作好了2个障碍物,我们开始在场景中添加我们的障碍物了。

分析下游戏我们可以发现障碍物是可以根据游戏背景移动的,所以我们要把障碍物添加到背景上。

我们开始制作背景bg1的障碍物,首先把zhangaiwuleft和zhangaiwuright两个预制体拖到层级管理器bg1节点,使其成为bg1的子节点。布局时候把zhangaiwuleft放到屏幕左边,zhangaiwuright放到右边,调整位置。同样的方法给bg2添加障碍物。。如图:

通过我们给不同高度的障碍物设置不同的移动时间,我们的游戏看起来更好玩,来运行测试下效果。

好了。我们的游戏看起来还不错吧,下面我们来做碰撞检测,也就是说如果玩家和障碍物碰到了,那么我们的角色就会死掉,游戏就会结束。结束场景等会我们在做,现在我们先做碰撞检测,如果碰到障碍物我们停止触摸来达到玩家不可操作的目的。

打开guaiwuleft脚本,来给左边的障碍物添加碰撞检测的事件。

01 //guaiwuleft.js
02 var hero2 = require("HeroPlayer");//引用玩家的操作脚本
03 //....省略..
04 //当前节点世界坐标系下的范围包围盒
05  noteBox: function(){
06          
07         return this.node.getBoundingBoxToWorld();
08         
09     },  
10      
11     // called every frame, uncomment this function to activate update callback
12     update: function (dt) {
13          
14         var _label = cc.find("Canvas/hero").getComponent(hero2);
15          
16       //障碍物碰撞框
17     if(cc.rectIntersectsRect(_label.node.getBoundingBoxToWorld(), this.noteBox())){
18              
19            cc.eventManager.removeAllListeners();//移除所有事件监听
20                  
21             }
22          
23     },

同样的方法,我们在guaiwuright中添加碰撞事件。天下代码一大抄,直接抄过去就行了。

我们在此运行检测下。。

我们的角色被障碍物碰到,就死掉了,然后就会屏蔽游戏的触摸事件,玩家角色开始掉落。当角色掉落到屏幕底部时候游戏结束。会切换到结束场景。这里大家看到角色掉没了,不要在意这些细节。。我们接下来开始制作结束场景。

原文地址:https://www.byjth.com/jixiantiaoyue/71.html

原文地址:https://www.cnblogs.com/wodehao0808/p/9122833.html

时间: 2024-08-30 01:09:15

(转)CocosCreator零基础制作游戏《极限跳跃》六、制作游戏障碍物实现碰撞检测的相关文章

(转)CocosCreator零基础制作游戏《极限跳跃》一、游戏分析

CocosCreator零基础制作游戏<极限跳跃>一.游戏分析 无意中发现了小游戏<极限跳跃>感觉挺有意思的,正好这段时间和朋友讨论准备用js还是unity做小游戏,初定用js,使用CocosCreator,于是我拿这款游戏练手,准备一天时间做出来,结果一天只完成了四分之三,后面又用了几个晚上,加碰撞检测,加声音音效..把这游戏的制作记录下. 1.吐槽加游戏分析 http://www.byjth.com/CocosCreator/66.html 2.制作游戏开始场景 http://

(转)CocosCreator零基础制作游戏《极限跳跃》二、制作游戏开始场景

CocosCreator零基础制作游戏<极限跳跃>二.制作游戏开始场景 我们刚刚分析了<极限跳跃>这款游戏,下面我们开始制作第一个游戏场景,也就是游戏的开始场景. 首先,打开CocosCreator,新建HelloWorld项目.选择项目路径,输入项目名称"jxty",点击新建项目. 新建好项目,项目会自动打开.这里大家可以看下官方的文档,了解 下编辑器的功能和用法. 资源管理器里显示了项目资源文件夹(assets)中的所有资源.这里会以树状结构显示文件夹并自动

(转)CocosCreator零基础制作游戏《极限跳跃》九、为游戏添加声音音效功能

CocosCreator零基础制作游戏<极限跳跃>九.为游戏添加声音音效功能 游戏的声音很重要,我们在这个游戏中需要加2个音效,一个背景音乐...第一个音效在玩家与障碍物碰撞的地方加碰撞音效,第二个在玩家主角坠落到屏幕底部的时候加游戏结束的音效.然后游戏开始的时候加载背景音乐. 我们一开始在MainScene场景中的声音图标节点就是我们用来控制声音的开关.. 首先修改guawileft.js脚本,添加音效资源,在onload设置声音大小.代码: 01 //guanwileft.js 02  

(转)CocosCreator零基础制作游戏《极限跳跃》四、添加游戏主场景控制脚本

CocosCreator零基础制作游戏<极限跳跃>四.添加游戏主场景控制脚本 前面简单的实现了主界面的UI设置,现在我们开始制作游戏的控制脚本. 在资源管理器的Script文件夹中,点击右键新建javascript文件,命名为GAME. 双击打开GAME脚本,在properties: 中添加属性代码. 01 //GAME.js 02   03 cc.Class({ 04     extends: cc.Component, 05     properties: { 06       07   

(转)CocosCreator零基础制作游戏《极限跳跃》三、制作游戏主场景

CocosCreator零基础制作游戏<极限跳跃>三.制作游戏主场景 刚刚我们制作了游戏的开始场景,现在我们来制作游戏的主场景.还是同样的方法,新建一个名为MainScene的场景,双击打开,修改场景的大小为480x800. 1.首先贴入游戏背景,在此我们使用了2张背景图,只需要把背景拖进层级管理器2次,修改名称为bg1,bg2即可,背景2接着背景1点上方设置位置. 2.摆放玩家主角在屏幕合适位置 3.添加金币按钮在屏幕上方 4.右键Canvas画布=>创建节点=>创建渲染节点=&

(转)CocosCreator零基础制作游戏《极限跳跃》八、添加游戏积分系统

CocosCreator零基础制作游戏<极限跳跃>八.添加游戏积分系统 前面我们实现了整个游戏的流程,下面我们来完善游戏的积分系统..先来分析下游戏的积分,第一次展示积分的地方就是我们的游戏主场景MainScene,玩家通过一些机制来获取积分,实现积分的更新,当玩家游戏结束后展示玩家所获的的当前积分. 我们一开始制作游戏场景的时候就制作了一个积分节点score,其string属性值为0.打开GAME.js脚本可以发现,一开始的时候我们onLoad方法就初始化了积分. 接着我们在GAME.js脚

(转)CocosCreator零基础制作游戏《极限跳跃》七、制作游戏结束场景并实现场景切换

CocosCreator零基础制作游戏<极限跳跃>七.制作游戏结束场景并实现场景切换 前面我们实现了游戏的碰撞检测,碰到障碍物我们的角色就会死掉并开始掉落,角色掉落到屏幕底部时候游戏结束,并跳到结束场景. 我们在资源管理器新建GameOver场景.双击打开场景,调整大小为480x800,添加界面需要的节点.如图. 这样我们的结束场景就制作好了.可以预览下. 制作好了,结束场景我们就需要把我们游戏的三个场景关联起来了. 首先我们双击打开我们的第一个场景WelcomeScene.然后在资源管理器创

(转)CocosCreator零基础制作游戏《极限跳跃》十、游戏打包发布,游戏复总结

1.吐槽加游戏分析 http://www.byjth.com/CocosCreator/66.html 2.制作游戏开始场景 http://www.byjth.com/CocosCreator/67.html 3.制作游戏主场景 http://www.byjth.com/CocosCreator/68.html 4.添加游戏主场景控制脚本 http://www.byjth.com/CocosCreator/69.html 5.制作游戏主场景背景滚动 http://www.byjth.com/Co

最完整的网狐棋牌-新手零基础教程 第一节:棋牌游戏的服务器基本环境的安装

最完整的网狐棋牌-新手零基础教程 第一节:棋牌游戏的服务器基本环境的安装 百度云在线播放地址:http://pan.baidu.com/s/1pJwO50R 密码:t0sm  解压密码:www.ttkmwl.com ----------------------------------------------------------------- 通天源码论坛!专注源码分享,本论坛不仅有web源码,还有棋牌源码,游戏源码,android源码! 致力于打造中国最大的源码分享平台!我们期待您的加入!只