UE4之全流程开发基础知识(下)

安仔设计

Shijiazhuang/Web designer/4 years ago /800浏览

版权

UE4之全流程开发基础知识(下)

安仔设计

初入虚幻引擎全流程开发所涉及的一些基础知识

UE4之全流程开发基础知识(下)

在蓝图的上方有一个“调试过滤器”，通过这里选择好要调试的Actor后运行，就会看到原来的白色线变成了橙色，就是代表这段程序正在运行，而没有运行的程序还是白色，只有运行的变成橙色。我们可以通过这个变化检测我们的程序哪里出现了问题不有走通。

通过创建数据表我们可以将一些信息预先储存在程序里，当触发某些事件时，可从数据表内进行调用与储存。UE4数据表可以储存的东西数据种类还是非常多的，比如参数值、布尔值、线性颜色、媒体文件、模型文件等等，只要变量里有的都可以储存在数据表里供我们使用。我这里仅仅使用到了调用，并为涉及到修改与储存，所以在接下来的数据表环节与用户界面环节我只能项给为说明如何去调取数据表里的内容。

在创建数据表之前，我们必须先有一个数据结构，让UE4知道我们这个数据里储存的都是什么类型的数据。

我们可以通过资产管理器右键-蓝图找到结构，并做好命名供我们后续创建数据表是查找。

这里要注意的是，结构命名不能出现一些特殊符号和空格，如果需要分割那么是“_”代替。还有就是不要使用中文。

结构的创建操作与参数集枚举差不多，就不多说了。主要来说一下结构在数据表中的作用，首先结构其实就是数据表的标头，对于不会代码的朋友UE4这点做的已经很人性了。当我们在结构里创建一个变量类型或修改一个变量的顺序时，对应调用这个结构的数据表标头和数据内容也会对应更换，其中还有一点就是，像字体文件、媒体文件这类的外部文件尽量放在资产目录内。最后就是结构是一个可复用的，一个结构可以用来创建多个数据表。我这里列举了一些变量，供大家参考。

现在看到的就是UE4的数据表，可以通过选择每行数据按"F2"或双击去修改行命名。而下方的行编辑器就是咱们刚刚创建的结构，通过这里我们可以去编写数据表的每行数据。

首先通过右键资产管理器，从其他选项里找到数据表。这里我只用的是数据表，其中还有一个合成数据表通过了解应该是一种更高级的用法。

点击数据表后会弹出一个窗口，让我命名数据表名称（切记使用英文），然后搜索我们所需要的结构，点击确定数据表就会根据我们所选的结构进行创建了。然后我们就可以去数据表里填写我们所需的数据内容了。

可以通过右键数据表，选择导出未CSV与JSON格式的数据表，不会代码的小伙伴还是CSV吧。

如果我们已经有了一个CSV格式或者JSON格式的数据表，UE4也为我们提供了导入的办法。

首先我们要有一个对应结构的数据表，就是本地数据表结构要与UE4数据表结构完全一致。然后再UE4数据表的数据表格细节里找到“文件路径”，设置好本地数据表路径。

然后来到资产管理器找到要导入的本地数据表的UE4数据表右键，找到重新导入。这时本地的数据就会导入到UE4中。

这里总结一下我用数据表时碰到一些坑。

1.数据内容涉及特殊符号的话，需要确保字体文件是否支持。

2.英文命名数据表，不然会经常报错。

3.导入的本地数据表不能实时与UE4数据表更新。

UMG蓝图就是所谓的UI用户界面蓝图，用来创建用户界面的蓝图。

创建方式：资产管理器右键找到用户界面，选择创建“控件蓝图”。

用户界面蓝图与上面咱们接触的Actor蓝图还是有诸多不同之处的，不如顶部少了一些功能，则多了一个控件反射器。这个东西我使用过，貌似是用来做测试使用的。然后相对Actor蓝图多出了一个控制板、层级、动画与时间轴面板。而且在顶部右侧多出一个设计器与图表Tab按钮。之后我会按设计器与图表为大家说明其功能点。

设计器模式是专门为编排UI界面使用的模式。通过控制板调用各种美化各种所需的组件，之后结合层级编排页面结构，最后配合动画与时间轴制作UI动画效果。

