【Unity】小技巧,让你的UI物品快速拖拽到物品框

2,791 阅读2分钟

在本教程中,我们将了解如何使用 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