在UE4里制作3D UI（一）——使用LGUI插件

LGUI插件介绍

LGUI是UE4里的一个插件，看名字可以知道核心功能是做UI，不过是用来制作3D UI，而且附带很多其他功能。可以在UE4的商店里搜索LGUI找到。

但是UE4自带的UMG已经很好用了，为什么还要用个插件呢？下面就来做个对比：

	UMG	LGUI
渲染方式	三维空间的UI是渲染到贴图再贴到物体上，UI元素只有xy两个维度。	GPU直接画三角形到三维空间。每个UI元素都有xyz三个轴向的移动、旋转、缩放
编辑方式	UMG编辑器	直接在视口中编辑
核心架构	UMG是扩展自Slate，是与UE4中的UObject完全不同的系统，Slate的内存管理、事件、接口等与UObject不可通用	所有UI元素都继承自UObject/Actor/ActorComponent，所以BeginPlay、Tick、EndPlay、Destroy等等都直接可用

其实对比下来最明显的就是UMG是二维的UI，而LGUI是三维的UI。三维的UI好处可多了，当初NGUI的横空出世给Unity自带的UI系统带来多大的冲击相信使用过Unity的人都有所了解，后来Unity自己做了一套UGUI也是相当好用。这里插个话，我本人也用过一些UI系统，从Flash、Flash平台的Starling/FeathersUI、WinForm、UWP/WPF，对比下来就数UGUI最好用了，超简单方便。

这个插件的作者本来是更熟悉Unity的，后来转到UE4之后就各种不习惯所以就做了这个插件。所以这个插件对于习惯Unity的用户来说有很多熟悉的地方，比如Prefab、EventSystem、DrawableEvent(类似于Unity的UnityEvents)、Layout等等。

插件预览视频链接
更多的视频请去UE4的商店查看

---

开始前的准备工作

首先当然是下载插件，可以通过Epic Games Launcher虚幻商城中搜索LGUI，目前支持的版本是4.20和4.21（已更新到4.23以上版本）：

点击安装到引擎，选择引擎的版本，安装：

等待下载安装完成，然后新建UE4的工程，可以选择任意一个模板，我们在这里选择Blank，给工程随便取个名字，然后点CreateProject：

打开工程之后可以看到在工具栏上Launch按钮后面有个LGUI Tools的按钮图标：

如果没有这个按钮可以点击Edit菜单最底下的Plugins来打开插件管理窗口，在Installed栏中会有LGUI的插件，勾上Enabled框，重启引擎：

准备工作完成！

Hello world!

下面的步骤中我们来逐步创建图片、文字、按钮，并点击按钮来显示"Hello world!"
注意！！！步骤1和步骤7中的内容在LGUI 2.x版本之后可以通过一键生成了，点击LGUI Tools/ Basic Setup/ World Space UI按钮就可以自动创建出一个可交互的文字框了。另外UIPanelActor已经移除，改为UIContainerActor和LGUICanvas组件的合体
1、点击LGUI Tools/Create UI Element/UIPanelActor就会创建一个名为UIPanelActor的物体，移动UIPanelActor到（0，0，340），旋转（-90，0，90），可以在场景里看到一个绿色的框：

为什么要旋转这么一个奇怪的角度呢？因为在LGUI的空间里，以x轴向右y轴向上z轴向前的坐标系，这样就可以方便的控制物体的xy坐标轴来调整UI元素的位置。UIPanel是渲染显示UI的基础，所有的UI元素都需要放在UIPanel底下作为子对象才有意义。

等会，UIPanel？熟悉Unity的同学很快会发现，这跟Unity里的NGUI插件一个名字啊，UIPanel、UIContainer、UISprite、UIText、UITexture都是NGUI中用过的名字。实际上，他们不仅名称一样，连作用也都一样。如果各位耐心看下去会发现，后面还有很多和NGUI/UGUI相似的类名称和接口。

2、接着刚才的步骤，现在我们来创建个显示图片。选中UIPanelActor，点击LGUI Tools/Create UI Element/UISpriteActor，这个操作会创建个UISpriteActor作为UIPanelActor的子对象，这时在视口里就能看到一个白色的UI了：

如果觉得纯白色不好看，可以选中UISpriteActor在Details面板里的LGUI-Widget中找到Color来修改成需要的颜色。
InheritAlpha选项可以让LGUI里的UI元素继承上一级的Alpha值，用这个来控制整体的透明度很有用。

3、这一步我们来显示图片。随便找一张图片导入UE4，比如下面这张：

导入UE4后：

