小怿学习日记（五）| 虚幻引擎UMG控件学习

01

UMG基础知识

1.1.1 UI设计

UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。像平时接触到的所有APP、网页、车机等软件系统中按钮、卡片等元素，都属于UI。

1.1.2 UMG的定义

UMG是虚幻引擎的虚幻示意图形UI设计器，引擎中HUD、菜单或与界面相关的其他图形都可以统称为UMG。

1.2.1 创建控件蓝图

在虚幻引擎里面，可以通过控件蓝图实现UMG的功能。右键点击内容浏览器，在“用户界面”里面选择到“控件蓝图”。

图1.2.1 创建控件蓝图

1.2.2 控件蓝图分区

双击打开控件蓝图之后，可以看到很多的分区：

①菜单栏：与其他软件相似，具备常规的菜单功能。

②工具栏：包含蓝图编辑器的功能，在编辑完成之后，需要编译并保存，然后才能正确运行项目。

③控件列表：包含了各种控件，可直接拖入视觉设计器进行调用。

④层级面板：显示使用中的控件及其层级关系。层级越靠下的控件，反而是更靠顶层的控件。

⑤视觉设计器：显示UI布局的视觉呈现。可以在该窗口中直接拖动控件调整摆放的位置。

⑥编辑器模式：可以在“设计器”与“图表”之间进行切换。设计器用来编辑UI布局，图表用来编写交互命令。

⑦细节面板：选中控件时，该面板上会显示控件可以调整的细节参数。

⑧动画面板：可以在该面板下制作控件的关键帧动画。

图1.2.2 控件蓝图分区

画布的主要作用就是为了调整控件的位置，超出画布之外的控件不渲染。只需要将对应控件拖到工作区即可完成控件的添加。我们将三个按钮依次排列，第一个在画布内，第二个一半在画布内，第三个完全在画布外，我们可以看到图1.3.1和1.3.2的对应效果，画布以外的部分不会显示。

图1.3.2 项目运行时按钮的布局

 UE4创建的控件蓝图会默认放置好画布，而UE5需要手动从控件列表里面调用。

1.4.1 锚点的定义

锚点用于适配UI控件在画布中的相对位置。如图1.4.1，我们可以将锚点类型分为三大类：九点适配、单轴适配、父节点尺寸适配。

图1.4.1 锚点图

1.4.2 九点适配锚点

九点适配：根据画布中的某个点为坐标原点，展开画布中的控件分布。

画布中有左上、左正中、左下、上正中、正中、下正中、右上、右正中、右下共九个点，如图1.4.1中红色方框框选的锚点。

在选择好锚点之后，可以看到插槽参数中有“位置X”和“位置Y”，这两个便是控件与选择锚点的相对位置关系。

图1.4.2 九点适配的参数设置

1.4.3 单轴适配锚点

单轴适配：根据画布中的一个横轴或者竖轴为坐标轴，展开画布中的控件分布。

画布中有左竖轴、中竖轴、右竖轴、上横轴、中横轴、下横轴，如图1.4.1中黄色方框框选的锚点。

以竖轴向作为锚点适配来举例，位置X是横向相对于锚点的位置；偏移顶部和偏移底部是控件到顶部和底部的距离，调节该参数会使控件发生形变；尺寸X是控件横向的尺寸大小。

图1.4.3 单轴适配的参数设置

1.4.4 父节点尺寸适配锚点

父节点尺寸适配：直接铺满整个画布。如图1.4.1中白色方框框选的锚点。

偏移各个方向的数据分别控制控件到各个边的距离。

图1.4.4 父节点尺寸适配的参数设置

02

常用基础控件

2.1.1 按钮的定义

按钮是执行用户与程序交互的重要控件之一。可以通过给按钮外观中不同的状态设置不同样式，达到反馈用户操作的效果。

2.1.2 按钮的细节参数

展开“样式”，我们可以看到有普通、已悬停、已按压、已禁用等多个参数，比较常用的三个是普通、已悬停、已按压。

普通：是按钮默认状态下的效果，一般不做任何修饰；

已悬停：是鼠标停留在按钮之上的效果，可以做一些颜色亮暗或者图案凹陷的效果，反馈用户已经将鼠标停留在按钮的可操作区域内；

