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

Posted 2020-11-18 wodehao0808

 

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