前言

Unreal Engine重要概念 - UMG（Unreal Motion Graphics）

Unreal Engine重要概念 - UMG（Unreal Motion Graphics） - 知乎

基本信息

1. 控件（Widgets）

控件是 UI 的基本单位，就像拼积木一样：

控件名称 说明 常见用途
Text 显示一段文字 显示血量、任务说明、名字等
Image 显示图片或图标 技能图标、头像、背景等
Progress Bar 进度条，可以用来显示某个数值变化的条 血条、经验条、技能冷却条
Button 可以点击的按钮 菜单选项、对话选项
Canvas Panel 允许你自由定位其他控件 通常用于主界面、HUD 布局
Vertical Box / Horizontal Box 用来垂直/水平排列控件 对话选项、物品列表、任务列表
Overlay 控件层叠显示（上下叠加） 技能图标 + 冷却进度 + 数量

2. 层级结构（控件树）

UMG 的界面是“树形结构”的，最外层是容器（比如 Canvas Panel），内部再嵌套各种控件。

比如一个任务提示 UI：

  • Canvas Panel（整体布局）
    • Border（背景框）
      • Text（任务内容）
      • Text（进度百分比）

这种结构就像网页的 HTML 一样，嵌套使用。

3. 绑定数据 & 交互逻辑

UMG 不只是静态画面，它能与游戏里的数据互动，比如：

  • 显示玩家当前生命值
  • 点击按钮进入下一关
  • 显示背包中有哪些物品
  • 玩家进入新区域后显示提示

通过 数据绑定，UMG 会实时显示游戏里的状态变化。

主要控件

🧩 UMG核心控件分类

一、面板控件（Panel Widgets）

控件名称 功能描述 关键特性
Canvas Panel 自由布局容器 ✅ 支持锚点(Anchors)和绝对定位
✅ 动态适配不同分辨率
Grid Panel 表格布局容器 🔳 行/列自动分割
🔄 子控件可跨行/列合并
Horizontal Box 水平排列容器 ➡️ 自动横向排列子控件
📏 支持Size to Content(自适应内容尺寸)
Vertical Box 垂直排列容器 ⬇️ 自动纵向排列子控件
⚖️ 支持比例填充(填满剩余空间)
Overlay 层叠容器 📚 支持多层控件叠加
🔼 通过Z-Order控制显示层级
Safe Zone 异形屏适配容器 📱 自动避开刘海/挖孔区域
🛡️ 支持四向独立安全区设置

二、输入控件（Input Widgets）

控件名称 类型 交互特性
Button 基础按钮 🔘 四态样式(Normal/Hovered/Pressed/Disabled)
🔗 点击事件绑定
ComboBox(String) 下拉选择框 📋 文本选项列表
⌨️ 支持键盘快速选择
Editable Text 单行输入框 ✏️ 实时文本编辑
🚫 自带输入校验基础功能
Editable Text(Multi-Line) 多行输入框 ↵ 支持回车换行
📄 大段文本输入优化
Slider 滑动条 🎚️ 线性值调节(0.0-1.0)
📈 支持步进(Step)设置
Spin Box 数字调节框 🔢 精确数值输入
➕➖ 附带增减按钮

三、通用控件（Common Widgets）

控件名称 渲染能力
Image 🖼️ 支持纹理/材质/纯色块
🎨 九宫拉伸(Box Hospitality) + 染色(Tint)
Text Block 🔤 静态文本渲染
⚠️ 不支持富文本(需第三方插件)
Rich Text Block ✨ 富文本渲染
✅ 混合样式/内嵌图片/超链接
Progress Bar ████████ 进度可视化
🌀 支持Marquee模式(无进度值的滚动动画)
Border 🟦 容器装饰控件
🎯 定义背景+边距+边框样式

四、高级功能控件

控件名称 核心用途
Widget Switcher 🔀 多页面切换器
💡 实现选项卡(Tab)界面
Retainer Box ⚡ 渲染性能优化
📉 降低动画更新频率(如每秒10帧而非60帧)
Named Slot 🧩 预留插入点
🚀 运行时动态加载子控件
Radial Slider 🎡 圆形滑块
⭕ 旋转角度输入(适用方向盘/罗盘UI)

五、开发者工具

功能 操作路径
创建自定义控件 右键 → User Interface → Widget Blueprint
控件嵌套 将控件蓝图拖入其他UMG画布
动态控件生成 使用Create Widget+AddChild节点

⚙️ 性能优化专项控件

```mermaid
graph TD
A[Size Box] –>|约束动态元素尺寸| B(减少布局计算)
C[Invalidation Box] –>|局部重绘区域| D(降低GPU负担)
E[Retainer Box] –>|控制渲染频率| F(优化动画性能)