已按压：是鼠标已经按压按钮的效果，可以做一些颜色亮暗或者图案凹陷的效果，反馈用户已经触发按钮点击的操作。

图2.1.1 按钮的外观样式填充

实践举例1：展开普通、已悬停、已按压，各个页面中都有各自具体的参数，一般情况下，我们会使用制作好的UI贴图填充到图像，其它参数保持默认设置。如果是按压触发按钮的功能，我们可以在已按压的样式里找到着色，将RGBA的A通道降低一定的数值，如图2.1.2，这样能够在用户按压按钮时做出一定的反馈。

图2.1.2 降低“已按压”的A通道

我们可以通过绑定按钮的触发对应的事件，在触发事件后编写蓝图，实现对应的交互功能和视觉效果的切换。

图2.1.3 按钮事件

通过对按钮行为的控制，可以结合功能实现对用户操作的反馈。

图2.1.4 按钮行为的控制

可视性：可以对按钮的可视性设置不同的状态，同时也可以结合“设置可视性”节点，在出发相关按钮之后改变按钮的可视性，对用户的操作做出相应的反馈。

图2.1.5 按钮的可视性

图2.1.6 “设置可视性”节点

2.1.3 按钮的运用

实践举例2：制作一个按钮控制另外两个按钮的隐藏与显示。我们在按钮1的事件属性下选择“点击时”，触发点击事件之后会自动跳转到图表页面。将按钮2与按钮3从变量列表中直接拖入事件图表中，选择获取，如图2.1.7。在按压事件后面使用“Flip Flop”，A输出端链接另外两个按钮的显示，B输出端链接另外两个按钮的隐藏，如图2.1.8。这样便完成一个循环触发的隐藏显示点击交互。

图2.1.7 获取控件变量

图2.1.8 交互蓝图

渲染不透明度：对按钮的不透明度进行数值上的精准控制，可以通过节点来控制按钮的不透明度，但更多的是在UMG动画中制作按钮不透明度的渐变，以实现按钮渐隐和渐显的过程。

 图2.1.9 UMG动画添加渲染不透明度

文本控件用于渲染文本。文本控件的具体参数设置都很常规，与按钮控件类似，在此不过多赘述。唯一需要细讲的是字体族系的使用。默认状态下字体族系只有默认的“Roboto”字体，如图2.2.1。如果需要使用指定的字体，需要将字体文件导入UE工程才能使用。

图2.2.1 字体族系选项

 文本控件可以直接作为按钮的子控件，直接将文本拖入控件层级中，作为按钮的文字显示使用，如图2.2.2。

图2.2.2 将文本控件放入按钮下

2.3.1 水平框与垂直框的定义

水平框用于水平方向管理多个子元素，子元素的尺寸可以单独设置，子元素类型可以不同，子元素的位置只能左右切换，无法多行分布。

垂直框用于垂直方向管理多个子元素，子元素的尺寸可以单独设置，子元素类型可以不同，子元素的位置只能上下切换，无法多列分布。

2.3.1 水平框与垂直框的运用

在添加水平框或垂直框之后，可以在插槽属性下勾选“大小到内容”，这样水平框或垂直框的尺寸就会根据子元素的大小而自适应改变本身的尺寸大小。当子元素是图像或者按钮时可以使用此功能。

图2.3.1 水平框插槽信息

实践举例3：我们在画布中新建一个水平框，将水平框的锚点设置为上横轴适配，并将偏移左侧和偏移右侧的参数都设置为零，使其铺满整个顶栏，如图2.3.2。

图2.3.2 放置水平框

将新创建的水平框里勾选上“大小到内容”，放入按钮，调整按钮尺寸之后，在按钮插槽的参数中，左边就是距离左侧控件的距离，如果是第一个控件，则是与水平框边缘的距离。右边给上一定的数值，这个数值就是和下一个按钮之间的距离，如图2.3.3所示。

图2.3.3 按钮插槽数据

复制多个按钮，根据UI设计的样式分别给按钮填充对应的图片素材，最终效果如图2.3.4所示。使用图片的方式也是如此。 

图2.3.4 水平框内多个按钮的效果

2.4.1 覆层的定义

用于让UI控件一层一层的叠在一起，可以有多个子控件的堆叠。可以理解为打组的功能，将同类型的控件归到同一个组内，方便管理。

图2.4.1 覆层内放置多个按钮

