制作血条_UE4入门之路（UI篇）：3DUI的制作

序

传统手游的设计中一般将游戏分为三层：

• 场景层：纯游戏画面，包括游戏场景、人物角色等
• 特效层：附着在游戏画面上的效果，包括Shader(加速特效、时序等)和SimUI(伤害跳字、人物血条等)
• UI层：也有人将这一层分的更细，包括HUD、操作UI、提示层、二级菜单层、系统UI层

从层级上可以看出来，由于UI层是脱离于场景层之外的，因此很容易造成沉浸感缺失的问题。UI设计者为了解决这个问题，也会尽力去寻找与游戏世界观相近的seed，让UI也能融入游戏中去。

(《明日之后》和《第五人格》Seed)

而随着游戏行业的发展，越来越多的3DUI设计开始出现，使得UI不再脱离在场景层之外，而是能更好的跟场景结合，成为场景层的一部分给玩家带来更强的代入感。

3DUI的制作

1.Actor介绍

Actor是一种基础的场景元素，我们可以利用它将制作的UMG文件摆放至游戏世界中。当然，也能直接引用一些美术资源来进行设计。

(创建actor)

(Actor制作页面)

与UMG中的控件类似，组件(component)是组成Actor的基本元素。

(常用的一些组件)

可以看到在组件的类型极其繁多，我们能用到的暂时只有Basic Shapes和UserInterface。

那么在制作Actor的时候根据使用组件类型和思路的不同，有两种不同的制作方法。

Mesh 制作

这种做法在Messiah和NX引擎中有很多项目应该有比较丰富的经验，这里的做法与之类似，主要思路就是把GUI效果变为模型材质贴在场景中的面片上。

(示例)

Step1.

为每一个功能制作一个面片(Plane_xxx均为Plane组件)，通过调整mesh的尺寸与坐标来制作模型。

(坐标、旋转与缩放调整)

Step2.

将GUI资源转换为材质。

(将GUI资源转换为Mesh所需要的材质)

上图的材质结构比较简单，就是将“严选”图片资源的全通道作为材质的自发光颜色(Emissive Color)，然后将“严选”图片的透明度图层与“颜色”的透明度图层进行混合作为材质的透明度。这里之所以需要将“严选”与“颜色”进行叠加，是因为“颜色”作为一个参数(TextureSampleParameter2D)可以在动画和代码里进行动态设置。这样的话，我们就能动态修改这个材质的透明度了(比如可以制作一个渐隐渐显的动画)。

Step3.

将材质赋予Mesh。

(拥有材质后的Plane可以显示出GUI效果了)

Step4.

全部材质效果完成后进行细节调整即可，当然，可以通过添加Event来实现一些交互效果。

(Plane的Events)

Step5.

保存，将Actor拖到场景中即可，当然也可以设为人物或者摄像机的子节点来与其绑定。

UMG转换

这种做法可以直接将UMG转化为一个面片，更加快捷方便。

Step1.

通过UMG创建好一个你想要绘制在空间中的widget，不多做介绍。

(创建一个UMG)

Step2.

创建一个actor，添加一个widget组件，并引用这个UMG作为资源。

(红框处选择UMG资源)

Step3.

进行细节上的调整。

(一些可能用到的设置)

Step4.

保存，将Actor拖到场景中即可，当然也可以设为人物或者摄像机的子节点来与其绑定。

优劣分析

Mesh

优势：效果更丰富，能过创建更多样的mesh来贴合材质，可以说与美术制作的效果比较接近；

劣势：对开发者要求更高，需要有建模基础，复杂模型还会需要UV展开的知识，开发周期长。

因此Mesh更适合复杂的三维效果表现。

UMG

优势：开发更快捷；

劣势：不能创建更复杂的三维效果，只能用平面与弧面进行创造。

因此UMG更适合三维结构简单的方案。

3DUI动画

Sequence

(创建Sequence)

(sequence轨道)

sequence的轨道与UMG中的逻辑基本一致，就不再做详细介绍了，唯一不同的就是添加组件时只能添加当前世界中的元素。

(sequence添加轨道)

Actor Sequence

有些时候我们需要将Actor作为一个node，可以将动画做在Actor内部方便管理和复用。

(示例：点击弹起的Actor需要制作成一个node)

这个时候我们需要用到Actor Sequence插件。由于ActorSequence是测试功能，需要先手动开启该插件。

(Edit > Plugins > Built_in > Actor sequence)

开启后便可添加Actor Sequence组件。

在ActorSequence的设置里点击Open in Tab则可打开轨道进行编辑。

(ActorSequence轨道)

轨道的制作方法与Sequence/Animation基本一致，不再赘述。

总结

UE4的环境使得3DUI的制作越来越简单。以前很多必须要依赖于美术的设计现在也可以尝试自己动手制作了，实时预览的效果也使得能够更快更直观的看到落地效果并进行修改，也给了我们更多尝试的机会。

最后，还是想说软件的学习还得靠实践，所以赶紧结合案例自己动手试试吧。