在本教程中,我们将了解如何使用 Unity 中的 UI 事件系统将 UI 图标拖放到插槽中。
为此,我们将使用事件系统的 IDragHandler 和 IDropHandler。IDragHandler 有一个 开始,拖动 和一个 End 方法,我们可以用来控制被拖动的对象。IDrop处理程序具有OnDrop函数,我们可以使用该函数将对象放入插槽中。
我们还将在拖动角色时调整其透明度,并在将其放置在插槽中时将其恢复正常。
设置精灵
我有两个精灵。一把斧头将成为我们的对象,另一把斧头用于插槽。
两个精灵的纹理类型都需要设置为 2D 和 UI。创建两个 2D UI 图像。一个用于对象,另一个用于插槽。
将精灵拖放到图像上。请记住将对象按插槽之后的顺序放在最后。否则,对象将隐藏在插槽后面。
拖动脚本
让我们将拖动脚本添加到对象。我们将在拖动开始时将对象的 alpha 值设置为 0.5,并在拖动结束时将其设置回去。在拖动过程中,我们将添加将鼠标移动到对象位置的增量。增量值在事件数据中可用。我们需要将增量值调整为画布的比例。因此,我们可以将增量除以画布比例。
创建一个名为 DragScript 的脚本并添加下面的代码并在检查器中分配画布。
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;
public class DragScript : MonoBehaviour,IDragHandler,IBeginDragHandler,IEndDragHandler//继承事件接口
{
RectTransform rec;
Image img;//被拖动ui物品
Color tempColor;//存放初始色值
[SerializeField] Canvas canvas;//
void Awake()
{
rec=GetComponent<RectTransform>();
img=GetComponent<Image>();
tempColor=img.color;//初始颜色
}
void IBeginDragHandler.OnBeginDrag(PointerEventData eventData)//开始拖动事件
{
tempColor.a=.2f;
img.color=tempColor;//拖拽时降低透明度
}
void IDragHandler.OnDrag(PointerEventData eventData)
{
rec.anchoredPosition+=eventData.delta/canvas.scaleFactor;//计算鼠标拖动差值
img.raycastTarget=false;
}
void IEndDragHandler.OnEndDrag(PointerEventData eventData)//拖拽结束事件
{
tempColor.a=1;
img.color=tempColor;
img.raycastTarget=true;
}
}
放置脚本
当我们结束拖动时,对象在拖动结束时保持在同一位置。但我们需要它完全适合插槽。为此,如果拖动在插槽上结束,我们可以使用 Drop 处理程序将对象的位置设置为插槽的位置。
我们需要取消选中对象上的光线投射目标,以便在插槽上调用 OnDrop 函数。这在上面脚本的 OnDrag 函数中已经解决了。创建一个新的 DropScript 并添加下面的代码以调整拖动端插槽的位置。
using UnityEngine;
using UnityEngine.EventSystems;
public class DropScript : MonoBehaviour,IDropHandler
{
void IDropHandler.OnDrop(PointerEventData eventData)
{
eventData.pointerDrag.GetComponent<RectTransform>
().anchoredPosition=GetComponent<RectTransform>().anchoredPosition;
//被拖动ui物体的锚点位置==插槽锚点位置
}
}
最终效果
我希望您发现这些有价值的信息!关注我以获取更多小游戏开发文章!:)
博主属于自学型选手,如果你也是Unity初学者,欢迎加入我的群聊进行互助交流:618012892