这里要提前说明一下，这个设计器模式看色与各类设计软件差不多，但是还是有很大的不同，层级的关系控件的功能决定了页面效果。非要用一句简单的话来介绍，那么应该成它为“可视化前段页面编辑Photoshop”。所以大家在使用这个东西前，还是要多多少少了解一下前段代码搭建逻辑。

这个是层级管理面板，为什么要吧这个单独拿出来说呢，这不就是PS里的图层嘛。其实并不是，UE4的UMG蓝图内的层级面板与PS的层级完全不一样，我们并不能通过调整图层之间的上下级来改变它的上下层关系。毕竟UE4最后输出的是一串串的代码，这里其实更像是代表代码的层级关系。如果需要调整层级，是需我们到细节面板进行调解的。具体调解的方式在后面我会说道。

控制板是我们用来调用UE4自带组件或我们通过UE4组件组合成的用户界面而使用的面板。分类很多我这里仅拿我常用的集中来说。

在了解组件之前，需要重点说一下UE4组件使用的逻辑。UE4的组件是父级控制子集，父级继承子集（我也不知道这么描述对不对^.^）。

举个例子：我有一个图像组件，这时图像组件自带尺寸插槽，我们可以通过图像组件的尺寸插槽调整图像大小。而这时我给图像组件增加了一个父级“尺寸框”，这时再看图像组件就没有尺寸插槽了，如果我们想要调整尺寸就要到父级“尺寸框”进行调整。

还有一点就是，当我们吧鼠标悬停在控制板的组件上时会看到一些列的描述，其中会有带“*”的描述，这里会告诉我们它是什么特殊属性，如图尺寸框是一个只能有一个子项并且是固定大小。

UMG蓝图的用户组件默认并非变量，如果我们后期需要调取这些组件用于图表程序，我们需要在细节面板勾选这个“Is Variable”选项，并且命名不能重复。之后我们就可以在蓝图图表的变量面板看到这个组件供我们调用。

如图左上角花型的按钮就是UE4锚点。这个锚点看似是一个点，其实可以分别拖拽8个花瓣分别调整8个方向，所以UE4的秒点是4个点。为什么是4点不是8个，其实大家可以UE4锚点理解为“锚点（1个点）”“锚点线（2个点）”“锚点面（4个点）”。下面我会根据UE4所提供的16个锚点类型还为大家说明下这其中的不同。

我们通过点击细节面板的锚点下拉框就可以看到UE4为我们提供了16种类型，当然我们也可以自行手动拖拽锚点上的花瓣。

1.锚点形式，根据视窗左上角定位。

2.锚点形式，根据视窗上方左右居中定位。

3.锚点形式，根据视窗右上角定位。

4.锚点形式，根据视窗左侧上下居中定位

5.锚点形式，根据视窗上下左右居中定位。

6.锚点形式，根据视窗右侧上下居中定位。

7.锚点形式，根据视窗左下角定位。

8.锚点形式，根据视窗下方左右居中定位。

9.锚点形式，根据视窗右下角定位。

10.锚点线形式，根据视窗左上角与右上角定位。

11.锚点线形式，根据视窗左边与右边并上下居中定位。

12.锚点线形式，根据视窗左下角与右下角定位

13.锚点线形式，根据视窗左上角与左下角定位。

14.锚点线形式，根据视窗上边与下边并左右居中定位。

15.锚点线形式，根据视窗右上角与右下角定位。

16.锚点面形式，根据视窗左上角、右上角、左下角、右下角定位。

前面1-9号不用多都很好理解，不太好理解的主要是10-16这几个。我会用一个尺寸框包裹图像组件给大家做3个列子大概就明白了。

锚点线实例

大家现在看到的是锚点线形式，根据视窗左上角与右上角定位。简单来说就是图表会一直位于视窗的上方0处，宽度会根据视窗大小自行填充，高度固定为50。

锚点面形式1

现在看的是锚点面形式，左上角与右上角位于视窗0.5处（50%），左下角与右下角位于视窗0.6处（60%），内容是自行填充。当视窗缩小放大时图像会按照当前这个比例自行缩放。