选中这个图片右键，在弹出菜单中选LGUISprite/Create Sprite，在这张图片的边上就会有个后缀是_Sprite的物体，这既是LGUI中用来渲染图集的基本物体：

选中之前创建的UISpriteActor，在Details面板中找到Sprite项，把th_Sprite拖到Sprite上，然后再来看场景中是不是就出现了一只可达鸭了？：

4、好吧，可能有点偏题了，我们本来是要做个按钮的，这个可达鸭虽然可爱但是不像个按钮啊！那我们再来导入一个像是按钮的图片，比如这张：

同样的步骤，我们把这张图片导入UE4里（命名为Button01）并创建Sprite，然后选中UIPanelActor按照之前的步骤再创建个UISpriteActor作为UIPanelActor的子对象，重命名为Button，然后把刚才导入的Sprite拖到Button的Sprite属性上，再把Button的位置移动到（100， 0， 0）：

背景好像太亮了，按钮有点看不清，那么我们给背景垫上一层灰色吧。再创建一个UISpriteActor命名为Background，调整颜色为灰色，找到Width属性改为400，Height属性改为300，这两个参数是用来修改UI元素的尺寸：

额，不对，按钮被背景遮住了。。。
不用担心，LGUI里面每个UI元素都有个Depth属性就可以控制显示先后顺序，Depth越大的UI元素显示在越上层。所以我们找到Button的Depth属性并点边上的+号把深度改为1就能看到按钮又出现了（为了以防万一可以把可达鸭的图片的Depth值也改为1）：

好了，现在这个Button可以看清楚了，我们继续。

5、在ContentBrowser中双击Buttoin01_Sprite来打开Sprite编辑器，把BorderEditor中的四个值都改为14：

在World Outliner中选中Button，在Details中找到Type属性改为Sliced，可以看到Button有明显的变化：

6、该在按钮上放文字了。在WorldOutliner选中Button物体，点击LGUI Tools/Create UI Element/UITextActor创建个UITextActor，命名为ButtonText，修改Depth值为2，修改Color为黑色，点击Anchors按钮在弹出的菜单中选最右下角的按钮：

Anchors在LGUI中可以控制UI元素与父对象的尺寸和位置关系。

7、添加事件交互。LGUI里面的输入事件是通过EventSystem来管理的，插件自带了个预设的继承自EventSystem的Actor。在Content Browser右下角点击View Options在弹出菜单中勾选Show Plugin Content，然后在Content Browser的左侧就能看到有LGUI Content文件夹出现：

展开LGUI Content文件夹点击Blueprints文件夹，预设的EventSystem就在这里名叫PresetEventSystemActor，拖拽PresetEventSystem到场景视口里就会创建一个实例：

8、EventSystem负责管理事件，另外还需要给Button处理接收事件。在World Outliner中选中Button，再Details面板里找到并勾选RaycastTarget属性，只有勾选了Raycast Target的UI物体才可以接收到事件：

然后在Details面板里点击Add Component，找到UIButton组件并点击添加：

在Details面板里选中UIButton组件，找到Transition属性改为ColorTint：

在ColorTint下找到Transition Actor属性选择Button这个Actor：

好了，现在可以点击Play来试试了。键盘wasd移动找到我们创建的UI，然后组合键Shift+F1可以调出鼠标，试试看鼠标移到Button上点击一下是不是有变化了？：

光是按钮有反应可不行，点击按钮之后场景中的其他物体能有点反应吗？当然可以，接着我们的步骤。

9、那么这补我们来设置点击按钮之后出现个Hello World的文字。点击EndPlay停止运行，创建个UITextActor作为UIPanelActor的子对象，命名为HelloWorldText，修改Depth为2，添加组件UIEffectOutline并修改Outline Color为黑色：

在World Outliner选中Button，在Details面板中选中UIButton组件，找到On Click属性，点击右边的加号，然后展开：

UIButton的On Click属性属于LGUIDrawableEvent，作用类似于Unity中的UnityEvent或LGUI的EventDelegate。展开之后看到底下有三个属性，分别是Target Actor、Component、Function，顾名思义就是在目标的Actor上找到选择的组件执行选择的函数。在Target Actor中选择HelloWorldText，点击Component后面的按钮在弹出的菜单中选择UITextComponent，点击Function后面的按钮在弹出的菜单中选择SetText函数。然后会看到多出一个Parameter的属性，并且是个文字输入框（因为SetText函数的参数就是string），在Parameter输入框中输入Hello World!：

再次点运行，点击一下按钮看文字是不是变成Hello World!了？：

大功告成！！！