在UE4里制作3D UI（三）——使用Prefab

使用Prefab

未使用过LGUI插件的同学可先看看之前的博客：在UE4里制作3D UI（一）

注意！！！LGUI 2.X版本中对Prefab的操作已经集成到SceneOutliner中，如下图：


在World Outliner中有一列“UI”，Prefab实例化的Actor会以颜色图标标识，不同Prefab组的图标颜色也不一样，对Prefab的创建、修改、回滚等操作都能在“UI”列上操作。详情请看：LGUI2.x新特性

LGUI插件里面有个很重要的部分——PrefabSystem（预制件系统），虽然不涉及任何渲染和事件相关的内容，但是使用Prefab可以让制作UI的过程更方便。

这里有必要提一下，UE4的官网就有Unity和UE4的对比，官网上说UE4的Blueprint可以相当于Unity的Prefab来使用，甚至比Prefab还方便。但是Blueprint也有个很大的缺点，就是不能添加Actor层级树！层级嵌套对与UI制作来说非常重要，有了层级会让UI制作的过程变得更简单方便。

而这一节介绍的PrefabSystem就是可以在UE4里制作类似于Unity中的Prefab的一套工具。下面就来教大家如果使用LGUI的Prefab。

创建Prefab
首先，要创建个Prefab资源。在ContentBrowser点右键，找到并点击LGUI/LGUIPrefab来创建个Prefab资源，命名为MyFirstPrefab。

然后需要创建几个层级嵌套的Actor作为Prefab的内容。创建个UIPanelActor命名为MyPrefabRoot，在选中MyPrefabRoot的情况下点击LGUI Tools/Create UI Control/Button，这样就快速的创建了一个Button：

把刚才创建的Prefab资源MyFirstPrefab拖拽到场景里，在Details面板里找到LoadedRootActor选择MyPrefabRoot，然后点击Save按钮保存：

现在Prefab就已经制作完成了，下面来介绍一下如何去使用这个Prefab。
其实使用也很简单，编辑器里直接把MyFirstPrefab拖拽到场景里就行：

运行时加载Prefab也不难，LGUI准备了个Blueprint函数"LoadPrefab"可以直接使用。
下面我们来创建个BlueprintComponent来加载Prefab。在ContentBrowser右键点击Blueprint，选择并创建ActorComponent，命名为MyPrefabLoader，双击打开编辑，在Event Begin Play后面拉线选择LoadPrefab节点：

在LoadPrefab节点里，InPrefab参数选择MyFirstPrefab（InParent参数是作为创建的Actor的父对象，如果不指定就放到世界空间），编译、保存：

在场景里创建一个空的Actor，把MyPrefabLoad组件拖到这个Actor上：

点击Play运行，就会看到World Outliner列表里有新创建出来的MyPrefabRoot的Actor：

如果需要修改已经创建的Prefab怎么办呢？其实就是把Prefab拖到场景里创建Actor，修改完成之后再点击Save保存就行了。

以上这些就是LGUI的创建和使用Prefab的方法了，虽然最终封装的接口使用起来很简单，但其实内部的实现做了很多文章，下面我们来详细了解一些Prefab的原理。

双击MyFirstPrefab打开编辑界面：

可以看到编辑界面其实不是可视化地编辑Prefab中的Actor，而是有一些列表数组等数据，而这个Prefab资源其实就是对Actor做了序列化。LGUI的Prefab对Actor序列化并保存了两份数据，一份是通过字符串来保存，数据中包含一些编辑器特有的内容，这样在编辑器里可以安全的修改，另外一份是通过二进制来保存，这样可以最快的效率加载和反序列化，并且发布的版本只会保留二进制的数据。所以Use Build Data这个开关的作用就是，在编辑器里是否使用二进制数据，这样方便用户在编辑器里测试Prefab的发布数据，如果数据有误那么重新保存一下Prefab就可以。

注意事项：
LGUI的Prefab不适用与BSP、Foliage这些非Actor组成的物体。
另外BlueprintActor的参数重建发生在Prefab反序列化完成之后，所以尽量不要对BlueprintActor使用Prefab，除非Prefab中的BlueprintActor不需要修改任何参数。