锚点面形式2

现在看到的是锚点面形式，根据视窗左上角、右上角、左下角、右下角进行定位。也就说内容图像会根据视窗大小自行填充整个视窗。

总结

锚点的使用还是很基础的功能，不同的锚点设置不得到不同的效果，各位还是静下心来挨个试一试彻底弄明白这个锚点的作用。

在锚点的下方是位置尺寸与偏移，根据咱们锚点设置的方式不同，下面的位置和尺寸会变成偏移，这个东西不太好用简单话语来说明各位结合锚点自行测试一下就明白了。所以当发现找不到怎么设置位置和尺寸的时候看看是不是锚点设置的问题。

如果所示对齐就是当前组件相对锚点的位置。既然是相对锚点，那么各位就要注意。如果是锚点点形式那么对齐的XY都可调整，如果是锚点线形式根据锚点位置只能调整X或者Y，如果是锚点面形式则无法调整。

ZOrder真正的层级，与层级面板完全没有关系。这时显示时的层级，如果想让某个图层在上那么要通过这里进行调解，调解层级面板的层级是没用的要注意。

大小到内容及时当前组件尺寸完全符合子集内容大小。

工具提示文本：就是悬停在当亲控制时显示的文本内容。可以绑定到的函数调取函数信息。

已启用：用于启用与停用组件

可视性：UE4自带的描述很清楚了就是可视性的设置。但是要单独说下什么事占用空间与命中测试。首先“占用空间”就是当前组件虽然不可见但是还是占用的这片地方，它下方的物体不可点击。命中测试，当鼠标悬停在它上面时时候被检测到。

渲染不透明度：当前组件集子集整体的不透明度。

光标：当鼠标放置在组件上时，光标显示的样式。

undefined

裁剪，阉割版的蒙版，有很多的选项我就用过裁剪一种。因为有的一些效果不能用一张图片就完美的解决，所以需要配合UE4内置的组件在使用裁剪与变换才能得到我们想要效果。比如一个我想用一个六边形做背景模糊。具体为什么后面说背景模糊控件的时候会告诉各位。

undefined

就是咱们常用的变换功能，平移、缩放、斜切、角度等。

undefined

以上是UMG蓝图组件细节面板一般都会有用的基础功能设置，这里各位了解后下面开始说下各个组件其中的主要功能与作用。

面板类的组件是最常用的排版组件，所有组件都脱离不了复合使用这些组件。

尺寸框的主要功能“子布局”。

高度与宽度重载，是无视内容大小直接重新设置一个宽度和高度。

所需最小宽度与高度，如果内容宽度高度大于这个值时，尺寸宽会跟随变大，如果小于尺寸框则使用当前值不在缩小，类似于CSS的MinWidth与MinHeight属性。

所需最大宽度与高度，与上面时相反的。内容大于当前值尺寸框则不会继续变大。内容小于当前值则会跟着缩小。类似CSS的MaxWidth与MaxHeight属性。

最小最大宽高度比，吃亏放大缩小时的比例，需要配合上面的参数一同使用。

其中注意，尺寸框只能拥有一个子集。

undefined

垂直框组件可以拥有多个子集，它并没有自己的单独属性。垂直框主要将它的子集按照图层的顺序从上往下挨个排序下来。

注意这个组件可以有多个子集。

水平框与垂直框是差不多的组件，只是它将子集从左到右排列。

缩放框，如命所以就是控制缩放子集的组件。它主要是通过设置拉伸与拉伸方向来设置子集按照什么形式进行缩，比如以X轴为基准缩放还是以Y轴为基准缩放。

undefined

滚动框会将框体大小外的内容自动隐藏，通过上下或左右滚动的方式进行展示的一个组件。我们可以通过样式来设置组件上下左右的阴影样式也可以通过条样式去修改滚动条的样式大小等。同时我们可以通过滚动选项里的参数去调整滚动框的朝向，滚动条的可见等一些参数。

控制切换器是只能显示一个子集，我们通过切换器的激活控件索引去控制显示层级面板内的底几个子集。

