一、关于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编辑界面

控制基本属性

因为所有控件的细节都是由一个属性池中的所有属性组成的，所以这里先介绍常见的属性，然后再详细介绍每个控件的一些区别。

3.1常见的一般属性

通用设置面板常规设置面板

控件名称

因为UE4的控制名称是在单个文件中全局检索的，所以在一个文件中不可能有两个相同的名称。这样做的好处是程序可以直接调用控件名进行代码编写，但是我们需要一个更规范的命名。

我们一般的做法是命名为:控件类型_父节点_函数名比如btn_lobby_back。

是变量

勾选后将作为变量出现在蓝图里并进行调用检查后，它将作为一个变量出现在蓝图中并被调用。

变量越多，读表的时间越长，所以尽量不要检查程序没有引用的层。例如，image是默认的检查变量，这实际上是不必要的。

搜索框

可以快速检索所需明细栏中的内容。

3.2插槽插槽

插槽设置面板设置面板

对准校准点

坐标代表这个点在这个控件上的位置，(0，0)代表左上角(1，0)代表右下角。

为什么和ccs不一样！！！

锚定点

在UMG，通过定位点和校准点有三种类型的适应:

1.九点适应(以中心点为例)

您可以设置以下内容:校准点和锚点之间的XY距离+控制XY尺寸。

2.根据父节点的单轴大小(长度或宽度)进行调整。

可以设置的:单轴两端距离+另一轴控制坐标+另一轴控制尺寸。

3.根据父节点的大小进行调整

可以设置的:到父节点四边的距离。

大小适应内容大小适应内容

像函数名一样，它将检索子节点或它自己的资源，并自动调整它们的大小。个人感觉用途广泛，很多地方都可以动态调整，不需要麻烦的程序。

聊天气泡聊天气泡

Z轴顺序

除了画布面板之外，UMG根据面板中自下而上的层层次渲染效果。Canvas Panel的所有子集都是并行的，所以有时候上层的渲染级别会高于下层。此时，您可以通过调整Zorder来调整渲染级别。但是，尽可能少使用它，这会占用额外的渲染开销。此外，z轴顺序调整仅限于控件的父集，不能叠加。

在上图顺序中，bg_1的显示层级低于bg_2 因为panel_1的Zorder低于panel_2不能按照-10+20=10>0来计算在上面显示的顺序中，bg_1的显示等级低于bg_2，因为panel_1的等级低于panel_2的等级，所以不能按照-10+20 = 10 >: 0来计算

3.3外观外观

风格

Style设置面板设置面板

根据控件的类型，引用资源会有不同的状态，例如按钮的正常状态。

您可以通过将资源直接拖到这里来引用它们(大多数控件都带有默认资源)。

色彩

您可以对当前状态的资源进行染色。

绘制为

无渲染，它可以表示为一个完全透明的像素，但它可以保持互动。

方框九宫拉伸，边距是九宫的百分比，所以不能设置具体像素。

Border类似九宫，但是中间空，拉伸的区域用重复拼贴填充。

图像直接拉伸

三种渲染方式的示例三种渲染方法的示例

颜色和不透明度

这里的染色是对整个控件进行染色，即状态下的所有资源都会叠加这个颜色。

颜色选择器

UE4调色板UE4调色板

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

它对应于PS中的十六进制sRGB色号，但PS中使用的十六进制色号是6位，UE4中是8位。

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

3.4字体字体

字体设置面板字体设置面板

大小

UMG默认的dpi是96像素/英寸，psd是72像素/英寸。

在设计GUI时，将dpi设置为96或者将72dpi的字体大小乘以0.75，可以在效果图中还原效果。

字体字体材料

在UE4中，可以将材质附加到UI上，实现贴图效果。

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

用这种方法处理文字，可以使字体+素材获得各种文字效果，可以在一定程度上减少图片和文字的使用，减轻多语言图像的开发压力。

H50的多语言合图H50的多语言地图

对齐对齐

你肯定要问为什么只能调整垂直对齐，(我之前也困扰了很久！)

后来发现UE4的对齐逻辑基本上取决于控件和面板的相对位置，所以如果想在这里调整垂直对齐，可以在外面嵌套sizebox。

自动换行

这里有两种文字换行的方法，不能同时生效。

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

注意:如果文本需要能够打断英文单词来换行，您需要选中Allow Per Character Wrapping，否则一个超长单词不会被打断来换行。

另外，外观下的AutoWrapText一般是不勾选的。

3.5互动交互性

选中“可聚焦”时，该控件将在收到单击事件时中断所有其他正在进行的操作。

这里的检查要视情况而定，中断性强的界面入口通过检查可以中断移动、攻击等操作。

如果技能，吃药，切换武器等。需要同时配合其他操作，入口无法检查。

明日之后主界面Focusable分析明日主界面聚焦分析后

单击下拉按钮可以更详细地设置控件的交互行为。

例如，当按钮的click事件阻止Scrollbox接收slide事件时，可以将Touch方法设置为PreciTap。

3.6行为举止

工具提示文本悬停提示

鼠标悬停时显示的提示文本内容。

能见度

在这里，您可以控制游戏中的显示效果，但不会影响UMG制作期间的显示和隐藏。

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

由于可视状态可以接受交互事件，所以当接收到交互事件时，将遍历当前可视状态中的所有UI控件。因此，将可见但非交互控件的可见性设置为点击测试可见将加快计算速度。

有很多控件的默认状态是可见的，比如image，所以可以在确认控件不接收交互事件的时候设置为hit test invisible，这样可以减少不必要的开销。

渲染不透明度渲染透明度

