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

本文主要是介绍阿赵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的节点：

  然后在Class里面找到刚才创建的HUD1：

  然后再添加一个Add To Viewport的节点：

  把它们都连上：

  保存、编译后，运行关卡，会看到刚才的UI出现了，然后点击按钮，会看到文本块的内容变成了刚才我设置的“我被点击了”

这篇关于阿赵UE学习笔记——30、HUD简单介绍的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---