Unity--UI事件触发器--EventTrigger

Unity--事件触发器--EventTrigger

1.EventTrigger简介

EventTrigger是Unity中用于处理UI事件的一个组件。它允许我们为UI元素(如按钮、图像等)添加事件监听器,从而响应各种交互事件,如鼠标点击、悬停、拖拽等。使用EventTrigger可以避免手动编写复杂的事件处理代码,使UI事件的响应更加简洁和易于管理。比手写UI的Event快很多,方便很多.

2.EventTrigger的使用步骤:

  1. 添加EventTrigger组件
    • 选择UI元素(如Image或Button)。
    • 在Inspector窗口中,点击"Add Component"。
    • 搜索并添加"EventTrigger"组件。
  2. 创建EventTrigger.Entry对象
    • 在脚本中,为每种需要监听的事件创建一个EventTrigger.Entry对象。
  3. 设置EventID和回调函数
    • 为每个EventTrigger.Entry对象设置eventID,这是一个枚举类型,表示不同的事件类型(如PointerEnterPointerClick等)。
    • 通过callback.AddListener方法添加回调函数。这些函数将在事件发生时被调用。
  4. 将Entry对象添加到EventTrigger
    • 将每个EventTrigger.Entry对象添加到EventTrigger组件的triggers列表中。
  5. 实现回调函数
    • 在脚本中实现回调函数,处理事件。例如,我们可以改变UI元素的颜色、播放声音或更新游戏状态。

示例代码:

csharp 复制代码
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;
public class EventTriggerExample : MonoBehaviour
{
    public Image myImage;
    void Start()
    {
        // 获取EventTrigger组件
        EventTrigger eventTrigger = myImage.GetComponent<EventTrigger>();
        // 创建EventTrigger.Entry对象
        EventTrigger.Entry entry = new EventTrigger.Entry();
        // 设置事件ID
        entry.eventID = EventTriggerType.PointerClick;
        // 添加回调函数  也可以写拉姆达表达
        entry.callback.AddListener((data) => { OnPointerClick((PointerEventData)data); });
        // 将Entry添加到EventTrigger
        eventTrigger.triggers.Add(entry);
    }
    // 回调函数实现
    public void OnPointerClick(PointerEventData data)
    {
        Debug.Log("Image clicked!");
        // 这里可以添加点击事件的逻辑
    }
}

在上面的代码中,当我们点击myImage时,OnPointerClick函数将被调用,并输出一条消息到控制台。
EventTrigger非常适合处理简单的UI交互,特别是当我们需要为多个UI元素添加相同类型的事件处理时。它提供了一种清晰、模块化的方法来管理UI事件。

3.白话版本

由于UI的Event都要自己写, 非常麻烦. 为了解决这个问题, Unity将UI中的Event写了一个类,这个类包含了许多UI响应事件, 那么我们只需要这用这个类中的方法就可以快速自定义UI的响应事件. 这就是EventTrigger.

这个组件是处理UI事件的一种便捷方式,因为它允许我们通过添加事件监听器来响应不同的事件,而不需要手动编写每个事件的监听代码

现在有一个Image上,我们需要实现鼠标进入 离开和点击的事件响应. 那么需要再Image上添加EventTrigger组件.

然后再自己代码中获得Image上的EventTrigger组件.

简略步骤

  1. 获得EventTrigger组件
  2. 声明EventTrigger组件中的内部类Entry对象
  3. 设置Entry的EventID和callback函数
  4. 将声明好的Entry对象添加到EventTrigger中的List类型的列表trigger中即可

需要注意的是Entry中的EventID是一个枚举类型, 里面包含了常用的操作. 以下是具体的ID名称和值

csharp 复制代码
 public enum EventTriggerType
    {
        PointerEnter = 0,
        PointerExit = 1,
        PointerDown = 2,
        PointerUp = 3,
        PointerClick = 4,
        Drag = 5,
        Drop = 6,
        Scroll = 7,
        UpdateSelected = 8,
        Select = 9,
        Deselect = 10,
        Move = 11,
        InitializePotentialDrag = 12,
        BeginDrag = 13,
        EndDrag = 14,
        Submit = 15,
        Cancel = 16
    }

同时,callback回调函数使用.AddListener的方式进行添加函数. 其中参数是一个BaseEventData. 根据自己的需要可以将参数转换为自己需要的类型, 比如鼠标的位置, 将BaseEventData类型转换为PointerEventData.

例如以下代码是获得数鼠标进入时候的坐标x和y