控件的整体透明度设置。

3.7裁剪切割

需要裁切选为clip to bounds即可如果需要剪切，只需选择“剪切到边界”。

3.8渲染变换渲染变形

渲染的基本对比我就不介绍了。

但是，拱点对齐和支点是需要注意的三个不同点。在cocos中，对齐和轴心是两个相同的点:

3.9事件事件

您可以将事件绑定到控件以实现交互效果。点击后，就进入蓝图系统了。蓝图系统非常强大，连游戏的设计都可以直接连接蓝图来完成，这里就不赘述了。

Events设置设置事件

四。常用控件简介UMG常用的控件有四种:

4.1图像图片

您不能向图片添加子节点。

图片的属性包括槽、外观、行为、渲染变换和裁剪。具体请参考前面的介绍。

由于图像的原始资源是一个白色块，任何纯色块资源都不需要额外的资源，只需要对图像进行染色即可。

这里要特别注意:图像不仅可以指图片资源，还可以加上素材资源，可以用来制作粒子、模型、特效等丰富的效果。

4.2文本文本

文本不能添加子节点。

文本的属性包括槽、字体、行为、扭曲、渲染变换和剪辑。具体请参考前面的介绍。

在内容中输入内容，可以通过shift+enter更改。

4.3富文本富文本

富文本格式可以在文本框中显示不同的字体格式，甚至是图片。要达到这个效果，首先要创建一个字体格式表。

然后你可以参考UMG的这个表格资源来设置文本。

4.4按钮按钮

控件可以添加子节点。

按钮的属性包括槽、外观、交互、行为、渲染变换和剪辑。具体请参考前面的介绍。

值得注意的是，按钮有四种状态:正常/Hoved/按下/禁用，至少在开发时要为前三种设置资源。

4.5复选框复选框

复选框可以添加子节点。

按钮的属性包括槽、外观、交互、行为、渲染变换和剪辑。具体请参考前面的介绍。

4.6进度栏进度栏

进度条无法添加子节点。

由于UE4中没有环形进度条控件，所以需要结合材料和蓝图系统来实现环形进度条的效果。具体流程请参考https://www.youtube.com/watch?。v=9NtSfPq95fQ

4.7滑块滑块

滑块无法添加子节点。

4.8文本框文本输入框

不能向输入框添加子节点。

文字输入有单行输入(常用>:文本框)和多行输入(输入>:文字多行)。

本质上相当于按钮+文字，不想多介绍了。

4.9组合框下拉框

下拉菜单不能添加子节点。

4.10画布面板画布面板

Canvas是一个基本面板，它允许您在任何位置布局和固定控件，并按照Z轴顺序将这些控件与canvas的其他子控件排序。Canvas是一个非常适合手工布局的控件。

如上图，只有Canvas Panel可以这么随便的放置控件位置，但是也比较难对齐。所以一般不建议用Canvs Panel进行设计排版，网格系统比较强。

4.11水平基本/垂直框水平/垂直框

横框和竖框的内容基本相同，这里介绍一下。

值得注意的是，子控件的Slot属性已经更改。

有两点需要关注:

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

如果是数量确定、内容确定的列表，可以手工设置填充。

如果链表的个数或内容不确定，程序需要动态添加，就需要提前设计好间距，放入node中。

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

这里有两种方法可以调整大小。Auto代表自动调整大小，这与前一个槽中内容的大小一致。Fill代表自动填充剩余的空空间。下面来看看不同设置的效果:

4.12网格框网格面板

Grid panel可以为你创建一个网格系统，并让子控件在网格中布局。

一个栅格系统网格系统

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

GridBox网格设置GridBox网格设置

划分网格后，只需要设置子节点的参数就可以占据网格。

GridBox子节点设置

4.13滚动框滚动框

当内容过多时，滚动box容器可以在有限的范围内滚动。

4.14安全地带

安全区域控件的子节点将自动避开全屏的安全区域进行适配。

在iPhone X上预览安全区控制的效果。

可以通过改变刘海平的方向来测试屏幕尺寸调整区域。

SafeZone也可以设置为只在安全区的某个方向生效(比如攻击按钮在iPhoneX上只想左右移动，不想向上)。

设置生效的安全区设置有效的安全区域。

4.15 Warp Box Word Wrap容器

该控件将从左到右排列子控件，当下一行超出其宽度时，其余的子控件将被放置在下一行。常见于背包或仓库的设计。

感觉自己有潜力发展成为折叠屏设备的适配容器(ω)。

折叠屏适配方法屏幕适应方法

绿框为wrapbox 蓝框为item绿色盒子是包装盒子，蓝色盒子是物品。

4.16微件切换器标签切换器

切换开关常见于Tab切换页面，一次最多只能显示切换开关的一个子控件。

选项页切换选项页面切换

背景模糊背景模糊

这是一种可以自动模糊下层的效果。

4.18用户创建

所有创建的UMG都可以在用户创建中检索到。

项目中创建的widget都能在这找到在项目中创建的小部件可以在这里找到。

那就是我们常说的节点，命名槽为这些节点的引用提供了坐标和维度，有点类似于ccs中的节点。

动词 （verb的缩写）动画系统介绍

UMG的动画也是通过连续帧的方式实现的。

序列帧轨道介绍序列轨道简介

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

关键帧曲线调整关键帧曲线调整

序列帧区域中的快捷键:

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

不及物动词结论。

如果你能看到这里，恭喜你，也许你已经忘记了~

软件的学习还是要靠实际操作来理解和发现问题，赶紧实践吧。

当然，作者也在探索和发展。如有不完整或错误描述，请指正并讨论。