creator 跳跃弧线_CocosCreator零基础制作游戏《极限跳跃》六、制作游戏障碍物实现碰撞检测...
CocosCreator零基础制作游戏《极限跳跃》六、制作游戏障碍物实现碰撞检测
前面我们实现了背景和主角的操作,下面我们开始添加游戏的障碍物以及碰撞检测的功能。
一、制作障碍物Prefab(预制)
Prefab(预制)是cocoscreator官方文档提出的,是为了解决需要重复使用的节点问题。
如何制作预制体prefab呢?具体可以参照官方文档,这里简单的说下,就是在场景中编辑好节点后,直接将节点从层级管理器拖到资源管理器 中即可。
我们来看下极限跳跃的游戏截图分析下。。
游戏中障碍物我们分为2种,一个是向左移动的,一个是向右移动的,这里我就简单省事了,直接创建了2个预制体,每个预制体实现自己的脚本。可以集成在一起的。
我们先制作左边的障碍物,首先把障碍物素材拖进层级管理器取名zhangaiwu1。然后我们来实现并制作左边的脚本,创建脚本guawuleft。实现代码。//guaiwuleft.js
cc.Class({
extends: cc.Component,
properties: {
times: 0,//控制时间
},
},
onLoad: function () {
this.moveRight();
},
//左右移动
moveRight: function(){
var seq = cc.repeatForever(
cc.sequence(
cc.moveBy(this.times, cc.p(240, 0)), cc.moveBy(this.times, cc.p(-240,0))
));
this.node.runAction(seq);
},
脚本写好了,我们对节点进行绑定。
绑定好后,我们把层级管理器中的节点zhangaiwu1拖进我们资源管理器的Texture文件夹中,成功后我们的层级管理器中的节点就会变成蓝色,同时我们会在资源管理器中得到一个预制体文件zhangaiwu1,我们这里改成zhangaiwuleft,方便和辨认。
预制体文件zhangaiwu1,我们这里改成zhangaiwuleft。然后删除层级管理器的zhangaiwu1节点。使用同样的方法,我们创建脚本zhangaiwuright,并制作预制体zhangaiwuright。//guawuright.js
cc.Class({
extends: cc.Component,
properties: {
times: 0,//控制时间
},
},
onLoad: function () {
this.moveRight();
},
//左右移动
moveRight: function(){
var seq = cc.repeatForever(
cc.sequence(
cc.moveBy(this.times, cc.p(-240, 0)), cc.moveBy(this.times,cc.p(240,0))
));
this.node.runAction(seq);
},
这样我们就制作好了2个预制体,分别为zhangaiwuleft和 zhangaiwuright。可以在资源管理器中看到。
制作好了2个障碍物,我们开始在场景中添加我们的障碍物了。
分析下游戏我们可以发现障碍物是可以根据游戏背景移动的,所以我们要把障碍物添加到背景上。
我们开始制作背景bg1的障碍物,首先把zhangaiwuleft和zhangaiwuright两个预制体拖到层级管理器bg1节点,使其成为bg1的子节点。布局时候把zhangaiwuleft放到屏幕左边,zhangaiwuright放到右边,调整位置。同样的方法给bg2添加障碍物。。如图:
通过我们给不同高度的障碍物设置不同的移动时间,我们的游戏看起来更好玩,来运行测试下效果。
好了。我们的游戏看起来还不错吧,下面我们来做碰撞检测,也就是说如果玩家和障碍物碰到了,那么我们的角色就会死掉,游戏就会结束。结束场景等会我们在做,现在我们先做碰撞检测,如果碰到障碍物我们停止触摸来达到玩家不可操作的目的。
打开guaiwuleft脚本,来给左边的障碍物添加碰撞检测的事件。//guaiwuleft.js
var hero2 = require("HeroPlayer");//引用玩家的操作脚本
//....省略..
//当前节点世界坐标系下的范围包围盒
noteBox: function(){
return this.node.getBoundingBoxToWorld();
},
// called every frame, uncomment this function to activate update callback
update: function (dt) {
var _label = cc.find("Canvas/hero").getComponent(hero2);
//障碍物碰撞框
if(cc.rectIntersectsRect(_label.node.getBoundingBoxToWorld(), this.noteBox())){
cc.eventManager.removeAllListeners();//移除所有事件监听
}
},
同样的方法,我们在guaiwuright中添加碰撞事件。天下代码一大抄,直接抄过去就行了。
我们在此运行检测下。。
我们的角色被障碍物碰到,就死掉了,然后就会屏蔽游戏的触摸事件,玩家角色开始掉落。当角色掉落到屏幕底部时候游戏结束。会切换到结束场景。这里大家看到角色掉没了,不要在意这些细节。。我们接下来开始制作结束场景。
creator 跳跃弧线_CocosCreator零基础制作游戏《极限跳跃》六、制作游戏障碍物实现碰撞检测...相关推荐
- creator 跳跃弧线_CocosCreator零基础制作游戏《极限跳跃》
原标题:CocosCreator零基础制作游戏<极限跳跃> 刚刚我们制作了游戏的开始场景,现在我们来制作游戏的主场景.还是同样的方法,新建一个名为MainScene的场景,双击打开,修改场 ...
- creator 跳跃弧线_CocosCreator零基础制作游戏《极限跳跃》教程4
原标题:CocosCreator零基础制作游戏<极限跳跃>教程4 八.添加游戏积分系统 前面我们实现了整个游戏的流程,下面我们来完善游戏的积分系统..先来分析下游戏的积分,第一次展示积分的 ...
- creator 跳跃弧线_CocosCreator零基础制作游戏《极限跳跃》一、游戏分析
CocosCreator零基础制作游戏<极限跳跃>一.游戏分析 本教程基于create1.0版本制作,如遇报错请修改报错地方的api问题. 无意中发现了小游戏<极限跳跃>感觉挺 ...
- creator 跳跃弧线_CocosCreator零基础制作游戏《极限跳跃》教程1
一.游戏分析 制作准备,cocoscreator官方文档,api,百度页面,等等.. 第一次接触这个玩意,所以我用了半个小时的时间先大概浏览下文档... 做任何游戏之前,先来分析游戏的结构和玩法,本次 ...
- 零基础10天学会网页制作第一天
Hello,大家好,我是AbnerMing,从这篇文章起,我们开始进入为期10天的网页制作学习,具体怎么学习,及未来的就业前景,还请大家去看上一篇文章<零基础10天学会网页制作之前言>,这 ...
- PS零基础自学笔记:PS制作伤痕、制作UI图标,老师推荐的一些链接
PS零基础自学笔记:PS制作伤痕.换头 交互设计导论的上机和艺术设计基础换汤不换药,也是搞设计,只不过这次不是Xd,是PS粉墨登场······ 1.PS制作伤痕 https://zhidao.baid ...
- 【前端就业课 第一阶段】HTML5 零基础到实战(六)表格详解
注意:手机(APP)打开,内容显示更佳,不会的私聊博主即可 想要拿代码或加入学习计划(** 博主会监督你并且教你写文章 **)的拉到最下面(PC端Web打开)加博主即可,目录也在最下面. 参加博主前端 ...
- C/C++基础讲解(八十六)之游戏篇(解救人质游戏)
C/C++基础讲解(八十六)之游戏篇(解救人质游戏) 程序之美 前言 很多时候,特别是刚步入大学的学子们,对于刚刚开展的计算机课程基本上是一团迷雾,想要弄明白其中的奥秘,真的要花费一些功夫,我和大家一 ...
- creator 跳跃弧线_(转)CocosCreator零基础制作游戏《极限跳跃》四、添加游戏主场景控制脚本...
CocosCreator零基础制作游戏<极限跳跃>四.添加游戏主场景控制脚本 前面简单的实现了主界面的UI设置,现在我们开始制作游戏的控制脚本. 在资源管理器的Script文件夹中,点击右 ...
最新文章
- mysql 怎么格式化输出_怎么格式化MySQL输出代码
- 干货 | 基于特征的图像配准用于缺陷检测
- Android开发:图文分析 Handler通信机制 的工作原理
- matlab练习程序(图像旋转,最邻近插值)
- truelicense中的maven配置
- 特斯拉与Mobileye口水战的背后,是自动驾驶技术话语权之争
- 北京中考计算机,规则丨2018考生:2017北京中考统招计算机录取规则
- python下采样_python + opencv 如何在上采样下采样之后导出图片?
- C++语法细节注意集锦
- 晨风机器人怎么买奴隶_潮牌复刻和正品该怎么抉择???带你了解了解
- 《Python Cookbook 3rd》笔记(3.6):复数的数学运算
- java实现鸭子类型,Golang的interface及duck typing鸭子类型
- 连亏172亿,割肉卖楼,年收3700亿、闻名全球的巨头,败退中国!
- ASP.NET MVC4 使用UEditor富文本
- 关于数学计算机手抄报简单的,数学手抄报简单又漂亮图片
- 北大计算机考研822 911区别,北大考研成绩“上热搜”,4位神仙“打架”,旁人:倒吸一口气!...
- 免费实时汇率查询Api接口
- DOTween的一些基本用法
- 适合中小企业的ERP管理软件如何选择?
- 查看Linux服务器内存大小,cpu个数,型号