你可以观看视频学习,也可以下拉查看文字教程
拖拽触屏缩放的教程视频
在本次教程中,我们将学习两个功能
为了实现拖拽功能,首先我们为需要拖拽的对象添加拖拽能力
在添加该能力后,对象即可跟随鼠标移动
首先我们创建一个拖动目标点精灵, 当精灵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)
在进行了缩放操作后,将两指初始距离设置为当前两触屏坐标距离,是为了放置手指不动时,依旧按照初始参数进行缩放。可以禁用该动作,预览查看不重新设置变量时的效果。
缩放操作的事件全图如下图:
以上就是实现缩放的全部事件,可以通过移动端单幕预览来调试效果