当前位置:   article > 正文

虚幻C++入门个人笔记(4)——UMG、网络_当你在虚幻引擎的umg(用户界面管理)中想要将umg实例变量(widget blueprint内定义

当你在虚幻引擎的umg(用户界面管理)中想要将umg实例变量(widget blueprint内定义

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/在线问答5/article/detail/775409
推荐阅读
相关标签
  

闽ICP备14008679号