UE5 UMG UI系统实战：从Widget到完整游戏界面

UI（用户界面）是玩家与游戏交互的桥梁。

不管是血条、菜单、背包、对话框，还是过场字幕，都是UI的一部分。UE5的UI系统是UMG（Unreal Motion Graphics），用拖拽的方式摆放UI元素，用蓝图控制逻辑。

这篇文章把UMG的核心知识讲清楚，学完你就能做大部分常用的游戏UI了。

UMG编辑器界面

创建一个Widget Blueprint（右键 → User Interface → Widget Blueprint），双击打开，界面分几个区域：

• 设计器（Designer）：所见即所得的UI编辑区域，拖拽UI元素到这里
• 控制板（Palette）：所有可用的UI元素（按钮、文本、图片、进度条等）
• 细节面板（Details）：选中UI元素后，在这里改属性
• 我的蓝图（My Blueprint）：管理这个Widget里的变量、函数、事件
• 图表（Graph）：写UI的逻辑（按钮点击后触发什么、血量变化时血条怎么变）

常用UI元素

1. Image（图片）

显示一张图片，最常用。可以用来做：UI图标、背景、装饰元素。

重要属性：

• Brush > Image：选择要显示的贴图
• Color and Opacity：给图片叠加一个颜色（可以用来做”变暗”、”变红”等效果）
• Render Transform：控制图片的位置、旋转、缩放、倾斜

2. Text（文本）

显示文字。可以用来做：标题、对话、提示、数值显示。

重要属性：

• Content > Text：显示的文本内容
• Font > Font Family：字体（UE5支持导入自定义字体）
• Color and Opacity：文字颜色
• Justification：对齐方式（左对齐、居中、右对齐）

绑定变量： 可以把Text的内容绑定到一个变量（比如”血量：” + 血量变量）。在细节面板里点Bind → 创建绑定，会跳到图表，在里面写逻辑。

3. Button（按钮）

可点击的按钮。是最常用的交互元素。

重要属性：

• Appearance > Style：设置按钮在不同状态下的图片（正常、悬停、按下、禁用）
• Interaction > Is Enabled：是否可点击
• Interaction > Tool Tip Text：鼠标悬停时显示的文字提示

按钮事件： 选中按钮 → 细节面板拉到最下面 → Events → 点OnClicked旁边的+，会自动跳到图表，创建一个OnClicked事件节点。在这个事件里写点击后的逻辑。

4. Progress Bar（进度条）

显示百分比。常用来做：血条、经验条、加载进度。

重要属性：

• Percent：进度值（0.0到1.0之间）
• Fill Color and Opacity：进度条填充部分的颜色
• Style > Background Image：背景图片
• Style > Fill Image：填充图片

绑定变量： 把Percent绑定到一个变量（比如CurrentHP / MaxHP），这样血量变化时，血条会自动更新。

5. Slider（滑块）

让玩家拖动来调整数值。常用来做：音量控制、亮度调节。

重要属性：

• Value：当前值（0.0到1.0之间）
• Slider Color：滑块颜色

滑块事件： OnValueChanged事件在滑块值变化时触发，可以用来实时调整音量等。

UI动画：让界面”活”起来

静态的UI有点无聊，加点动画会好很多。UMG支持UI动画。

创建UI动画

1. 在UMG编辑器的工具栏里，点Animations旁边的+，创建一个动画
2. 双击动画，打开时间轴（Timeline）编辑器
3. 在Designer里选中一个UI元素，在细节面板里找到想要动画化的属性（比如Render Transform > Translation位置，或者Color and Opacity透明度）
4. 右键这个属性 → Key，在时间轴上添加一个关键帧
5. 移动时间轴指针，再改属性值，添加第二个关键帧
6. 播放动画：在图表里用Play Animation节点

常用UI动画效果

• 淡入淡出：改变Color and Opacity > A（透明度）
• 滑入滑出：改变Render Transform > Translation（位置）
• 缩放：改变Render Transform > Scale
• 旋转：改变Render Transform > Angle

在关卡中显示UI

Widget创建好了，要在关卡里显示出来：

1. 在角色蓝图或者Game Mode蓝图里，用Create Widget节点，选择你的Widget类
2. 用Add to Viewport节点把它加到屏幕上
3. 保存返回的Widget Object引用，后面要用它来更新UI内容（比如更新血条值）

移除UI： 用Remove from Parent节点。

UI与游戏逻辑的交互

UI不是孤立的，它需要获取游戏数据（比如玩家血量），也需要触发游戏逻辑（比如点击”开始游戏”按钮后，加载下一个关卡）。

从UI访问游戏数据

在Widget的图表里：

1. 用Get Player Character获取玩家角色
2. 转换成你的角色蓝图类型（比如Cast to BP_PlayerCharacter）
3. 然后就能访问角色蓝图里的变量（比如CurrentHP、MaxHP）

从UI触发游戏逻辑

比如点击”开始游戏”按钮后，要加载新的关卡：

1. 在按钮的OnClicked事件里
2. 用Open Level节点，填入关卡名

或者，如果要触发角色蓝图里的某个函数（比如”开始游戏”按钮让角色开始移动）：

1. 同样先获取玩家角色引用
2. 调用角色蓝图里的一个自定义事件或者函数（比如StartMoving）

实战案例：做一个完整的暂停菜单

暂停菜单是游戏里最常见的UI之一。完整流程：

步骤一：创建暂停菜单Widget

• 放一个Image做半透明背景
• 放一个Text显示”游戏暂停”
• 放三个Button：”继续游戏”、”重新开始”、”退出到主菜单”

步骤二：写按钮逻辑

• “继续游戏”按钮：用Set Game Paused节点（参数设成false），然后Remove from Parent移除暂停菜单
• “重新开始”按钮：用Open Level重新加载当前关卡
• “退出到主菜单”按钮：用Open Level加载主菜单关卡

步骤三：用ESC键呼出暂停菜单

在角色蓝图里：

1. 监听ESC键的输入事件（用Enhanced Input系统）
2. 当ESC按下时，用Create Widget创建暂停菜单，Add to Viewport
3. 用Set Game Paused节点（参数设成true），暂停游戏
4. 用Set Input Mode UI Only节点，让输入只响应UI（这样按键不会控制角色移动）

性能优化：UI也有优化空间

• 减少Draw Call：把多个UI元素合并到一张贴图里（用Widget Spooling或者Retainer Box）
• 不要用太多实时更新的Text：每一帧都更新Text会很费（比如显示FPS的Text，可以每秒更新一次，而不是每帧更新）
• 对于不动的UI元素：用Set Visibility > Hit Test Invisible，这样不会检测鼠标点击，减少开销
• 对于复杂的UI：用Pre Construct函数来预先构建，减少运行时的计算

招聘需求参考（Boss直聘，2026年6月）

看了30多个”UE5 UI程序员”职位，UMG相关要求：

• 熟练使用UMG：能做完整的游戏UI（菜单、HUD、对话框、背包）
• 会用UI动画：让界面有动态效果
• 理解UI与游戏逻辑的交互：知道怎么从UI访问游戏数据、怎么触发游戏逻辑
• 会优化UI性能：知道怎么减少UI的Draw Call
• 加分项：会用Common UI（UE5的新UI框架，更适合大项目的UI管理）、会写UI的C++代码

相关课程： 火星人教育UE5 UI培训课程，涵盖UMG完整工作流，结合实际游戏案例。