33 创建菜单与按钮

在上一篇的UI设计之UMG界面设计中，我们探讨了如何使用Unreal Engine 5中的UMG（Unreal Motion Graphics）工具来设计用户界面。现在我们将进一步深入，创建实际的菜单和按钮，并为其设计合适的布局和功能，以便用户能够方便地与游戏进行交互。

一、环境准备

在开始创建菜单和按钮之前，请确保您已经准备好以下内容：

1. 最新版本的UE5：确保您的Unreal Engine 5是最新的。
2. 新项目：创建一个新的空白项目，选择蓝图作为项目类型。
3. UMG了解：本教程基于您对UMG界面的基本了解，因此建议您先回顾上一篇教程。

二、创建基础菜单界面

1. 创建UI蓝图

首先，我们需要创建一个新的UI蓝图：

1. 在内容浏览器中，右键点击空白处，选择用户界面 > 小部件蓝图。
2. 将新蓝图命名为MainMenu（主菜单）。

2. 设计菜单界面

打开MainMenu小部件蓝图，您将进入UMG设计界面。

• 添加一个Vertical Box：

  1. 从工具栏，拖动一个Vertical Box到画布上。

• 添加标题文本：

  1. 在Vertical Box中，右键添加一个文本组件，设置其文本为主菜单。
  2. 在文本的属性面板中，调整字体大小和对齐方式。

• 添加按钮：

  1. 再次在Vertical Box中，右键添加一个按钮组件。
  2. 按钮上添加文本子组件，设置文本为开始游戏。
  3. 重复此步骤，添加其他按钮，比如选项和退出游戏。

3. 菜单布局示例

在UMG画布上，您的菜单结构应如下所示：

Vertical Box
│
├── Text (主菜单)
│
├── Button (开始游戏)
│   └── Text (开始游戏)
│
├── Button (选项)
│   └── Text (选项)
│
└── Button (退出游戏)
    └── Text (退出游戏)

三、添加按钮功能

为了让按钮具备功能，我们需要对它们进行编程。

1. 绑定按钮点击事件

在MainMenu蓝图中，选择开始游戏按钮：

1. 在右侧的详细信息面板中，找到OnClicked事件。
2. 点击右侧的+号，创建按钮点击事件的函数。

2. 实现游戏启动函数

在事件处理函数中，我们可以实现启动游戏的逻辑：

// 当单击开始游戏按钮时，加载游戏关卡
Open Level("GameLevel");  // 替换为您的游戏关卡名称

3. 退出游戏功能

对于退出游戏按钮的处理，您可以同样创建一个事件，如下所示：

// 当单击退出游戏按钮时，结束游戏
QuitGame();

四、合理布局和美观设计

在设计菜单时，除了功能，布局的美观性也是至关重要的。您可以通过调整不同组件的Padding、Margin，以及Z-Order（层级顺序）来确保您的菜单界面清晰易用。

1. 使用锚点和调整布局

• 将Vertical Box的锚点设置在画布的中心，以确保菜单在不同分辨率下保持居中。
• 适当调整按钮之间的间距，使得按钮之间不会挤在一起，增加用户的点击体验。

2. 使用交互效果

您可以给按钮添加一些交互效果，比如悬停、按下的效果，以提升用户体验。这可以通过为按钮添加Hover和Pressed状态来实现，您可以在按钮的详细信息面板中进行设置。

五、总结

在这篇教程中，我们创建了一个简单的主菜单界面，并为按钮添加了基本功能。学习如何创建简单的菜单和按钮是游戏UI设计的基础，它们为玩家提供了与游戏的第一道接口。在下一篇的UI设计之UI事件与响应中，我们将继续深入，讨论如何处理更复杂的用户交互和响应机制。

希望通过本教程，您在UE5 UI开发的路上更进一步，能够设计出更为丰富和引人入胜的游戏界面！