.

8.拖放目标组/DragDropGroup:拼图小游戏

老赵发表于:2015年01月03日 20:40:48更新于:2021年10月22日 14:03:32

视频教程



一、案例效果

0015c9b18af432bfe40a3f0c62995fb

《2014圣诞拼图游戏》


二、应用场景

用于关联多个拖拽目标,并可以实现当多个目标组共同满足某一个条件时触发事件。典型的应用场景:拼图。

拼图完成需要所有的拼图块都在正确的位置才能触发动作,因此需要用拖放目标组来判断目标是否达成。

其实【拖放目标组】起到对多个【拖放目标】的管理作用。

《“橙星人”拼图》

《水大侠-拼图游戏》

《玩高尔夫拼图 赢千元大礼》


三、素材准备

如果是拼图游戏,需要在PS里切图,切成多张小图上传至编辑器。

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


三、组件用法

基本用法

1.添加多个【拖放目标】

0015c9b1f0ec6b61c17741fab10c13c


2.添加1个【拖放目标组】

blob.png


3.将1个【拖放目标组】绑定多个【拖放目标】

0015c9b1fd575d5819af8255abd2f1d

九宫格拼图中,【拖放目标组】跟【拖放目标】绑定的过程动图。

00156737c1a2a538021fa6d07ba405e


4.添加多个拼图图片,并把所有的拼图图片勾选可拖动,可拖动的图前面不能有元素遮挡,切记。

0015c9b1e9009e6d3c3141f88a3c46f


5.将每张拼图跟每个拖放目标逐一绑定,拖放目标位置不能是元素初始位置!否则会造成全部拖放完成后不能触发事件的情况!

0015c9b20c650f05cc3f4162a46e63b


6.下图是九宫格拼图的制作,这里只展示拼图中最后一个元素及其拖放目标的操作。

001567924799402dfc1e7be5ae1c6de


高级用法

1.拼图完成后,【拖放目标组】作为一个“裁判”,去判定每一张图有没有按照设置的规定,乖乖的待在我们设置好的拖放目标位置里。

如果所有的位置都对了,那么可以做一个成功后的设置,比如弹出一个提示等。

0015c9b2448a13bc1c71d61bd7dbd68


2.反之,触发器-存在置入错误时,设置其他的触发行为。

0015c9b254f118844fc7d326b173433




3.拖放目标组新增触发器行为:任一元素置出时。

当有任何一个元素置出的时候,可触发某些行为或逻辑。常用于拖放测试题应用中

image.png


五、相关Q&A

暂无。

附件:拖放目标组素材.zip • 1.12MB • 下载

--------- 不了解设计的程序员不是好客服 ---------------

回复(2)