UE4入门之路（UI篇）：UMG系统介绍
2025-01-03 06:17
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都是由一个属性池内的各个属性构成，因此在这先对通用的属性进行介绍，再具体介绍每个控件的一些不同之处。
由于UE4的控件名在单个文件内是全局检索的，因此一个文件里不可能存在两个一样的名字，这样做的好处是程序可以直接调用控件名进行代码编写，而我们则需要更规范的命名。
一般我们的做法是命名成 ：控件类型_父节点_功能名 如btn_lobby_back。
如image就是默认勾选variable的，其实没有必要。
搜索框
能够快速检索需要的detail栏内内容
坐标代表这个点在本控件上的位置，（0,0）代表左上角 （1,0）代表右下角
为什么和ccs不一样！！！
Anchors 锚点
UMG中通过锚点与校准点来进行适配，可以总结成三种：
1.九点适配（以中心点为例）
可以设置的内容有：校准点与锚点的XY距离+控件XY尺寸。
2.根据父节点单轴尺寸(长或宽)适配
可以设置的内容：与单轴两端距离+另一轴的控件坐标+另一轴的控件尺寸。
3.根据父节点尺寸适配
可以设置的内容：与父节点的四个边缘的距离。
Size to content 尺寸适应内容
直接将资源拖到这里就可以进行引用（大部分控件都自带默认资源）。
Tint
可以对目前状态下的资源进行染色
Draw As
None 不渲染，可表现为全透明像素，但是可以保持有交互性
Box 九宫拉伸，margin为九宫的百分比，无法设置具体像素
Border 与九宫类似，但是中空，拉伸区域采用重复拼贴来填充
本处染色对整个控件进行染色，即所有状态的资源都会叠加上这个颜色。
UMG制作时默认dpi为96像素/英寸，psd默认dpi是72像素/英寸。
在GUI设计时将dpi设为96，或者将72dpi下字体的字号乘以0.75，都能还原效果图中的效果。
Font Material 字体材质
相信你肯定要问为什么只能调整垂直方向的对齐方式，（之前我被困扰了很久！）
后来发现UE4的对齐逻辑基本上都靠控件与panel之间的相对位置来进行，因此此处若要调整竖直方向的对齐方式可以在外嵌套sizebox。
Wrapping 自动换行
这里提供了两种文本自动换行的方法，两者不能同时生效。
-
根据父节点的尺寸自动换行
-
当单行文本内容达到某一像素长度时进行换行（设为0代表不自动换行）
注意：如果需要文本能够在打断英文单词来进行换行，则需要额外勾选 Allow Per Character Wrapping，否则一个超长单词是不会被打断来进行换行的
另外，Appearance下的AutoWrapText一般是不勾上的。
3.5 Interaction 交互性
is focusable勾选后，这个控件在接收到点击事件时会打断其他所有正在进行的操作。
此处的勾选应该视情况而定，强打断性的界面入口可以通过勾选来打断移动、攻击等操作。
例如当button的点击事件阻挡了Scrollbox接收滑动事件时，则可以将Touch Method设为Precise Tap。
3.6 Behavior 行为
Tool Tip Text 悬停提示
鼠标悬停的时候显示的提示文字内容
Visibility 可见性
此处可以控制游戏中的显示效果，但不影响在UMG制作时的显示与隐藏。
由于visible状态可以接受交互事件，因此在收到交互事件的时候会遍历目前所有visible状态的UI控件，因此可见但不可交互的控件的visibility调成Set hit test visible会提高计算速度。
有许多控件的默认状态就是visible，例如image，因此在确认控件不接收交互事件时可以设为set hit test invisible可以减少不必要的开销。
Render Opacity 渲染透明度
控件的整体透明度设置
渲染变形这一块比较基础就不多做介绍了。
但是，需要注意的Archor，Alignment，Pivot是三个不同的点。在cocos里面alignment和pivot是两个相同的点：
3.9 Events 事件
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。
如果数量不确定或内容不确定需要程序动态添加的列表，则需要把间距提前设计好放在node中。
这里提供了两种调节尺寸的方式
Auto代表自动调节尺寸，与之前Slot中的Size to Content一致
Fill代表自动填满剩余空间
这里展示一下不同设置的效果
4.12 Grid Box 网格面板
滚动框容器使得内容过多时可以在限定范围内进行滚动。
4.14 SafeZone 安全区
该控件会将子控件从左到右排列，超出其宽度时会将其余子控件放到下一行。常见于背包或仓库的设计中。
这是一个能够自动模糊下层的效果。
4.18 User Created
在序列帧区域的快捷方式：
-
CTRL+鼠标滚轮 缩放时间轴
-
SHIFT+鼠标滚轮 滚动时间轴
如果你能看到这里，恭喜你，大概你已经忘得差不多了吧
软件的学习还是要靠实际的操作才能理解与发现问题，所以赶紧实践一下吧。
