UE4入门之路（UI篇）：UMG系统介绍

xiaozongpeng · 发表于 2021-12-14 21:26

一、关于UE4

2017年，多款基于虚幻引擎4（简称UE4）开发的游戏开始崭露头角，如果将2017年比作虚幻引擎爆发的元年，那么2018年则是虚幻引擎以及Epic Games再创新高，实现自我超越的一年。2018年7月UE4的开发者人数突破630万，中国的使用者仅次于美国，位居世界第二。2017年11月至2018年7月短短不到9个月间，UE4用户数自400万增至630万，足足成长了60%。在2018年UE4对于各行各业和不同国家的影响力表明了Epic Games已经突破游戏引擎的界限，把UE4带向了新的爆发点。

由于UE4强大的渲染效果，一些影视作品或者短片都开始尝试使用UE4来进行制作。

二、优势分析

从引擎的角度来说，UE4有很多优势，例如强大的渲染效果，先进的VR技术等。但是从界面开发者的角度分析，个人认为主要优势有以下几点：
实时预览
由于UE4是一个全方位的平台，而不再是一个工具，所以在制作UI的同时你也可以实时预览游戏中的效果，在跑查和迭代时更加快捷方便。
3DUI
代入感和沉浸感一直是设计师们在游戏设计中十分关注点，而3DUI就是目前比较热门的一个研究方向。但是基于cocos的开发方式在制作3DUI时局限性较强，十分依赖美术的效果。而UE4中创建3DUI的方法十分快捷方便，再加上能够实时预览游戏效果，使得UX对设计效果有着更强的把控性。
蓝图系统
UE4强大的蓝图系统通过可视化编程的方式使得开发者可以不写一行代码就能完成整个游戏的设计与开发。所以只要功夫深，UX也可以实现基本的游戏效果。
三、界面介绍软件界面

软件的界面十分易于理解，就不多做介绍了。
在UI相关的工作中，主要会用到以下几种文件：

Blueprint（ User Inteface-Blueprint）也就是常说的UMG，是我们常用的UI工程文件
Font（字体资源拖入Content Browser自动生成）字体文件
Texture (PNG资源拖进来可以自动生成) 图片资源文件
Material 材质文件，可用于UI材质或者mesh材质
Actor（Blueprint Class-Actor）可以摆放到场景中的文件类型，用于制作3DUI

UMG编辑界面

控件基本属性

由于所有控件的Detail都是由一个属性池内的各个属性构成，因此在这先对通用的属性进行介绍，再具体介绍每个控件的一些不同之处。
3.1 Common 通用属性

通用设置面板

控件名
由于UE4的控件名在单个文件内是全局检索的，因此一个文件里不可能存在两个一样的名字，这样做的好处是程序可以直接调用控件名进行代码编写，而我们则需要更规范的命名。一般我们的做法是命名成：控件类型_父节点_功能名如btn_lobby_back。
Is Variable

勾选后将作为变量出现在蓝图里并进行调用

变量越多，读表用时越长，因此程序未引用的图层尽量不要勾选。如image就是默认勾选variable的，其实没有必要。
搜索框
能够快速检索需要的detail栏内内容
3.2 Slot 插槽

插槽设置面板

Alignment 校准点

坐标代表这个点在本控件上的位置，（0,0）代表左上角  （1,0）代表右下角
为什么和ccs不一样！！！
Anchors 锚点
UMG中通过锚点与校准点来进行适配，可以总结成三种：
   1.九点适配（以中心点为例）

可以设置的内容有：校准点与锚点的XY距离+控件XY尺寸。
2.根据父节点单轴尺寸(长或宽)适配

可以设置的内容：与单轴两端距离+另一轴的控件坐标+另一轴的控件尺寸。
3.根据父节点尺寸适配

可以设置的内容：与父节点的四个边缘的距离。
Size to content 尺寸适应内容
功能和名字一样，会检索子节点或自身资源，并自动调整尺寸。个人感觉用途极广，很多地方可以不需要麻烦程序大大动态调节。

