当前位置：首页 > news >正文

UE5新手教程：10分钟用UMG蓝图搭建游戏主菜单

news 2026/7/12 1:22:47

1. 项目概述：为什么主菜单是UE5新手的第一道坎？

如果你刚接触虚幻引擎5，面对琳琅满目的功能面板和复杂的蓝图系统，可能会感到无从下手。很多教程一上来就教你搭建场景、制作角色，但一个完整的游戏体验，往往是从一个清晰、交互流畅的主菜单开始的。主菜单不仅是玩家接触游戏的第一印象，更是连接游戏各个功能模块（如开始游戏、设置、退出）的枢纽。对于新手而言，跳过这一步直接进入游戏逻辑，后期再回头补做UI，往往会遇到界面与游戏逻辑脱节、状态管理混乱等问题。

这个项目，就是带你用UE5内置的UMG（Unreal Motion Graphics）系统，特别是HUD（平视显示器）和控件蓝图，在10分钟内搭建一个功能完整、可扩展的游戏主菜单。我选择这个方案，是因为它完美契合了新手快速上手的核心诉求：可视化、逻辑清晰、与游戏世界解耦。你不用写一行C++代码，全程在蓝图编辑器中通过拖拽和连线就能完成。更重要的是，通过构建主菜单，你能一次性掌握UE5 UI开发的核心工作流——从界面设计、事件绑定到场景管理，这是后续制作游戏内HUD、暂停菜单、道具栏等所有UI的基础。

在开始前，你需要确保已经安装了Epic Games启动器和虚幻引擎5（建议使用5.3或以上版本）。项目模板选择“空白”或“第三人称”都可以，我们更关注UI逻辑本身。接下来，我会手把手带你走过每一个环节，并附上我踩过坑后总结的“避坑指南”，确保你一次成功。

2. 核心工具解析：HUD与控件蓝图的分工与协作

很多新手会混淆HUD和控件蓝图（Widget Blueprint）的概念，这是第一个需要厘清的关键点。它们分工不同，但协同工作，共同构成了UE5的UI体系。

2.1 控件蓝图：UI的“视觉与逻辑容器”

你可以把控件蓝图理解为一个独立的、可重复使用的UI“零件”或“页面”。它包含两部分：

设计器（Designer）：一个所见即所得的画布，让你通过拖拽按钮（Button）、文本（Text）、图片（Image）、进度条（Progress Bar）等控件来搭建界面布局。
图表（Graph）：一个蓝图脚本编辑器，用于为这个界面编写交互逻辑，比如“点击开始按钮后该做什么”。

在这个主菜单项目中，我们会创建一个名为WBP_MainMenu（前缀WBP是Widget Blueprint的常见约定）的控件蓝图。它里面就放着“开始游戏”、“设置”、“退出游戏”这几个按钮，以及背景图、标题文字等。

2.2 HUD：UI的“舞台经理”与“游戏状态显示器”

而HUD，通常指的是一个继承自HUD类的蓝图（如BP_PlayerHUD）。它的核心职责有两个：

管理UI控件的生命周期：决定在游戏的什么时机（如游戏开始、角色死亡、暂停时），创建哪个控件蓝图实例，并将其“添加”到玩家的屏幕上或“移除”。
绑定并更新游戏数据：实时从游戏角色（Player Character）、游戏状态（Game State）等对象获取数据（如血量、分数、弹药），并驱动UI控件上的对应元素（如进度条、文本）进行更新。

对于主菜单，我们通常不会用一个传统的、持续显示的HUD来管理它。因为主菜单是一个独立的、非游戏的状态。更常见的做法是：用一个专门的游戏模式（Game Mode）和玩家控制器（Player Controller）来负责主菜单的显示和逻辑。这是新手最容易困惑的地方，也是我们“避坑指南”的重点。

避坑指南：主菜单到底该由谁管理？如果你试图在游戏进行中的HUD里创建主菜单控件，会发现菜单和游戏画面重叠，且输入控制混乱。正确做法是：为菜单场景单独设置一个游戏模式。在这个模式里，玩家控制器默认不显示游戏角色的HUD，而是显示我们创建的主菜单控件蓝图。这样逻辑就清晰隔离了。

所以，在本项目中，我们将采用更标准、更易管理的架构：创建一个主菜单关卡，并使用控件蓝图自身的事件和关卡流送来处理所有逻辑。HUD的概念在本项目中更多是作为一种知识背景来理解，实际操作用到的核心工具就是控件蓝图。

