CocosCreator零基础制作游戏《极限跳跃》六、制作游戏障碍物实现碰撞检测
首页 > CocosCreator > 《极限跳跃》    作者:闭眼就天黑   2016年5月29日 14:38 星期日   热度:19580°   百度已收录  
时间:2016-5-29 14:38   热度:19580° 

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


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

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

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

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

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

QQ20160529-17@2x.png


游戏中障碍物我们分为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);
    },

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

QQ20160529-18@2x.png

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

QQ20160529-19@2x.png


预制体文件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。可以在资源管理器中看到。

QQ20160529-20@2x.png

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

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

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

QQ20160529-21@2x.png

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

zhangaiwu.gif

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

打开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中添加碰撞事件。天下代码一大抄,直接抄过去就行了。

我们在此运行检测下。。

pengzhuanjiance.gif

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

二维码加载中...
本文作者:闭眼就天黑      文章标题: CocosCreator零基础制作游戏《极限跳跃》六、制作游戏障碍物实现碰撞检测
本文地址:https://www.byjth.com/jixiantiaoyue/71.html
版权声明:若无注明,本文皆为“闭眼就天黑专栏_技术博客_个人学习总结”原创,转载请保留文章出处。
相关文章

版权所有:《闭眼就天黑专栏_技术博客_个人学习总结》 => 《CocosCreator零基础制作游戏《极限跳跃》六、制作游戏障碍物实现碰撞检测
本文地址:https://www.byjth.com/jixiantiaoyue/71.html
除非注明,文章均为 《闭眼就天黑专栏_技术博客_个人学习总结》 原创,欢迎转载!转载请注明本文地址,谢谢。

为什么已添加侦听碰撞就运行不了,整个游戏瘫了
两个js的第八行都多一个反括号
楼主,我的也没有下落,但是没有报错,player里的下落函数应该不算监听呀,不知哪里出了问题
博主你好,碰撞之后小球不动了,没有下落,代码也停止执行了,你知道是怎么回事吗?
@微笑:你是打包的安卓吧??web上不会有事
@闭眼就天黑:楼主,web上就是代码会停止执行啊,我换成用碰撞组件都不行
@微笑:应该是安卓包问题吧,

返回顶部    首页    手机版本    版权所有:闭眼就天黑专栏_技术博客_个人学习总结
    站长: 闭眼就天黑    搜索cocos2dx主题 技术支持:闭眼就天黑   皖ICP备14007736号-1  

皖公网安备 34132102000107号

   sitemap