CreatorPrimer|物理小游戏(物理组件)

Demo演示视频:

CreatorPrimer|物理小游戏(物理组件)_第1张图片

视频地址:https://v.qq.com/x/page/p0713nsrnr1.html
本视频的工程已经上传github,CreatroPrimer仓库physics分支,传送地址:https://github.com/ShawnZhang2015/CreatorPrimer/tree/physics

紧接上篇我们的物理投篮游戏,这次介绍一下Cocosc Creator的物理引擎相关组件:刚体物理碰撞检测

1. 刚体组件

我们先看看游戏中的笑脸小球的刚体组件属性,请看下图:

CreatorPrimer|物理小游戏(物理组件)_第2张图片

RigidBody就是Cocos Creator提供的刚体组件,将组件挂载到一个节点上,节点即具有物理特性,运行起来会随着地心引力向下坠落(需要开启物理效果)。

有些刚体是不需要动的,比如我们四周的围墙,只需要将刚体组件的Type属性设置为static即可,请看下图:

CreatorPrimer|物理小游戏(物理组件)_第3张图片

设置好静态刚体,运行游戏会发现小球下坠,但会穿过围墙,掉入无尽深渊去了。

2. 物理碰撞组件

刚体组件只是给节点赋予了重力、速度、阻力等能力,接下来我们还需要为节点设置物理外形,这需要为节点挂载一个碰撞组件,看下图:

CreatorPrimer|物理小游戏(物理组件)_第4张图片

Cocos Creator提供了四种物理碰撞组件分别是:

  1. 矩形碰撞
  2. 链条碰撞
  3. 圆形碰撞
  4. 多边形碰撞

我们这里为Ball节点添加圆形碰撞组件,看一下组件属性:
CreatorPrimer|物理小游戏(物理组件)_第5张图片

简单说明一下组件属性:

  1. Editing:在场景编辑器中开启刚体外形编辑功能
  2. Tag: 为碰撞组件设置一个ID用于对象识别
  3. Density:密度
  4. Sensor:选中不会产生物理效果,但会响应物理碰撞(篮球框就利用了这个属性)
  5. Friction:摩擦系数
  6. Restitution:弹性系数,要让球掉在地上能弹跳值要大于0,如果设置为1(最大值)球可能会在原地无限弹跳
  7. Offset:刚体与节点的偏移,尽量让两者重合
  8. Radius:刚体半径

其它物理碰撞组件,只是最后一个外型属性不同,其它都一样,我们看看四周围墙的矩形碰撞组件属性:

CreatorPrimer|物理小游戏(物理组件)_第6张图片

Box盒形碰撞组件的刚体大小由Size属性决定,外观大小由节点Size属性决定。为刚体设置好了碰撞组件,你就能看到小球在刚体包围盒里快乐弹跳了,接下来我们来监听碰撞事件。

3. 监听碰撞事件

请认真思考一下,碰撞事件的监听放在那个节点最好?我们以需求为向导,当球进入篮框更新得分,是将碰撞监听安装在篮球上还是篮框上?再进一步,篮框分左右两个,得分分别显示得分。如果将碰撞安装在篮球上,那篮球就需要判断是碰到了左边篮框,还是碰到了右边篮,可以利用碰撞组件的Tag属性来区别。如果将碰撞监听安装在左右篮框上,各自记录碰撞次数就行了,是不是更简单?请看下图,我们添加一个自定义的碰撞组件:

CreatorPrimer|物理小游戏(物理组件)_第7张图片

请仔细看上图中的组件属性配置,篮框是空心的,球可以穿透,因此需要选择中碰撞组件的Sensor属性。同时添加一个我们自定义的PhysicsColliderNotification组件用于监听物理碰撞,当发生碰撞后会发出一个通知,通知是可以自定义的,也就是一个字符串:score-left,意思是左边得分。

同时我们在左上角记得标签,上去监听score-left这个消息,当这个事件发生后,更新标签数值,可以通过组件属性配置:

CreatorPrimer|物理小游戏(物理组件)_第8张图片

每当球碰到绿色的碰撞检测点,检查节点上的组件会发出一个“score-left”事件,同时左上角数字标签在监听这个事件名,去更新标签上的数字+1(就是step的值)实现一个记分的功能。

中间的生命值标签也是用同样的机制实现,只不过是球碰撞到左右两边红色围栏,发出别一个事件,生命值标签的step为-1从表示出的是减分的效果。

4. 小结

本篇教程介绍了Cocos Creator物理引擎中的刚体和碰撞组件的常用属性,同时分析了我们这个篮球小游戏的碰撞检测策略,将碰撞检查安装在篮框和两边红色围栏上。通过两个通用的组件将投篮记分和碰触边框减分实现了,是不是很简单呢?之前Shawn保证过,前两篇不讲代码,只讲组件使用,但下一次我们要进入组件代码的学习,核心代码不到50行,非常简单,敬请期待!

如果觉得公众号上的文章对你或你的朋友有所帮助,请记得分享给大家,愿我们一起成长!

CreatorPrimer|物理小游戏(物理组件)_第9张图片

你可能感兴趣的:(探索cocos,H5正确的开发姿式,Cocos,Creator视频教程,Cocos,Creator基础教程)