聊天气泡

Z Order Z轴顺序
UMG在渲染时是按Panel中图层从下至上的层级来渲染效果的，但是对于Canvas Panel例外。Canvas Panel的所有子集都是平行关系，因此有些时候会出现上方图层渲染层级高于下方的图层，这个时候可以调Zorder强行调整渲染层级。但是要尽量少用，会占用额外的渲染开销。另外，z轴顺序调整局限于该控件的父集内部，不能叠加。

                                             在上图顺序中，bg_1的显示层级低于bg_2                                                                                                       因为panel_1的Zorder低于panel_2不能按照-10+20=10&amp;amp;amp;amp;gt;0来计算

3.3 Appearance 外观
Style

Style设置面板

根据控件的类型不同会有不同状态需要引用资源，如此处为button的normal态。
直接将资源拖到这里就可以进行引用（大部分控件都自带默认资源）。

Tint
可以对目前状态下的资源进行染色
Draw As
None 不渲染，可表现为全透明像素，但是可以保持有交互性
Box    九宫拉伸，margin为九宫的百分比，无法设置具体像素
Border  与九宫类似，但是中空，拉伸区域采用重复拼贴来填充
Image  直接拉伸

三种渲染方式的示例
Color and Opacity

本处染色对整个控件进行染色，即所有状态的资源都会叠加上这个颜色。
Color Picker 拾色器

UE4调色板

与PS中对应的是Hex sRGB色号但是PS中采用的16进制色号为6位 UE4中的为8位

将new/old里面的颜色可以拖到这里保存为全局颜色，在项目管理的时候十分方便。

3.4 Font 字体

字体设置面板

Size 尺寸
UMG制作时默认dpi为96像素/英寸，psd默认dpi是72像素/英寸。
在GUI设计时将dpi设为96，或者将72dpi下字体的字号乘以0.75，都能还原效果图中的效果。
Font Material 字体材质
UE4中可以对UI附加材质来实现贴图效果

图中两个样例左侧为材质，右侧为应用了材质后的字体效果

用这个方法来处理文本可以使字体+材质来获得多种多样的文本效果，可以一定程度上减少图片文字的使用，减少多语言合图的开发压力。

H50的多语言合图

Justification 对齐方式

相信你肯定要问为什么只能调整垂直方向的对齐方式，（之前我被困扰了很久！）
后来发现UE4的对齐逻辑基本上都靠控件与panel之间的相对位置来进行，因此此处若要调整竖直方向的对齐方式可以在外嵌套sizebox。

Wrapping 自动换行

这里提供了两种文本自动换行的方法，两者不能同时生效。

根据父节点的尺寸自动换行
当单行文本内容达到某一像素长度时进行换行（设为0代表不自动换行）

注意：如果需要文本能够在打断英文单词来进行换行，则需要额外勾选 Allow Per Character Wrapping，否则一个超长单词是不会被打断来进行换行的

另外，Appearance下的AutoWrapText一般是不勾上的。
3.5 Interaction 交互性

is focusable勾选后，这个控件在接收到点击事件时会打断其他所有正在进行的操作。
此处的勾选应该视情况而定，强打断性的界面入口可以通过勾选来打断移动、攻击等操作。
而如果技能、吃药、切换武器等需要同时配合其他操作的入口则不能勾选。

明日之后主界面Focusable分析

点击下拉之后可以对控件的交互行为进行更细节的设置
例如当button的点击事件阻挡了Scrollbox接收滑动事件时，则可以将Touch Method设为Precise Tap。
3.6 Behavior 行为
Tool Tip Text 悬停提示
鼠标悬停的时候显示的提示文字内容
Visibility 可见性
此处可以控制游戏中的显示效果，但不影响在UMG制作时的显示与隐藏。

