.

11.碰撞检测

戏子。发表于:2016年07月30日 21:04:05更新于:2019年09月17日 11:19:11


视频教程


一 、案例效果

案例效果1


001567cffb8b41dbfe971b261e3beed


案例效果2

0015c9b5566c77b63088c36adc53926

《[端午游戏2]兄弟,要飙船么》


案例效果3

blob.png

《碰撞来了》


二、应用场景

碰撞检测组件,可以侦测组件的位置变化,当不同组件之间碰撞时,利用触发器触发各种动作,常用于H5小游戏。

《flappy fish》

《[端午游戏2]兄弟,要飙船么》


三、素材准备

文末附件下载素材,非商用,仅供学习使用。


四、碰撞检测的几个概念

1.碰撞目标元素/碰撞元素
被用来设定为可以触发碰撞事件的两组组件,针对任意一个碰撞检测组件,都需要设置这么两组对象。这两组对象,可以各一个,也可以各多个。

2.碰撞时触发器
用于设定当发生碰撞时,可以触发到动作


五、组件用法

基本用法

1.点击操作页面上方的菜单栏,点击高级组件,在交互组件下选择碰撞检测组件

001579c8bd148f684820029836a010c


2.碰撞检测对象设定。针对一个“碰撞检测”组件,设定方法如下图:PS作两张图,命名为小球和碰撞方块,并导入到画布中:

001579c9727d2d7f0b30ea23f0f58af


3.设置碰撞物小球:点击碰撞组件,点击右侧添加按钮,勾选小球,点击确认;
00157a1a04cc188b24644279c1cfdc6


4.同理设置碰撞目标方块:点击碰撞组件,点击右侧添加按钮,勾选方块,点击确认;
00157a1a12077ccd7ac9a249ee99f94


5.设置小球飞入动画:给小球添加飞入动画,设置重复次数为一直播放,设置动画效果为Expo.easeIn,点击确认;
00157a1a414da0d8982958f5c972785


6.同理设置小球飞出动画:给小球添加飞出动画,设置出现方式为和上一个一起开始,设置动画效果为Expo.easeOut,勾选等待触发,设置动画结束时触发刚刚设置的小球飞入动画,点击确认;
00157a1a32eecbcd24b4867d560a5f0


7.选中碰撞检测的触发器,触发时播放小球飞出的动画。

0015d80507dbc826387b98f843f82a5

8.将小球移动到画布的的最下方;
001579ca4bea67efd3f7a4decd75e6b


9.设置碰撞方块可移动:点击碰撞方块,勾选可拖动,设置拖拽限制为水平;
001579ca3b5ad6132059f92d8854b27


10.预览效果。这时候我们点击左上角的预览按钮,选择预览当前页,在小球一直掉落的时候左右拖拽方块,看看小球与方块碰撞后的效果吧。

00157ad5a1fc972752703556509efcf


001567cffb8b41dbfe971b261e3beed


10.小技巧提示

  • “小球”上设定了两个动画

    • 设定为等待触发,在“碰撞时”,触发播放

    • 飞出动画结束时,也需要再次触发“飞入动画(1)”

    • 飞入动画(1),并且飞入动画结束时,再次触发执行 “飞入动画(1)”

    • 飞出动画(2)

  • “色块”设定了可拖放,并且限定在水平方向拖动


11.碰撞检测配置项说明

前面介绍了 “碰撞目标元素”、“碰撞元素”以及“碰撞触发器”,其他需要介绍的配置项如下:


(1)偏移

blob.png


(2)边界:是指以组件边界为基准,周围多少像素内,算是碰撞区域。以 “以边界计算偏移 10个像素”举例,示意图如下:
blob.png



(3)中心:是指以组件中心为圆心,周围多少像素内,算是碰撞区域

blob.png 


4.触发

blob.png

单次:触碰时触发,在接触后,不会再触发

持续:只要处于接触状态,就一直触发
blob.png


(5)碰撞后消失

blob.png

勾选后,碰撞元素会在发生碰撞时消失(如下图所示)

001567d0025cf3a709b4e1a4d4ac084

附件:碰撞检测组件素材.zip • 11.25KB • 下载