cocos-creator学习笔记3(实现碰撞)

今天完成了FlappyBird游戏的制作,其中里面有一块关于碰撞系统的讲解知识:
-------->实现小鸟也管道的碰撞,我就以此为例讲解一下cocos-creator里面的碰撞是怎么来完成的
1. 先确定你要碰撞的节点:第一步是添加节点碰撞组件

在这里插入图片描述
在节点添加组件上有一个碰撞组件,碰撞组件有分为了三个类别:
one:Box Collider(这种碰撞的要求是规则四边形图形的碰撞,即正方形长方形一类的,不可用是其他图形)
two:Circle Collider(这种碰撞的要求是圆类的碰撞,不可以是其他类型的碰撞)
three:PolygonCollider(这种碰撞是多边形类的碰撞,可以是任意的多边形。)
在这里插入图片描述
假如我添加一个box类碰撞,勾选Editing就可以编辑碰撞的边界范围了。
在这里插入图片描述
拖动这个覆盖小鸟来编辑碰撞编辑,通过拉伸和压缩来编辑就可以,这个应该很容易吧,就不细讲了。圆类碰撞也是以此类推的
接下来讲解一下这个多边形碰撞的编辑

在这里插入图片描述
将鼠标悬停在碰撞图块的指向上会出现一个加号的图标,点一下就会发现编辑图块上多了一个点,然后按照Box类的碰撞拉伸压缩就可以了。

这里小鸟碰撞组件就编辑好了。
在这里插入图片描述
我们要实现小鸟和管道的碰撞
在这里插入图片描述
分别将两个管道都添加碰撞组件
现在碰撞组件都添加好了,再就是为碰撞做分组操作了(分组就是谁可以和谁发生碰撞,谁不能喝和谁发生碰撞的一种编辑类分组
在这里插入图片描述
再点击项目设置
在这里插入图片描述
点添加分组
在这里插入图片描述
箭头所指之处是给你的这个分组取一个名字。
下面的分组配对:谁和谁可以碰撞就在相应位置打√。
完成后我们继续:
在这里插入图片描述
将我们在分组取的名字分别编辑,比如这个hero节点对应上面分组的hero,就将这个2中的Group改成hero就可以,管道的也是一样
完成后就开始写代码实现碰撞了:
在你的主游戏脚本上开启物理碰撞的开关:
在这里插入图片描述
我这个脚本是挂在画布上面的。
接下来,我还有一个脚本是挂在hero上面的,这个脚本也叫hero
我们在这个脚本上写一个方法:
在这里插入图片描述
这个方法传入两个参数,一个是other,一个是self,意思其实大家也猜得到,就是self(这个脚本的节点)和other(其他有物理碰撞组件且和self可发生碰撞的节点
要是两者发生碰撞,输出(碰撞了);
瞧瞧,碰撞也不难吧 O(∩_∩)O

CocosCreator实现的 解救人质 游戏,学会碰撞检测rescue.7z // Bullet.js cc.Class({ extends: cc.Component, properties: { mSpeed: 300, }, // LIFE-CYCLE CALLBACKS: // onLoad () {}, start() { var manager = cc.director.getCollisionManager(); // 获取碰撞检测系统 manager.enabled = true; }, update(dt) { // 设置子弹移动,当超出屏幕范围未发生碰撞时自动销毁 this.node.y += this.mSpeed * dt; if (this.node.y > 580) { console.log('超出屏幕范围,子弹销毁!'); this.node.destroy(); } }, /** * 当碰撞产生的时候调用 * @param {Collider} other 产生碰撞的另一个碰撞组件 * @param {Collider} self 产生碰撞的自身的碰撞组件 */ onCollisionEnter: function (other, self) { console.log('on collision enter'); if (other.tag == 1) { // 子弹碰到人质时,解救失败! console.log('解救人质失败!'); var failLabel = this.node.parent.getChildByName('failLabel'); failLabel.active = true; this.node.destroy(); } else if (other.tag == 2) { // 子弹碰到敌人时,解救成功! console.log('解救人质成功!'); var successLabel = this.node.parent.getChildByName('successLabel'); successLabel.active = true; this.node.destroy(); } }, /** * 当碰撞产生后,碰撞结束前的情况下,每次计算碰撞结果后调用 * @param {Collider} other 产生碰撞的另一个碰撞组件 * @param {Collider} self 产生碰撞的自身的碰撞组件 */ onCollisionStay: function (other, self) { console.log('on collision stay'); }, /** * 当碰撞结束后调用 * @param {Collider} other 产生碰撞的另一个碰撞组件 * @param {Collider} self 产生碰撞的自身的碰撞组件 */ onCollisionExit: function (other, self) { console.log('on collision exit'); } });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

凌晨小街

你的鼓励是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值