Visible 可见并接受交互事件
Collapsed 不可见且不占用任何体积
Hidden 不可见但占用体积，不接收交互事件
Hit test invisible 可见，且他和他的子节点都不接受点击事件
Set hit test visible 可见，且他自身不接受点击事件，不影响子节点

由于visible状态可以接受交互事件，因此在收到交互事件的时候会遍历目前所有visible状态的UI控件，因此可见但不可交互的控件的visibility调成Set hit test visible会提高计算速度。
有许多控件的默认状态就是visible，例如image，因此在确认控件不接收交互事件时可以设为set hit test invisible可以减少不必要的开销。
Render Opacity 渲染透明度
控件的整体透明度设置
3.7 Clipping 裁切

需要裁切选为clip to bounds即可

3.8 Render Transform 渲染变形

渲染变形这一块比较基础就不多做介绍了。
但是，需要注意的Archor，Alignment，Pivot是三个不同的点。在cocos里面alignment和pivot是两个相同的点：

3.9 Events 事件
可以通过对控件绑定事件来实现交互效果，点击之后会进图蓝图系统。蓝图系统十分强大，甚至可以通过直接连蓝图的方式完成游戏的设计，这里就不展开细说了。

Events设置

四、常用控件介绍

UMG中常用的控件类型有四种：

4.1 Image 图片
图片不能添加子节点

图片的属性包括 Slot、Appearance、Behavior、Render Transform、Clipping，具体内容可以查询前面的介绍。
由于image的原始资源就是一个白色块，因此任何纯色块资源都不需要额外出资源，只需对image进行染色即可。
这里需要特别注意的是：image不仅仅可以引用图片资源，可以添加材质资源，可以通过材质来制作粒子、模型、特效等等丰富的效果。
4.2 Text 文本
文本不能添加子节点

文本的属性包括Slot、Font、Behavior、Warpping、Render Transform、Clipping，具体内容可以查询前面的介绍。
在Content内输入内容，可以通过shift+enter进行换行
4.3 Rich Text 富文本
富文本格式可以在一个文本框内显示出不同的字体格式甚至图片文字，为了实现这一效果，我们首先要创建一个字体格式表格。

然后就可以在UMG中引用这个表格资源来设置文本。

4.4 Button 按钮
按钮控件可以添加一个子节点。

按钮的属性包括Slot 、Appearance、Interaction、Behavior、Render Transform、Clipping，具体内容可以查询前面的介绍。
值得注意的是按钮有Normal/Hovered/Pressed/Disabled四种状态，在开发时至少需要为前三种设置资源。
4.5 CheckBox 复选框
复选框控件可以添加一个子节点。

按钮的属性包括Slot、Appearance、Interaction、Behavior、Render Transform、Clipping，具体内容可以查询前面的介绍。
4.6 Progress Bar 进度条
进度条不能添加子节点。

由于UE4中没有环形进度条控件，需要结合材质与蓝图系统来实现一个环形进度条的效果，具体流程可参见：https://www.youtube.com/watch?v=9NtSfPq95fQ
4.7 Slider 滑块
滑块不能添加子节点。

4.8 Text Box 文本输入框
输入框不能添加子节点
文本输入有单行输入(Common>Text Box)和多行输入(Input>Text Box Multi-Line)两种。

本质上等同于button+text，不多做介绍。
4.9 Combobox 下拉框
下拉菜单不能添加子节点。

4.10 Canvas Panel 画布面板
画布面板是一种基础的面板，其允许在任意位置布局、固定控件，并将这些控件与画布的其它子项按Z轴顺序排序。画布面板是非常适用于手动布局的控件。

如上图，只有Canvas Panel可以这么随意的摆放控件位置，但也更难对齐。因此一般有较强的栅格系统的设计排版不建议采用Canvs Panel。
4.11 Horizental/Vertical Box 水平/竖直框
水平框和竖直框的内容基本一致，因此在这一并介绍了。

值得注意的是子控件的Slot属性发生了变化。

有两个需要重点关注的地方：

通过padding设置子控件之间的间距