3. 十分钟实操：从零搭建主菜单全流程

现在，我们进入核心实操环节。请打开你的UE5编辑器，跟着步骤一步步操作。

3.1 第一步：创建主菜单控件蓝图（2分钟）

在内容浏览器中右键点击，选择用户界面 -> 控件蓝图。将其命名为WBP_MainMenu。
双击打开WBP_MainMenu，你会进入设计器界面。默认有一个Canvas Panel（画布面板），它允许你以绝对坐标放置控件，适合做菜单。
从左侧的控件面板中，拖拽以下控件到层级视图中：
- 一个Image控件：作为背景。将其锚点（Anchors）设置为“填充”（Stretch），使其铺满整个屏幕。在细节面板中，为其外观（Appearance）下的“颜色与不透明度”（Color and Opacity）选择一个深色，并可以指定一个纹理作为背景图。
- 一个Text控件：作为游戏标题。将其放置在顶部居中位置，调整字体大小和颜色。
- 一个Vertical Box控件：作为按钮的垂直容器。将其拖到画布中央。设置其锚点为居中。
- 向Vertical Box中拖入三个Button控件：分别重命名为StartButton、SettingsButton、ExitButton。
- 在每个Button内添加一个Text控件：修改文本内容为“开始游戏”、“游戏设置”、“退出游戏”。你可以通过调整按钮和文本的样式（如字体、颜色、悬停效果）来美化界面。

你的界面层级应该大致如下：

Canvas Panel ├── BackgroundImage (锚点：填充) ├── TitleText └── VerticalBox (锚点：居中) ├── StartButton │ └── ButtonText (文本：“开始游戏”) ├── SettingsButton │ └── ButtonText (文本：“游戏设置”) └── ExitButton └── ButtonText (文本：“退出游戏”)

3.2 第二步：为按钮添加点击逻辑（3分钟）

点击编辑器右上角的“图表”（Graph）按钮，切换到蓝图脚本界面。
在图表中右键，搜索“Event Construct”并添加。这个事件在控件被创建时调用，适合做一些初始化。
我们需要为按钮绑定点击事件。在“我的蓝图”面板的变量列表中，找到你的StartButton。将其拖入图表，释放后选择“获取 StartButton”。
从StartButton节点的输出引脚拖出引线，搜索并选择“OnClicked (Delegate)”。这会自动创建一个事件节点，当按钮被点击时，这个事件就会被触发。
用同样的方法，为SettingsButton和ExitButton创建OnClicked事件。

现在，你的图表里应该有Event Construct和三个按钮的OnClicked事件。接下来实现具体功能。

3.3 第三步：实现开始游戏与场景切换（3分钟）

这是核心功能。我们点击“开始游戏”后，需要关闭菜单界面并加载游戏主关卡。

在StartButton的OnClicked事件后，右键搜索“Remove From Parent”节点并添加。这个节点的作用是将当前控件从其父级（即屏幕）中移除。连接执行引脚。
移除菜单后，需要加载游戏关卡。从Remove From Parent的执行引脚引出，右键搜索“Open Level”节点。
在Open Level节点的“Level Name”输入框中，填入你游戏主关卡的名字（比如“MainMap”）。你需要提前创建或知道这个关卡的名字。
（可选但推荐）在Open Level之前，可以添加一个“Set Input Mode Game Only”节点，并从“玩家控制器”引脚获取“获取玩家控制器”节点。这能确保关卡加载后，输入焦点正确交还给游戏角色，而不是残留的UI。

StartButton的蓝图脚本应该类似这样：

[StartButton OnClicked] -> [Remove From Parent] -> [Set Input Mode Game Only] -> [Open Level (Level Name: “MainMap”)]

3.4 第四步：实现设置与退出功能（2分钟）

设置按钮：通常，设置菜单是另一个独立的控件蓝图（如WBP_Settings）。点击设置按钮后，我们不应移除主菜单，而是创建并显示设置菜单。在SettingsButton的OnClicked事件后：
- 右键搜索“Create Widget”节点，将“Class”设置为你的WBP_Settings。
- 从“Return Value”引出，搜索“Add to Viewport”节点。这将把设置菜单覆盖在主菜单之上显示。
- 为了更好的体验，可以再连接一个“Set Focus”节点，让设置菜单获得输入焦点。
退出按钮：实现退出游戏功能非常简单。在ExitButton的OnClicked事件后，右键搜索“Quit Game”节点并连接即可。

