虚幻C++入门个人笔记(4)——UMG、网络

UMG系统

虚幻运动图形界面设计器Unreal Motion Graphics UI Designer。主要用来创建UI元素，例如游戏中的HUD，菜单，展示动画UI等

UMG的核心是控件，这些控件是一系列预先制作的函数，可用于构建界面（如按钮、复选框、滑块、进度条等）。这些控件在专门的控件蓝图中编辑，该蓝图使用两个选项卡进行构造：设计器（Designer）选项卡允许界面和基本函数的可视化布局，而图表（Graph）选项卡提供所使用控件背后的功能

控件

控件是UMG系统中提供给用户用来交互的单元体。它包括输入交互（个别控件无输入）与展示交互。主要目的是将数据逻辑以合理的方式展示给用户，或是从用户处获得合理的输入，用于控制数据等。

虚幻中的UMG构建界面均是从控件开始着手进行的，虚幻中提供了大量的控件以满足我们的设计需求，同时也支持我们自定义控件来完成特殊的需求定制

创建UMG

蓝图构建UMG

虚幻中的UMG构建可以直接在内容浏览器中右键进行构建，构建内容为控件蓝图，蓝图的基本操作单元。可以通过创建控件（实例化一个UMG控件）和Add to Viewport（添加到视图渲染序列）（Add to PlayerScreen是联网用的）两个节点进行显示在用户窗口

锚点

位置结构

在我们制作UI时，应该尽量考虑UI针对不同的视口比例下的对齐关系，应保证在多种比例视口中都能得到非常规整的对齐方式。因此，依靠布局来管理控件成为了制作UI时的不二之选

在多种布局中，控件和控件的位置关系是有规则的（横向，纵向，格子，自由），我们将控件对齐时用到的参考位置称之为锚。

用来定义控件在画布面板上的预期位置，并在不同的屏幕尺寸上维持这一位置

控件的锚点受制于空间的父级容器特点，并不是所有控件都会具备锚点特性

相对和绝对关系

在构建设计UI时，我们尽量避免使用绝对关系，这可能会导致视口比例发生变化时，控件被遮挡或被隐藏。我们构建空间位置关系时，应尽量依赖父类容器控件的特点，使用相对位置关系，这样可以更好地帮助我们设计UI，并且达到最优信息展示的目的

相对位置关系，锚点对齐时使用其他控件位置作为参考，参考控件移动，自身也发生移动

绝对位置关系，以坐标为参考依据，不受视口变化影响，永远在视口的对应坐标位置

锚点预设方式

锚点产生与所在的父类容器控件类型有关，大体分为三种

自由容器插槽方式

9点方向对齐

横向三拉伸

纵向三拉伸

双方向拉伸

堆叠容器插槽方式

左对齐，右对齐，中对齐，横向填充

上对齐，下对齐，中对齐，纵向填充

槽

虚幻中的槽是与锚点配合，构建了一套控件对齐解决方案。槽决定了控件的位置结果。槽会根据控件所在的父节点控件类型而定。如果需要动态调整控件在视口中的位置，需要先获取到槽后再进行

DPI

DPI时设计中差异化用户界面体验中的重要组成部分。DPI主要描述了每英寸的像素数量。在UI设计中，低分辨率和高分辨率的显示效果是不同的。但是适配终端时，我们需要考虑多终端的适配问题，为了解决此类问题，虚幻中指定了以DPI为基准的缩放规则。这使得UMG支持与分辨率无关的UI设计，即UI可以不依照分辨率的变更而变得无法使用

DPI设置

DPI设置可以在项目设置-User Interface（用户界面）中找到

DPI的缩放规则

最短边-该选项将基于窗口的最短边来评估缩放曲线（最常用的设置）

最长边-基于窗口的最长边来评估缩放曲线

水平-基于窗口的X轴来评估缩放曲线

垂直-基于窗口的Y轴来评估缩放曲线

样式图片填充

九宫格填充法，把一张图片分成3*3的九份，四个角的位置不拉伸，拉伸其他位置的不大会影响图片纹理的地方（横纵向，中间是斜着拉伸，如果不想要中间则将其绘制为边界，要中间则盒体，图片为整张图片进行拉伸）

自定义控件

在虚幻中，我们编写的所有控件均可以被当作另一个控件的子内容使用，这使得我们可以灵活地去编写多样的控件内容。将整体的UI进行拆解，然后构建称为多个独立地控件，再进行组合。可以更加方便地完成控件之间地关联和扩展

Named Slot命名的插槽

在编写控件时，我们可以使用Named Slot将一部分空间进行预留，当构建的控件被当作其他控件的子控件时，预留空间将被显示。从而可以达到在另一个控件中继续向已经构建好的控件中添加内容

1.创建一个自定义控件

2.在里面加Named Slot插槽（下面不要加东西）

3.调整位置

4.在另一个控件中添加上述的自定义控件，在Named Slot下面加自己想要的东西

Menu Anchor菜单锚

用来构建弹出菜单区域，将弹出内容对齐到区域中（对齐方式多种），需要构建自定义的控件进行使用。如需要显示菜单，需要调用Open节点，关闭调用Close节点。注意弹出菜单与MenuAnchor无关联关系，如需要进行关联，需要额外编写逻辑

步骤：

1.加MenuAnchor

2.加按钮

3.创建按钮点击时事件，并连上MenuAnchor的Toggle Open节点（切换开启）

4.在设计器的MenuAnchor中的菜单轴点中的菜单类设置为你想要弹出的自定义控件类

5.设置放置位置

List View列出视图

用来帮助我们构建更加高效的列表缓冲UI。在传统的List中，存在严重的性能消耗问题（多个信息面板中只有数据部分存在差异，其他渲染逻辑相同，但是却构建了更多的渲染面板对象），List View从设计之初考虑使用单一渲染单元体，将数据进行高效缓存，以增加了列表面板展示的高效性。我们可以通过更加简单的方式构建高效的滚动列表界面。例如，好友列表、商品列表等

List View列出视图构建过程

1.提供入口自定义控件

构建自定义控件类，然后在图表中选择类设置，添加接口User Object List Entry

2.设置ListView展示控件

将构建好的组件设置到List View中

3.构建展示数据存储对象结构

构建数据记录对象，继承自Object，并向对象中添加数据成员

4.添加展示数据到ListView中

借助Construct（事件构造）函数，将构建好的数据填充到List View中。注意For循环只是为了测试，增加更多的数据元素

forloop-从类构建对象(类选Data类,Outer连Self)-设置Data类中的数据成员-(ListView的)添加项目(Item连Data类)

5.更新面板数据

在自定义控件的图表面板中，将展示面板对象中继承的接口函数On List Item Object Set(事件列表项目对象集上)进行显式重写，然后将函数中传递的参数数据转换到声明的数据记录对象，从中获取Num变量值(或是你要的数据)(需要先将其在设计器中选中数据类型,细节面板上的Is Variable狗勾上)，最后进行UI更新工作

事件列表项目对象集上-类型转换Data类-设置

3D UI

Widget组件

虚幻中提供了以重方便构建空间UI的解决方案，借助组件Widget（控件组件）用来将UMG控件展示在空间中（World和Screen），借助组件Widget Interact