网格面板是一个表格面板，我可以通过选择其子集然后点击上下左右箭头来调整内容所在的行与列。行高度与列宽度均有行内最大高度内容与列最大宽度内容控制，这一要记住。

特殊效果UE4仅为我们提供了一个效果就是背景模糊，这个组件会模糊它后面的所有内容，如UI内容甚至场景模型。有一点大家非常注意的是，背景模糊仅会模糊层级面板它上一层的UI内容，它下一层与子集不会被模糊。我们可以通过模糊强度去控制高斯模糊的程度，而如果我们勾选了“为模糊应用透明度”这个选项时，如果我们去调整“行为”选项下的“渲染不透明度”时则会在当前模糊强度上继续增加或减小。而低质量回退笔刷与模糊半径我还真没明白。

这里我放了3种实例，我从左到右挨个说明下：

1.可以看到白色文字在层级面板中位于背景模糊组件的上层，所以被模糊掉了，而蓝色文字则在下层并未受到影响

2.这个我在背景模糊组件里增加了一个图像，图像也未被模糊。

3.这里各位就要注意了，UE4想要做异型模糊是不能使用图片的。如果想要得到一个美观的异型模糊需要配合渲染变化与裁剪然后与其他组件一同配合才能实现。而项目每个元素的表格背景就是用背景模糊集合其他组件与变换拼合而成。具体怎么拼接的可以查看源工程。

通用类型的组件我并未全部使用到，所以我就简单说下我用到的集中，也是我认为最常用的。

首先我们可以通过外观调整按钮的普通样式、已悬停样式、已按压样式、已禁用样式、普通填充、按压填充、按压音效、悬停音效、颜色和不透明度与背景颜色，这些都很好理解不用多做说明。主要给为要注意的是，UE4的按钮样式均是默认添加的。如果说咱们不需要悬停样式那么需要手动设置悬停样式与普通样式相同。还有就是就目前我所接触到，凡是涉及到点击交互的都需要使用按钮这个组件。

undefined

事件选项也是按钮与其他组件不同的地方，许多组件是没有事件这个选项的。所以也就说如果需要做UI交互的话是必须使用这个组件。我们只需要通过点击对应时间后方的加号按钮，即可在图表模式内新增一下对应的事件供我们编写对用程序。

undefined

图像组件，很简单可以调用一张贴图或者用户界面材质，也可以填充一个颜色。下方事件可以触发绑定一个函数。

undefined

文本块组件是一个不支持用户编辑的文本组件。我们可以通过内容栏对内容进行编辑。然后在可以在外观栏设置内容的字体字号颜色阴影（说实话UE4的阴影很不好还是不要用了）。这里还有一个边缘，是内容距离组件边框的距离，好如CCS里Padding属性。换行栏里当我们勾选自动包裹文本后，文本块尺寸缩小或变大时内容则会自动换行。而包裹文本处则是设置文本到达什么位置才会换行。

图元下我就使用了一个间隔区组件，其他还未研究尽情谅解啊。

间隔区组件，是一个物无子集组件。主要用于设置组件与组件之间的间隔距离。它只能调解一个尺寸属性。

用户创建类的组件，在起初其实是没有任何内容的，这时应为这里显示的是我们自行创建的UMG蓝图。现在看到的就是我自己创建的所有UMG蓝图。

具体这个有什么作用呢？我们可以通过UE4提供的组件创建一个简单的蓝图，然后将这个蓝图作为组件再次应用到其他蓝图里，我们可以通过蓝图通信的方式去改变子集蓝图的内容。当然被调用的蓝图组件其实就是一个蓝图实例，可以多次调用修改，而且之间并不冲突。这样做的好处就是。可以将样式进行封装，我们需要那个就调用那个，如果需要修改样式，我们只需要修改一个基础的即可。

undefined

用户界面材质，在说材质的时候我并为说道。我们可以通过创建一个材质，将材质类型更改为用户界面类型。这时这个材质就可以应用到UMG蓝图的贴图插槽里。那么为什么要用用户界面材质呢，比如我有一个MP4我想让它用作于按钮悬停，那么光是贴图是无法实现的，所以就需要用到用户材质了。