至此，一个具备基础功能的主菜单控件蓝图就完成了。编译并保存。

3.5 第五步：在关卡中显示主菜单（1分钟）

主菜单控件做好了，但怎么让游戏一启动就显示它呢？

创建一个新的空白关卡，保存为MainMenuMap。这将是你的主菜单关卡。
打开“世界场景设置”面板（菜单栏：窗口 -> 世界场景设置）。
找到“游戏模式”部分，点击“游戏模式重载”后面的下拉框，选择“创建新的游戏模式蓝图”。将其命名为GM_MainMenu。
双击打开GM_MainMenu蓝图。在左侧的“类默认值”面板中，找到“HUD类”。注意，这里我们不设置HUD类，而是通过玩家控制器来显示UI。
在同一面板，找到“玩家控制器类”，点击下拉框选择“创建新的玩家控制器蓝图”，命名为PC_MainMenu。
双击打开PC_MainMenu蓝图。在事件图表中，右键添加“Event BeginPlay”节点。
从Event BeginPlay引出，添加“Create Widget”节点，将“Class”设置为我们的WBP_MainMenu。
从“Return Value”引出，先添加“Add to Viewport”节点，再添加“Set Show Mouse Cursor”节点，并将其“Show Mouse Cursor”参数勾选为True（这样鼠标光标才会显示）。
最后，再连接一个“Set Input Mode UI Only”节点。这是关键一步，它将输入模式设置为仅UI交互，防止玩家误操作触发任何游戏角色行为。

PC_MainMenu的Event BeginPlay脚本如下：

[Event BeginPlay] -> [Create Widget (Class: WBP_MainMenu)] -> [Add to Viewport] -> [Set Show Mouse Cursor (True)] -> [Set Input Mode UI Only]

回到MainMenuMap关卡的世界场景设置，确保“游戏模式”选择为我们刚创建的GM_MainMenu。
最后，在项目设置（编辑 -> 项目设置）的“地图和模式”部分，将“编辑器启动地图”和“游戏默认地图”都设置为MainMenuMap。

现在，点击运行，你的游戏就会从主菜单开始了！点击“开始游戏”会切换到主关卡，点击“退出游戏”会关闭程序。

4. 避坑指南与进阶技巧实录

按照上面的步骤，你应该能顺利做出主菜单。但实际开发中，总会遇到一些“诡异”的问题。下面是我总结的几个常见坑点及其解决方案。

4.1 输入控制混乱：菜单与游戏操作冲突

问题：在主菜单界面，按WASD键角色却在动，或者菜单按钮点击没反应。
根源：输入模式没有正确设置。游戏默认是“Game Only”模式，输入直接传递给角色。
解决方案：
- 在菜单玩家控制器（PC_MainMenu）中：必须在显示菜单后，立即执行“Set Input Mode UI Only”。这会将所有输入优先传递给UI。
- 在切换到游戏关卡时：在Open Level节点前，执行“Set Input Mode Game Only”并移除所有UI控件。确保游戏关卡使用的玩家控制器类是正确的游戏控制器（通常引擎会自动处理，但最好检查关卡世界设置）。
进阶技巧：对于更复杂的情况（如带背景动画的菜单），可以使用“Set Input Mode Game and UI”。这允许UI和游戏同时接收输入，但你需要通过设置UI控件的“Is Focusable”和游戏控制的优先级来精细管理。

4.2 关卡加载黑屏或卡顿

问题：点击“开始游戏”后，屏幕黑屏一段时间才进入。
根源：Open Level是同步加载，会阻塞游戏线程直到关卡资源全部加载完毕。
解决方案：使用异步加载并提供加载界面。
1. 创建一个“加载中”控件蓝图WBP_LoadingScreen，包含一个旋转的图标或进度条。
2. 在StartButton点击后，不直接Open Level，而是： a. 创建并显示WBP_LoadingScreen。 b. 使用“Async Load Level”节点开始异步加载目标关卡。 c. 绑定该节点的On Load Completed事件，在事件中移除加载界面并执行“Open Level”（此时因为已加载，会瞬间打开）。
3. 你还可以在加载界面中，利用“Get Level Load Percentage”节点更新进度条，提升体验。

4.3 控件显示异常或位置错乱