2.4.2 覆层的运用

在使用到某些功能需要调用到子面板时，就可以使用覆层充当子面板的面板控件，相当于主面板画布的作用。

实践举例4：新建一个用户控件，拖入一个覆层或者包裹框等面板控件。在画面的

右上角将尺寸修改为自定义尺寸，将UI设计对应的宽度与高度输入进去，定义好悬浮卡片的尺寸大小，如图2.4.2。

图2.4.2 定义卡片尺寸

将UI设计对应的按钮放入覆件中，分别填充对应的UI图案，如图2.4.3所示。

图2.4.3 放入按钮控件

接下来我们将通用里面的边界控件放入覆层，将边界放在层级窗口中的最上层，这样在画面中边界就是处于按钮的下层。在边界的插槽属性中，将水平对齐和垂直对齐都选择最后一个“铺满”选项，如图2.4.4所示。

图2.4.4 设置对齐方式

在笔刷颜色调整合适的卡片背景颜色，同时根据UI设计，降低A通道的数值以达到半透明的效果，如图2.4.5所示。

图2.4.5 调整笔刷颜色

我们还可以将控件列表中的背景模糊加入到边界的子集中，在右侧细节面板中找到模糊强度，把数值拉高，实现一种悬浮卡片模糊的效果。

图2.4.6 添加背景模糊

2.5.1 包裹框的定义

包裹框是一个可以打包多个子控件的盒子，与覆层不同的是，当子控件在包裹框中放不下时可以自动换行，并且可以通过设置插槽填充控制子控件之间的间距，还可以通过设置包裹尺寸控制包裹控件的换行宽度。

2.5.2 包裹框的功能

当我们在包裹框中放入多个尺寸为100*30的按钮时，达到一定宽度之后，按钮会自动换行，如图2.5.1 所示。

图2.5.1 包裹框放入多个按钮

我们给“内部插槽填充”设置好参数之后，包裹框内的按钮就会根据设置的参数自动拉开间距，如图2.5.2所示。

图2.5.2 包裹框内的按钮间距

勾选上“显式包裹尺寸”，激活包裹尺寸参数，并给包裹尺寸填充一个数值，由于在换行限制上，包裹尺寸的优先级高于包裹框原本尺寸，所以按钮会根据包裹尺寸重新分布，如图2.5.3所示。

图2.5.3 包裹框内按钮重新分布

03

调用悬浮控件

打开主界面的控件蓝图，在控件列表中找到用户创建一栏，展开后可以找到新制作的悬浮窗口控件蓝图，如图3.2.1所示。

图3.1.1 找到悬浮窗口控件蓝图

  创建一个按钮，用于触发悬浮窗口的显示。

图3.1.2 主界面布局

3.2.1 设置悬浮窗口的初始状态

将实践举例4制作的悬浮窗口的控件蓝图拖入画布面板中，调整合适的位置。在细节面板中找到行为属性，将可视性改为可视，将渲染透明度改为0。

图3.2.1 修改行为属性

3.2.2 制作悬浮窗口的渐现动画

在动画窗口新建动画，选择悬浮窗口的控件蓝图，将悬浮窗口添加到轨道中，如图3.2.2所示。

图3.2.2 添加悬浮窗口

添加变换和渲染不透明度到动画轨道中，如图3.2.3。拉动时间轴右侧的方框位置，将动画长度调整为0.5秒，设置一个向右偏移且渐显的关键帧动画。

图3.2.3 添加参数到轨道

3.2.3 编写动画调用的蓝图

此时再切换到图表页面，在左侧变量下出现了新的动画变量。将动画直接拖到画面中，选择获取动画变量。分别调用出对应的“播放动画”与“反向播放动画”节点，并分别连接到Flip Flop的A与B上。

图3.2.4 调用播放动画节点

图3.2.5 链接动画节点

此时编译后再运行项目，便能达到悬浮卡片素材渐隐渐显的效果。

 本篇笔记详细介绍了UMG基础控件的使用方法，并演示了用户控件之间调用的关系及动画制作方法。相信通过以上内容，大家对UMG都有了大概的认知，并能够利用一些基础的控件功能满足UI的开发需求。如果想了解更多关于Unreal HMI 3D解决方案的信息，欢迎随时联系我们（mkt@eptcom.com）。