UE4将动画与时间轴分开设置了，那是因为动画事由1个或多动时间轴组成。而我们可以拥有多个动画。我们在播放的时候播放是动画而不是时间轴。

默认状态下，时间轴是不能进行操作的。我们需要现在动画窗口创建并命名一个动画，然后选择当前动画为其添加时间轴。我们可以选择图层中的组件然后点击时间轴中的添加轨道，添加当前当前选择组件的轨道或从中选择一个层级中已有的组件。之后点击已添加组件后方的增加轨道，可以增加对应参数的时间轴轨道。咱们也可以通过点击细节面板参数名称后面的关键帧按钮直接添加轨道。剩下的曲线调整关键帧设置凡是用过AE的小伙伴应该就都很熟悉了。

最后要说一下，UE4的时间轴创建时默认是20帧，哪里可以修改默认帧数我翻遍的所有设置也没找到。

UMG蓝图的图表其实和Actor的图表是几乎一模一样的，唯独在变量处多了一个Animations分类也就是动画分类。我们在设计器里创建的所有动画都会显示在这个分类里供我们调用。因为UMG蓝图将时间轴放置在了设计器中，所以咱们在图表中搜索不到时间轴节点。其余的功能几乎一样我就不多说了。我主要说一下动画怎么调用与怎么获取数据表信息并赋值与UI界面。

上面说道了动画这里我就先说下动画的调用。UMG的动画调用与Actor还是有点不一样的。

我们先需要从变量里找到我们所需的动画，然后再用户界面分类找到播放动画。用户界面分类下的动画是专门用于UMG蓝图的动画设置几点，功能做鱼与之前的Actor蓝图里大致一样。

这里我就主要说下图中的2种播放节点的区别，我们已经知道Actor蓝图中的时间轴节点是带有完成事件触发的，而UMG蓝图中的播放动画节点是不带有这个功能的。如果我们需要带有完成事件的播放节点就需要使用下方的这个“具有已完成事件的播放动画”节点。这2个节点的内置参数几乎一样，最主要是有多一个已完成事件。

这里我概括的说明下我是怎么获取数据表里的数据并将数据赋值到对应的UI内。至于涉及到的节点，在Actor蓝图内我都有提及过，不明白的可以往前翻翻。

思路很多，相对真长的程序大佬们我这种可能最是最笨的，但是获取到了。所以只能说下我的思路仅供各位参考，如果有更好的办法也可采用。

因为我这个项目每条数据下的内容条数每一个都不一样，所以我先创建了一个数据数量的数据表，用来设置每条数据的数据量。然后通过数据量让程序自行生成对应的UI组件，最后在从对应的数据表内获取到指定的内容按照索引赋值到对应的UI组件里。

这里我将数据分成了4大类，分别是“Atomic_properties”、“Other_properties”、“Physical-properties”、“History”。

现在看到的History数据获取它下面每种字段数据的数据数量的自定义事件。

首先我通过点击元素的Actor蓝图获取到当前这个Actor的类名称。然后通过创建的History Table变量获取到History数量数据表，并货到数据表表行，根据类名称查找到指定行。对齐进行中断获取到每行的数量。然后传输给对应函数为其创建对应数量的UI控件做准备。这里将数据表中断后我们可以看到当前数据表里有7类数据。所以我这里创建了7组对应的函数，每组函数功能是一样的。

判断是否有值，如果有值根据数量新增TEXT控件并赋值。

我们已经获取到对应字段的参数数量，然后我通过这个数量去判断。如果值不是0则执行后方函数，并将这个数量传给生成控件函数。

首先我将Discovery切换到第一个，这个组件下有一个Discovery Text垂直组件。使用获取到字段数值设置For Loop设置循环创建“Text”这时一个我提前创建的UMG蓝图，并将其附加到Discovery Text的子集。循环完成后返回。

生成Text控件后就为其赋值更改Text下文本块。这时我通过Discovery Table变量获取到Discovery数据表，根据类名称获取当前行内容，这里我数据表经过统计，最多就有4个值，所以我这中断后就传送4个值去为Text赋值。如果没有值传的则是空，而且之前我们是创建了对应数值数量的子集Text组件，所以不会出现空组件的情况。