拖拽物体、触屏缩放

在本次教程中,我们将学习两个功能

  1. 拖拽物体并且当物体移动到指定范围时固定位置,不在指定范围时返回最初位置。
  2. 实现触屏的两只缩放物体功能

点我下载教学工程

实现拖拽

为了实现拖拽功能,首先我们为需要拖拽的对象添加拖拽能力

在添加该能力后,对象即可跟随鼠标移动

拖拽至固定位置后固定

首先我们创建一个拖动目标点精灵, 当精灵A停止拖拽并且距离拖动目标点很近时,将精灵A固定在目标点上。

在场景中放入三个拖动目标点

添加全局变量:判定距离,用于判定精灵A与拖动目标点距离多少时,可以被固定

接下来我们添加事件,当拖拽结束时,如果距离拖动目标点足够近,则固定到目标位置。
当拖拽松开时触发

选中距离精灵A最近的拖动目标点



如果精灵A与拖动目标点距离足够近

abs(distance(精灵A.x,精灵A.y,拖动目标点.x,拖动目标点.y)) ,abs取绝对值, distance计算两点距离

将精灵A的位置设置到拖动目标点的位置,并且禁用拖拽能力

预览游戏即可看到效果,当精灵A里拖动目标点足够近时松开鼠标,精灵A将会固定到目标点的位置,并且无法再次拖动

距离不够时,返回原来位置

首先我们在精灵A下面创建实例变量初始坐标

在场景开始时,初始化实例变量

拖拽松开事件下,添加子事件:当距离不够时,返回到初始坐标位置

预览游戏,当距离不够时,精灵A直接回到了初始位置。

为返回初始位置添加平滑移动效果

接下来我们通过lerp表达式,实现平滑移动功能。首先我们创建实例变量返回状态,当返回状态为1时,精灵A平滑移动回初始位置。

当我们点击拖拽时,将返回状态设置为0

修改松开拖拽时的动作,从改变坐标变成设置返回状态

最后,当返回状态=1时,平滑移动到初始位置
X: lerp(精灵A.x,精灵A.初始坐标x,dt * 10)
X: lerp(精灵A.y,精灵A.初始坐标y,dt * 10)

以上就是拖拽物体的全部事件,整体事件如下图所示:

两指缩放

接下来我们新建一个场景,实现触摸屏的两指缩放功能

布置场景

我们在场景中添加两个对象:【缩放精灵】、【缩放调试文本】

添加全局变量

首先,我们添加若干数值型全局变量,用于显示触屏位置的坐标、两个触屏位置的距离以及当前是否处于触摸屏幕状态。

触屏判断

首先我们需要知道,当同时有多个手指在进行触屏操作时,需要通过触屏编号对每个触屏操作进行区分,触屏编号从0开始。 触屏编号代表了用户手指触屏的顺序。

添加事件分组:触屏判断,我们将在该事件组下对触屏操作进行判断

添加事件,当编号为0和1的触屏正在进行时,分别保存该编号触屏的X和Y坐标,并通过编号0触屏中、编号1触屏中变量标记触屏状态。

当没有进行触屏操作时,将该编号的编号X触屏中变量设置回0

在本次教程中,我们通过两个触屏坐标的距离变化,来实现对物品的缩放,所以在第一次两个触屏都按下时,需要先记录两个触屏位置的距离

我们可以通过调试文本,来显示上面设置的变量的值

触屏判断全部事件如下图所示:

实现缩放功能

新建缩放判断事件组

当两个触屏都按下时,才能触发缩放事件

在子事件下面,新建两个子变量,分别是:当前两个触屏的坐标距离,以及与初始两触屏距离的相差值

先设置两个子变量的值

根据两个距离的相差值,对精灵进行缩放,并通过clamp()表达式限制缩放的大小。 (可自行调整参数,本次教程中,精灵最小为10像素,最大为300像素。缩放的效果为相差值的0.8倍)
设置宽度:clamp(self.width+(local_与初始距离相差值0.8),10,300)
设置高度:clamp(self.height+(local_与初始距离相差值
0.8),10,300)

在进行了缩放操作后,将两指初始距离设置为当前两触屏坐标距离,是为了放置手指不动时,依旧按照初始参数进行缩放。可以禁用该动作,预览查看不重新设置变量时的效果。

缩放操作的事件全图如下图:

以上就是实现缩放的全部事件,可以通过移动端单幕预览来调试效果