问题：在不同分辨率或屏幕比例下，菜单按钮位置跑偏，或者不居中。
根源：使用了绝对坐标位置，或者锚点设置不当。
解决方案：
- 善用锚点（Anchors）：对于需要居中显示的元素（如按钮容器Vertical Box），将其锚点设置为屏幕中心。对于需要铺满全屏的背景，锚点设置为“填充（Stretch）”。
- 使用布局控件：Canvas Panel虽然自由，但难以自适应。多使用Vertical Box、Horizontal Box、Grid Panel等自动布局控件，它们能根据子控件自动调整排列。
- 预览不同分辨率：在设计器顶部的“预览窗口大小”下拉菜单中，切换不同的分辨率（如1920x1080, 2560x1440, 手机分辨率等），检查UI适配情况。

4.4 音效与视觉反馈缺失

问题：点击按钮时干巴巴的，没有反馈，体验生硬。
解决方案：
- 按钮音效：在按钮的细节面板中，找到“样式（Style）”下的“声音（Sounds）”，可以为“悬停时（Hovered）”和“点击时（Pressed）”指定音效。
- 视觉反馈：在按钮样式中，可以分别设置“正常（Normal）”、“悬停（Hovered）”、“按下（Pressed）”、“禁用（Disabled）”状态下的外观（颜色、图片、字体等）。简单的颜色变化就能带来很好的反馈。
- 动画：UMG支持简单的动画序列。你可以为按钮点击创建一个微小的缩放动画（如点击时缩放到0.9倍，然后弹回），让交互更生动。

4.5 如何优雅地实现“返回”功能

场景：从主菜单进入设置菜单后，需要能返回主菜单。
方案：不建议用Open Level重新打开主菜单关卡，开销大且状态丢失。推荐使用控件堆栈管理。
1. 在玩家控制器中，创建一个控件数组变量WidgetStack来管理当前打开的UI。
2. 每次Add to Viewport一个新控件（如设置菜单）时，先将当前最顶部的控件（主菜单）的可见性设置为“折叠（Collapsed）”或“隐藏（Hidden）”，再将新控件入栈并显示。
3. 当需要返回时（如点击设置菜单的返回按钮），从栈顶移除当前控件（设置菜单）并销毁，然后将栈中下一个控件（主菜单）的可见性恢复为“可见（Visible）”并重新获得焦点。
4. 这种方法能实现流畅的界面切换，并保持所有控件的状态。

5. 从主菜单出发：UMG系统的深度探索

通过这个简单的项目，你已经掌握了UMG最核心的“创建-显示-绑定事件”流程。但这只是冰山一角。UMG系统非常强大，你可以基于此做更多扩展：

数据绑定：让UI元素自动响应游戏数据的变化。例如，在设置菜单中，将一个滑动条（Slider）的“值（Value）”绑定到一个保存图形质量的变量上。当滑动条变化时，变量自动更新，无需手动写事件去同步。这需要在控件蓝图中创建“绑定（Bind）”函数。
动画与状态机：UMG内置了动画编辑器，你可以为UI制作淡入淡出、滑动、高亮等复杂动画。还可以结合“状态机（Widget State）”，根据控件所处的不同状态（如正常、选中、禁用）播放不同的动画序列。
样式与主题：通过创建“控件样式（Widget Style）”资产，可以统一定义项目中所有按钮、文本框等的外观。修改样式资产，所有使用该样式的控件都会自动更新，极大提升开发效率和维护性。
与游戏逻辑通信：UI不仅是被动显示，也能主动驱动游戏。例如，在菜单中点击“新游戏”按钮，除了加载关卡，还可以向游戏实例（Game Instance）发送指令，重置玩家进度、初始化存档数据等。

我个人在实际项目中的体会是，UI开发占用的精力往往比预想的多。一个健壮、易扩展的UI架构至关重要。我建议在项目早期就规划好主要的控件蓝图、它们之间的通信方式（是直接引用还是使用事件分发器），以及数据管理的职责划分（是放在游戏实例、玩家状态还是单独的UI管理器中）。把基础打牢，后续增加功能、调试问题都会事半功倍。最后一个小技巧：为你所有的蓝图和控件使用清晰、一致的前缀命名规范（如WBP_、PC_、GM_），几个月后回看项目时，你会感谢自己的这个习惯。

查看全文

http://www.jsqmd.com/news/1170865/