阿赵UE学习笔记——30、HUD简单介绍

阿赵UE学习笔记目录

大家好，我是阿赵。
继续学习虚幻引擎，这次来学习一下HUD的基础使用。

一、什么是HUD

HUD(Head-Up Display)，也就是俗称的抬头显示。很多其他领域里面有用到这个术语，比如开车的朋友可能会接触过，车载HUD，就是把仪表盘数据和地图导航投影到汽车的前挡风玻璃，让司机可以不用低头看仪表盘，就能正常的看到当前的驾驶数据。
UE里面的HUD，实际上并不是一个什么设备，就是一个UI系统，和Unity引擎的UGUI之类的类似，是一个可以可视化编辑的UI系统。

二、创建HUD

为了创建HUD，可以先建一个文件夹，用于专门存放HUD文件，然后在内容浏览器找到这个文件夹，鼠标右键——用户界面——控件蓝图：
在这里插入图片描述

这样就创建出一个HUD的UIWidget文件了，给他命名一下，我这里命名为HUD1。需要注意的是，由于UE所有的对象其实都是蓝图，而蓝图的名称就相当于代码里面的类名，所以我们给这些UIWidget文件命名的时候要注意别起得很随意，因为后面是通过这个类名来加载UI控件的。
在这里插入图片描述

创建完之后，双击打开HUD的编辑器，是这个样子的：
在这里插入图片描述

留意右上角，分别有”设计器”和”图表”这两个页签。设计器是用于可视化编辑UI组件的，图表是用于编辑蓝图逻辑的。
在这里插入图片描述

三、设置屏幕分辨率和画布

1、屏幕分辨率

用过Unity引擎的朋友会比较熟悉，我们在设计UI的时候，是需要先定一个标准分辨率的，比如比较场景的1920x1080之类，或者是直接拿某个设备的分辨率作为参考。
UE的HUD里面也是需要这样做的：
在这里插入图片描述

在屏幕尺寸里面，可以选择一些手机或者其他设备的分辨率作为参考。设置了之后，在设计区域的左下角，会显示当前的分辨率：
在这里插入图片描述

我们也可以手动的去设置这个分辨率，找到设计区域右下角的这个小滑块，可以拖动：
在这里插入图片描述

拖动的时候，设计区域会出现各种分辨率的提示，可以根据需要拖动到合适的分辨率作为参考。
在这里插入图片描述

2、画布

又要和Unity引擎作对比了，UGUI在制作的时候，是需要先创建一个Canvas画布的，所有的UI元素都是在Canvas上面添加。
UE引擎也是同样的道理，在HUD的根节点上面，我们需要先添加一个Canvas画布：
在这里插入图片描述

添加完画布之后，准备工作就完成了，可以准备开始放UI组件了。

四、创建文本块

打开左边的工具栏，找到通用页签。这里面会有一些比较常用的UI组件。
在这里插入图片描述

这里为了简单测试，先创建一个文本块，方法是直接把文本框拖动到画布上：
在这里插入图片描述

在画布上面创建了文本块后，文本块默认是选中状态，这时候留意看右边的细节面板，会发现有对应这个文本块的很多参数。如果用过UGUI的朋友，估计会觉得大同小异。
在这里插入图片描述

首先要注意的是锚点，也就是这个文本块相对于父级的对齐方式。
在这里插入图片描述

然后，如果我们需要用蓝图动态修改文本块的内容，那么这里需要给文本块起一个规范的名称，并且勾上“是变量”。这样，文本块就会变成一个可以动态设置值的变量。下面的“文本”，是文本块实际显示的字符串内容，我们可以试试改变它：
在这里插入图片描述

在这里插入图片描述

想要后面用蓝图控制这个字符串的内容设置值，我们需要进行绑定：
在这里插入图片描述

在创建绑定之后，会进入到蓝图节点界面，把Return Value拖出来，然后提升为变量：
在这里插入图片描述

然后为这个变量设置一个变量名
在这里插入图片描述

这样，以后我们通过蓝图设置这个变量的值，文本块的内容也会相应的变化。

五、创建按钮

接下来创建一个按钮，方法同样是把按钮直接拖动到画布上：
在这里插入图片描述

需要注意的是，如果是Unity的UGUI里面的按钮，它会默认在里面创建了一个Text文本组件，但UE的按钮，它原始是没有Text的，只有一个底纹框。所以如果我们想在按钮上面有文字显示，我们还要手动的再拖一个文本块到按钮里面：
在这里插入图片描述

由于我想让这个按钮触发功能，所以同样的，给它起一个标准的名称，然后勾上“是变量”:
在这里插入图片描述

当勾选上“是变量”之后，在细节栏下面会多出了一个叫做“事件”的折叠栏，里面是这个按钮各种不同情况下的触发事件：
在这里插入图片描述

在“点击时”事件后面点加号，会进入到蓝图节点编辑，这时候，找到上面已经绑定了变量的那个文本块，拖动出来，选择设置值：
在这里插入图片描述

把On Clicked连到Set节点，然后在下面的设置变量值里面输入一点内容：
在这里插入图片描述

这样，一个按钮点击后给文本框设置文本显示的功能就做完了。

六、把HUD加入到场景

为了测试这个功能，我新建了一个关卡场景：
在这里插入图片描述

打开这个关卡，然后选择打开关卡蓝图：
在这里插入图片描述

进入到蓝图编辑界面，找到Event BeginPlay节点。这个节点是在关卡开始运行的时候会调用，有点类似于Unity引擎MonoBehaviour生命周期里面的Start。
在BeginPlay后面，创建一个Sequence序列节点，然后连上：
在这里插入图片描述

实际上如果只是为了把HUD添加到场景，我们是不需要添加序列节点的。但由于一个关卡里面，除了需要在BeginPlay时添加HUD，一般还会有其他的初始化操作，所以添加一个序列节点，可以在BeginPlay的时候按顺序执行多种逻辑，而添加HUD只是其中一种。
接下来创建一个CreateWidget的节点：
在这里插入图片描述