csharp 复制代码
private void OnPointerExit(BaseEventData eventData)
{
    // 转换数据类型
    PointerEventData pointerEventData = eventData as PointerEventData;
    Debug.Log("鼠标进入位置:" + "x =" + pointerEventData.position.x + " y=" + pointerEventData.position.y);
}

具体代码如下:

1.获得EventTrigger组件

csharp 复制代码
image = this.transform.Find("Image").GetComponent<Image>();
EventTrigger eventTrigger = image.GetComponent<EventTrigger>();

2.声明EventTrigger组件中的内部类Entry对象

csharp 复制代码
enterEntry = new EventTrigger.Entry();

3.设置Entry的EventID和callback函数

csharp 复制代码
enterEntry.eventID = EventTriggerType.PointerEnter; // 设置事件ID
enterEntry.callback.AddListener(OnPointerEnter);	// 设置事件响应函数

// 事件响应函数
private void OnPointerEnter(BaseEventData eventData)
{
    // 自定义逻辑
    // 根据需求将 eventDataeventData 进行类型转换

    
}

4.将声明好的Entry对象添加到EventTrigger中的List类型的列表trigger中即可

csharp 复制代码
eventTrigger.triggers.Add(enterEntry);

完成代码:

csharp 复制代码
using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

public class EventTriggerTest : MonoBehaviour
{
    // 
    private Image image;
    //  1. 声明EventTrigger中的内部类
    private EventTrigger.Entry enterEntry;
    private EventTrigger.Entry exitEntry;
    private EventTrigger.Entry clickEntry;
    private EventTrigger eventTrigger;

    void Start()
    {
        image = this.transform.Find("Image").GetComponent<Image>();
        eventTrigger = image.GetComponent<EventTrigger>();
        // 鼠标进入
        //2. 给内部类添加事件ID和监听函数
        enterEntry = new EventTrigger.Entry();
        enterEntry.eventID = EventTriggerType.PointerEnter;
        enterEntry.callback.AddListener(OnPointerEnter);
        // 鼠标离开
        exitEntry = new EventTrigger.Entry();
        exitEntry.eventID = EventTriggerType.PointerExit;
        exitEntry.callback.AddListener(OnPointerExit);
        // 鼠标点击
        clickEntry = new EventTrigger.Entry();
        clickEntry.eventID = EventTriggerType.PointerClick;
        clickEntry.callback.AddListener(OnPointerClick);
        

        // 3.添加到 image中的EventTrigger
        eventTrigger.triggers.Add(enterEntry);
        eventTrigger.triggers.Add(exitEntry);
        eventTrigger.triggers.Add(clickEntry);

    }

    private void OnPointerClick(BaseEventData eventData)
    {
        Debug.Log("鼠标点击");
        image.color = Color.red;
    }

    private void OnPointerExit(BaseEventData eventData)
    {
        // 转换数据类型
        // 3. 根据需求获取相关数据
        PointerEventData pointerEventData = eventData as PointerEventData;
        Debug.Log("鼠标离开位置:" + "x =" + pointerEventData.position.x + " y=" + pointerEventData.position.y);
    }

    public void OnPointerEnter(BaseEventData eventData)
    {
        // 转换数据类型
        PointerEventData pointerEventData = eventData as PointerEventData;
        Debug.Log("鼠标进入位置:" + "x =" + pointerEventData.position.x + " y=" + pointerEventData.position.y);
    }
    // Update is called once per frame
    void Update()
    {
        
    }
}
相关推荐
虾球xz9 小时前
游戏引擎学习第208天
学习·游戏引擎
benben04413 小时前
Unity3D仿星露谷物语开发34之单击Drop项目
游戏·ui·unity·游戏引擎
妙为13 小时前
unreal engine5开发仿鬼泣5的游戏,把敌人击飞到空中4连击
游戏·游戏引擎·虚幻·仿鬼泣5·空中连击
虾球xz16 小时前
游戏引擎学习第205天
学习·游戏引擎
benben04418 小时前
Unity3D仿星露谷物语开发33之光标位置可视化
游戏·ui·unity·游戏引擎
张屿秋1 天前
在Unity中,如果物体上的脚本丢失,可以通过编写一个自定义编辑器脚本来查找并删除这些丢失的组件
unity·编辑器·游戏引擎
ailinghao1 天前
使用Cusor 生成 Figma UI 设计稿
ui·ai·figma
闪电麦坤951 天前
Unity:Simple Follow Camera(简单相机跟随)
unity·游戏引擎
湛谷Gooyuit1 天前
LVGL修改标签文本,GUI Guider的ui不生效
ui
baivfhpwxf20231 天前
WPF 免费UI 控件HandyControl
ui·wpf