11.碰撞检测:接物体小游戏/抓娃娃 | 您所在的位置:网站首页 › 擦玻璃器为什么拉不动 › 11.碰撞检测:接物体小游戏/抓娃娃 |
一 、案例效果 案例效果1 案例效果2 《端午抓粽子》 案例效果3 《[端午游戏2]兄弟,要飙船么》 案例效果4 《碰撞来了》 二、应用场景 碰撞检测组件,可以侦测组件的位置变化,当不同组件之间碰撞时,利用触发器触发各种动作,常用于H5小游戏。 《flappy fish》 《[端午游戏2]兄弟,要飙船么》 三、素材准备 文末附件下载素材,非商用,仅供学习使用。 四、碰撞检测的几个概念 1.碰撞目标元素/碰撞元素被用来设定为可以触发碰撞事件的两组组件,针对任意一个碰撞检测组件,都需要设置这么两组对象。这两组对象,可以各一个,也可以各多个。 2.碰撞时触发器用于设定当发生碰撞时,可以触发动作。 五、组件用法 基本用法 1.点击操作页面上方的菜单栏,点击高级组件,在交互组件下选择碰撞检测组件 2.碰撞检测对象设定。针对一个“碰撞检测”组件,设定方法如下图:PS作两张图,命名为小球和碰撞方块,并导入到画布中: 3.设置碰撞物小球:点击碰撞组件,点击右侧添加按钮,勾选小球,点击确认; 4.同理设置碰撞目标方块:点击碰撞组件,点击右侧添加按钮,勾选方块,点击确认; 5.设置小球飞入动画:给小球添加飞入动画,设置重复次数为一直播放,设置动画效果为Expo.easeIn,点击确认; 6.同理设置小球飞出动画:给小球添加飞出动画,设置出现方式为和上一个一起开始,设置动画效果为Expo.easeOut,勾选等待触发,设置动画结束时触发刚刚设置的小球飞入动画,点击确认; 7.选中碰撞检测的触发器,触发时播放小球飞出的动画。 8.将小球移动到画布的的最下方; 9.设置碰撞方块可移动:点击碰撞方块,勾选可拖动,设置拖拽限制为水平; 10.预览效果。这时候我们点击左上角的预览按钮,选择预览当前页,在小球一直掉落的时候左右拖拽方块,看看小球与方块碰撞后的效果吧。 10.小技巧提示 “小球”上设定了两个动画 设定为等待触发,在“碰撞时”,触发播放 飞出动画结束时,也需要再次触发“飞入动画(1)” 飞入动画(1),并且飞入动画结束时,再次触发执行 “飞入动画(1)” 飞出动画(2) “色块”设定了可拖放,并且限定在水平方向拖动 11.碰撞检测配置项说明 前面介绍了 “碰撞目标元素”、“碰撞元素”以及“碰撞触发器”,其他需要介绍的配置项如下: (1)偏移 (2)边界:是指以组件边界为基准,周围多少像素内,算是碰撞区域。以 “以边界计算偏移 10个像素”举例,示意图如下: (3)中心:是指以组件中心为圆心,周围多少像素内,算是碰撞区域
4.触发 单次:触碰时触发,在接触后,不会再触发 持续:只要处于接触状态,就一直触发 (5)碰撞后消失 勾选后,碰撞元素会在发生碰撞时消失(如下图所示) 附件:碰撞检测组件素材.zip • 11.25KB • 下载 上一篇 10.锚点/Anchor:滑动页面至指定位置播放动画 下一篇 12.1 SVG路径/描绘动画 |
CopyRight 2018-2019 实验室设备网 版权所有 |