如果是数量确定，内容确定的列表，可以手动设置padding。

如果数量不确定或内容不确定需要程序动态添加的列表，则需要把间距提前设计好放在node中。

子控件的尺寸不再能自由定义

这里提供了两种调节尺寸的方式
Auto代表自动调节尺寸，与之前Slot中的Size to Content一致
Fill代表自动填满剩余空间
这里展示一下不同设置的效果

4.12 Grid Box 网格面板
网格面板可以为你创建一套网格系统，并让子控件在该网格内进行布局。

一个栅格系统

上图的网格系统将区域划分为了一个3x6的网格，其中第二行的高度是其余两行的两倍，那么我们就可以设置GridBox。

GridBox网格设置

划分好网格后，只需设置子节点的参数即可占用网格。

GridBox子节点设置

4.13 Scroll Box 滚动框
滚动框容器使得内容过多时可以在限定范围内进行滚动。

4.14 SafeZone 安全区
安全区控件的子节点会自动避开全面屏的安全区来进行适配。

预览安全区控件在iphone X上的效果

屏幕尺寸调整区域可以修改刘海屏的方向来测试

SafeZone还可以设置只对某一个方向的安全区生效（比如攻击按键只想在iPhoneX上左右偏移，不会向上偏移）。

设置生效的安全区

4.15 Warp Box 自动换行容器
该控件会将子控件从左到右排列，超出其宽度时会将其余子控件放到下一行。常见于背包或仓库的设计中。

个人觉得有发展为折叠屏设备的适配容器的潜力 (ω)

折叠屏适配方法

绿框为wrapbox 蓝框为item

4.16 Widget Switcher 选项卡切换器
控件切换器常见于Tab切换页面，切换器的子控件中每次一次最多只会显示一个。

选项页切换

4.17 Background Blur 背景模糊
这是一个能够自动模糊下层的效果。

4.18 User Created
所有创建好的UMG都可以在User Created里面被检索到。

项目中创建的widget都能在这找到

也就是我们常说的node，而Named Slot就是为这些node的引用提供坐标和尺寸的，和ccs中的节点有点类似。
五、动画系统介绍

UMG的动画也是采用序列帧的方式来实现的。

序列帧轨道介绍

序列帧中可以设置的属性极其丰富，基本包含了前面所有介绍过的控件属性。

关键帧曲线调整

关键帧曲线调整
在序列帧区域的快捷方式：

CTRL+鼠标滚轮缩放时间轴
SHIFT+鼠标滚轮滚动时间轴

六、结语

如果你能看到这里，恭喜你，大概你已经忘得差不多了吧
软件的学习还是要靠实际的操作才能理解与发现问题，所以赶紧实践一下吧。
当然笔者也是在一边摸索一边开发，如果有描述不完整或者有误的地方，欢迎指正与讨论。
<hr/>最后的最后，对游戏知识感兴趣的小伙伴，快快加入我们，学习更多游戏干货。

Zephus · 发表于 2021-12-14 21:26

干货[赞同]

xiangtingsl · 发表于 2021-12-14 21:28

它又来了

Arzie100 · 发表于 2021-12-14 21:32

[赞同]

ChuanXin · 发表于 2021-12-14 21:40

看着好强大，跟3ds max有啥区别特点吗

FeastSC · 发表于 2021-12-14 21:43

童鞋肯定没有好好看文章吧
[不抬杠]

jquave · 发表于 2021-12-14 21:49

总结全面
[爱心]

Mecanim · 发表于 2021-12-14 21:56

一起学习ue4 哔哩哔哩 ( ゜- ゜)つロ乾杯~ Bilibili

Arzie100 · 发表于 2021-12-14 22:02

（0,0）代表左上角（1,0）代表右下角？？？

RhinoFreak · 发表于 2021-12-14 22:06

(1, 1)才是右下角

		自动登录	找回密码
密码			立即注册

UE4入门之路（UI篇）：UMG系统介绍

本帖子中包含更多资源