34 UI设计之UI事件与响应

在上一篇的教程中，我们学习了如何在UE5中创建菜单与按钮，为用户提供了一种简单的界面交互方式。本篇主要聚焦于如何处理这些 UI 元素的事件与响应，确保用户在操作 UI 时能够获得即时的反馈和相应的功能。

1. UI事件的基本概念

在UE5中，用户界面(UI)元素可以通过事件（Event）来产生交互效果。例如，当用户点击按钮时，这个操作就会触发一个Click事件。在这篇文章中，我们将重点讨论以下几种常见的事件：

• OnClicked：当用户点击按钮时触发。
• OnHovered：当鼠标悬停在按钮上时触发。
• OnPressed：当用户按下按钮时触发。
• OnReleased：当用户释放按钮时触发。

2. 绑定事件到按钮

我们将以之前创建的菜单与按钮为基础，详细讨论如何在蓝图中绑定事件。假设我们已在界面上创建了一个名为“Start Button”的Button。

2.1. 打开蓝图

1. 在内容浏览器中，双击打开包含 UI 的蓝图（例如，MainMenu）。
2. 进入设计视图。

2.2. 选择按钮并绑定事件

1. 选择你的Start Button，在右侧的详细信息面板中找到Events部分。
2. 点击OnClicked右侧的加号（+），UE5会自动切换到事件图（Event Graph），并创建一个OnClicked事件的节点。

2.3. 添加逻辑

在事件图中，你可以添加实现按钮点击后所需的逻辑。例如，当用户点击“Start Button”时，启动游戏的逻辑如下：

1. 从`OnClicked`节点拖出一条线条，并搜索`Open Level`节点。
2. 在`Open Level`节点的输入框中，输入你想要加载的关卡名称（如：`Level_1`）。

完整的蓝图逻辑示例：

OnClicked (Start Button)
    ↓
Open Level ("Level_1")

这样，当用户点击“Start Button”时，系统就会自动加载名为Level_1的关卡。

3. 处理悬停事件

你可能还想要为按钮增加悬停效果，让用户在鼠标悬停时能够获得视觉反馈。例如，改变按钮的颜色。

3.1. 绑定悬停事件

同样地，在Start Button的详细信息面板中，可以找到OnHovered和OnUnhovered事件。

1. 对于OnHovered事件，添加一个功能节点，例如Set Color and Opacity改变按钮颜色。
2. 对于OnUnhovered事件，再次使用Set Color and Opacity将颜色设置回原始值。

完整的蓝图逻辑示例：

OnHovered (Start Button)
    ↓
Set Color and Opacity (New Color: Yellow)

OnUnhovered (Start Button)
    ↓
Set Color and Opacity (New Color: White)

4. 触发其他事件

除了基本的按钮事件外，UE5还允许您通过自定义事件处理更复杂的交互。例如，在按钮点击后显示或者隐藏其他 UI 元素。

假设我们在界面上添加了一个Loading Screen，想在点击按钮时显示它。

4.1. 显示和隐藏 UI元素

可以使用Set Visibility节点来控制Loading Screen的可见性。

OnClicked (Start Button)
    ↓
Set Visibility (Loading Screen: Visible)

此示例代码实现了当玩家点击 Start Button 时，显示Loading Screen。

5. 代码实例

使用 C++ 代码实现事件也同样方便。以下是在你的 UI 蓝图中为按钮添加OnClicked事件的基本示例：

#include "YourUIClass.h"
#include "Components/Button.h"

void UYourUIClass::NativeConstruct()
{
    Super::NativeConstruct();

    if (StartButton)
    {
        StartButton->OnClicked.AddDynamic(this, &UYourUIClass::OnStartButtonClicked);
    }
}

void UYourUIClass::OnStartButtonClicked()
{
    UGameplayStatics::OpenLevel(this, FName("Level_1"));
}

上面的代码在构造函数中绑定了按钮的点击事件，并在OnStartButtonClicked方法中定义了按钮被点击后发生的操作。

6. 小结

在本篇教程中，我们详细介绍了如何处理和响应UI事件，包括按钮的点击、悬停等。通过这部分的学习，您应该能够根据用户的操作，为界面提供更丰富的反馈和交互。

在下一篇教程中，我们将进一步讨论如何打包与发布项目，并设置相关配置，以便将您的游戏推向更广大的玩家群体。希望您保持关注！