序

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

• 场景层   纯游戏画面，包括游戏场景、人物角色等

• 特效层  附着在游戏画面上的效果，包括Shader（加速特效、时序等）和SimUI(伤害跳字、人物血条等)

• UI层     也有人将这一层分的更细，包括HUD、操作UI、提示层、二级菜单层、系统UI层

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

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

3DUI的制作

1.Actor介绍

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

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

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

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

Mesh 制作

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

Step1.

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

Step2.

将GUI资源转换为材质。

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

Step3.

将材质赋予Mesh。

Step4.

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

Step5.

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

UMG转换

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

Step1.

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

Step2. 

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

Step3.

进行细节上的调整。

Step4.

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

优劣分析

Mesh

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

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

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

UMG

优势：开发更快捷；

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

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

3DUI动画

Sequence

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

Actor Sequence

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

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

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

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

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

总结

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

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