UE-UI

学习内容 

• 创建一个显示计数器和计时器的平视显示器 (HUD)
• 显示 HUD
• 更新计数器和计时器以显示变量值

 虚幻引擎文档中的小部件类型参考页面

概念

在视频游戏中，开发人员使用图形和文本向玩家显示相关信息，例如健康或得分。这称为用户界面 (UI)。

您可以使用 Unreal Motion Graphics (UMG) 在 Unreal Engine 4 中创建 UI。UMG 允许您通过拖放 UI 元素（例如按钮和文本标签）轻松构建 UI。

入门

下载启动项目并解压缩。转到项目文件夹并打开GeometryCatcher.uproject。

注意：如果您收到一条消息说项目是使用早期版本的虚幻编辑器创建的，那没关系（引擎经常更新）。您可以选择打开副本的选项，也可以选择就地转换的选项。

按播放来控制一个白色的立方体，并尝试捕捉下降的形状。您可以通过移动鼠标水平移动捕手。十秒钟后，形状将停止生成。

您要做的第一件事是创建一个显示两件事的 HUD：

• 跟踪玩家收集了多少形状的计数器
• 一个计时器，显示在形状停止生成之前剩余的秒数

要创建所有这些，您需要使用小部件。

关于小部件

小部件是为 UI 提供某种视觉功能的 UI 元素。例如，一个 Button 小部件提供了一个用户可以看到和点击的对象。

小部件本身不必是可见的。例如，Grid Panel 在其内容之间平均划分其空间。用户看不到Grid Panel，但可以看到它的效果。

小部件还可以包含其他小部件。下面是一个自定义小部件的示例，其中包含一个Text (the Name label) and a Text Box ：

您甚至可以将小部件构建成一个完整的界面，例如菜单屏幕。下面是一个看起来像标题屏幕的小部件示例。所有 UI 元素也是小部件，并包含在标题屏幕小部件中。

现在您知道什么是小部件，是时候为 HUD 创建一个了。

创建Widget

转到内容浏览器并导航到UI文件夹。单击Add New按钮并选择User Interface\Widget Blueprint。将新资产重命名为WBP_HUD。

双击WBP_HUD以在UMG UI 设计器中打开它。

UMG UI 设计

UMG UI Designer 由七个主要元素组成：

1. 设计器：此区域包含小部件的可视化表示。按住右键单击并移动鼠标进行平移。通过滚动鼠标滚轮进行缩放。
2. 详细信息：您选择的任何小部件都将在此处显示其属性
3. 调色板：您可以使用的所有小部件的列表。任何用户创建的小部件也将出现在这里。
4. 层次结构：您当前使用的所有小部件的列表
5. 动画：小部件可以具有某些动画属性，例如位置和大小。此面板列出了您的所有动画。
6. 时间轴：当您选择动画时，此面板将显示动画属性和关键帧
7. 编辑器模式：在这里，您可以在设计器和图形模式之间切换。图表模式几乎与蓝图的事件图表相同。

创建Text Widget

Text widgets非常适合显示计数器和计时器等数字信息。

转到 Palette 面板并搜索Text小部件。通过按住左键并将其拖动到设计器面板中来添加小部件。

暂时不用担心文本内容，稍后您将替换它。

将小部件重命名为CounterText。您可以通过选择Text widgets并转到详细信息面板来执行此操作。在顶部的text box输入CounterText。

您可以通过在设计器中左键单击并拖动小部件来移动小部件。

您还可以通过左键单击并拖动手柄来调整小部件的大小。调整大小允许您设置小部件的边界。虚幻不会渲染边界之外的任何东西。

或者，您可以通过修改详细信息面板中的值来设置位置和大小。为CounterText设置以下属性和值：

• 位置 X： 200
• 位置 Y： 50
• 尺寸 X： 500
• 尺寸 Y ： 100

目前，文本只占方框的一小部分。

您可以通过转到详细信息面板并导航到Appearance部分来增加字体大小。在Font属性的最右侧，有一个用于设置字体大小的文本框。

将字体大小设置为68。

让我们通过在它旁边添加一个图标来使计数器看起来更漂亮。

创建Image Widget

Image widget是一种在 UI 中显示图形（例如图标）的简单方法。

创建一个Image小部件并将其命名为CounterIcon。将位置 X设置为75并将位置 Y设置为50。这将把它放在 CounterText旁边。

要设置图像，请转到详细信息面板并转到Appearance部分。展开Brush属性，然后单击Image的下拉菜单。选择T_Counter。

图像看起来会被拉伸，因为小部件与图像的大小不同。

您可以使用Size To Content选项，而不是调整小部件的大小。此选项将自动调整小部件的大小以适应其内容。

在 Details 面板中时，转到Slot（Canvas Panel Slot）部分。选中Size To Content旁边的复选框。

小部件将自行调整大小以适合图像。

当在不同的屏幕尺寸上玩游戏时，UI 需要相应地移动其小部件。要维护 UI 的布局，您可以使用锚点。

锚点

锚点定义小部件的位置相对于何处。默认情况下，小部件的锚点设置在其父级的左上角。因此，当您设置小部件的位置时，实际上是在设置它相对于该锚点的位置。

在下面的示例中，每个图像都锚定到一个点（最近的角落）。

注意每个图像是如何保持其相对于其锚点的位置的。使用锚点，您可以确保您的 UI 在不同的屏幕尺寸上具有相同的布局。

您还可以使用锚点自动调整小部件的大小。当锚定到两个或更多点时，小部件将调整自身大小以保持其相对大小。

在下面的示例中，栏固定在左上角和右上角。

在垂直方向上，条会移动但不会调整大小。这是因为它在 Y 轴（顶部）上只有一个锚点。但是，条形图会水平调整大小，因为它在 X 轴上有两个锚点。

Anchor Medallion代表您的锚的位置。只要您选择了一个小部件，它就会出现。

CounterText和CounterIcon的锚点已经在正确的位置，因此您无需设置它们。

接下来，您将为计时器创建另一个Text and Image widget。但是，这一次您将它们放置在右侧。

创建计时器

创建一个Text小部件并将其命名为TimerText。设置以下属性：

• 位置 X： 1225
• 位置 Y： 50
• 尺寸 X： 500
• ： 100
• 字体大小： 68
• Justification: 文本右对齐（这将使文本与小部件的右侧对齐）

接下来，您将锚点设置在右上角。您可以通过左键单击并拖动Anchor Medallion上的圆圈来执行此操作。将Anchor Medallion移动到右上角。

注意位置是如何更新为相对于锚点的。

创建一个Image小部件并将其命名为TimerIcon。设置以下属性：

• 位置 X： 1750
• 位置 Y： 50
• Size To Content:选中
• Brush\Image:： T_Timer

您可以使用预设，而不是使用 Anchor Medallion 设置锚点。转到详细信息面板并单击锚点旁边的下拉菜单以显示预设。选择第三个预设（右上角有正方形的那个）。

UI 的布局现在已经完成。您可以通过模拟不同的屏幕尺寸来查看锚点的工作情况。转到 Designer 面板并单击Screen Size 下拉菜单。

选择一个选项将更改WBP_HUD的大小以匹配该选项。以下是 HUD 在 iPad Air 上的外观。注意小部件是如何靠得更近的。

在下一节中，您将学习如何显示WBP_HUD小部件。

显示 HUD

单击编译，然后返回主编辑器。导航到Blueprints文件夹并双击BP_GameManager将其打开。

游戏一开始，HUD 应该是可见的。您可以使用Event BeginPlay节点来执行此操作。

找到Event BeginPlay节点，然后将Create Widget节点添加到节点链的末尾。此节点将创建指定小部件的实例。

单击Class旁边的下拉菜单并选择WBP_HUD。

要显示 HUD，您需要使用Add to Viewport节点。左键单击并拖动Create Widget节点的Return Value引脚。释放左键单击空白区域以调出上下文菜单。添加Add to Viewport节点。

让我们回顾一下事件的顺序：

1. 一旦 Unreal 生成BP_GameManager，就会执行Restart和SetUpCamera函数。这些函数设置了一些变量和相机。如果您不知道函数是什么，请不要担心。本教程稍后将介绍它们。
2. Create Widget节点创建WBP_HUD的一个实例
3. Add to Viewport节点显示WBP_HUD

单击编译，然后返回主编辑器。按Play使用您的新 HUD 玩游戏。

要显示计数器和计时器的值，您将需要保存该信息的变量。您可以在BP_GameManager中找到这些变量。

要使用这些变量，您需要一种从WBP_HUD访问BP_GameManager的方法。您可以通过在变量中存储对BP_GameManager的引用来做到这一点。

存储参考

存储引用很有用，因为这意味着您可以轻松访问特定实例。

想象一下，你有一个盒子，里面有一个球。如果你想找到球并检查它，这很容易，因为只有一个盒子。

现在，假设您有一百个盒子，但只有一个包含一个球。您必须检查每个盒子，直到找到带球的盒子。

每当您想检查球时，您都必须执行此操作。这将很快导致性能问题。

使用参考，您可以跟踪带球的盒子。这样，您不必检查每个框。

创建变量

打开WBP_HUD并通过转到 Editor Mode 并选择Graph来切换到 Graph 模式。

导航到 My Blueprint 选项卡并创建一个名为GameManager的新变量。

转到 Details 面板，然后单击Variable Type旁边的下拉菜单。搜索BP_GameManager并选择BP Game Manager\Object Reference。

设置Reference

单击编译，然后打开BP_GameManager。

找到Create Widget节点，然后左键单击并拖动Return Value引脚。释放左键单击空白区域，然后从菜单中选择Set Game Manager。

然后，将Add to Viewport节点链接到Set Game Manager节点。

注意：您可以通过双击电线来重新布线以创建重新布线节点。左键单击并拖动“重新布线”节点以重新布线。

接下来，创建一个Self节点并将其连接到Set Game Manager节点的左侧引脚。Self节点将被列为Get a reference to self。

现在，当WBP_HUD创建时，它将引用BP_GameManager。

在下一节中，您将学习如何在函数的帮助下更新小部件。

Functions

在蓝图中，函数是类似于事件图表的图表。与事件图不同，您可以使用节点调用函数。但是你为什么要这样做呢？

Organization

使用函数的原因之一是organization。通过使用函数，您可以将多个节点折叠成一个节点。

查看 BP_GameManager 的Event BeginPlay部分。有两个功能：Restart和SetUpCamera。

这是该部分没有functions时的样子：

如您所见，使用函数看起来更简洁。

可重用性

使用函数的另一个原因是可重用性。例如，如果您想重置计数器和计时器，您可以使用Restart功能轻松完成。

这为您节省了每次要重置这些变量时都必须重新创建节点的工作。

现在您知道什么是函数，您将使用一个来更新CounterText小部件。

更新小部件

默认情况下，无法从蓝图中访问 Text widgets。这意味着您将无法设置其 Text 属性。幸运的是，这是一个简单的解决方法。

单击编译，然后打开WBP_HUD。切换到Designer mode。

选择CounterText，然后转到详细信息面板。选中位于最顶部的Is Variable 复选框。

现在，您将能够更新CounterText。下一步是创建一个函数来更新文本。

创建更新函数

切换回Graph模式，然后转到我的蓝图选项卡。单击Functions 部分右侧的+号。

这将创建一个新函数并将您带到它的图表。将函数重命名为UpdateCounterText。

默认情况下，图表将包含一个Entry节点。当函数执行时，它将从这里开始。

要使CounterText显示ShapesCollected变量，您需要链接它们。

将GameManager变量拖到图表中。左键单击并拖动其引脚，然后在空白处释放左键单击。从菜单中，选择Get Shapes Collected。

要设置文本，您将使用SetText (Text)节点。将CounterText变量拖到图中。左键单击并拖动其引脚，然后在空白处释放左键单击。从菜单中，添加一个SetText (Text)节点。

SetText (Text)只接受Text类型的输入。但是，ShapesCollected变量的类型是Integer。幸运的是，当您尝试将整数插入文本输入时，虚幻引擎会自动进行转换。

将ShapesCollected变量连接到Set Text (Text)节点的In Text引脚。Unreal 会自动为您创建一个ToText (int)节点。

要完成该功能，请将Entry节点连接到Set Text (Text)节点。

事件顺序：

1. 当您调用UpdateCounterText时，该函数将从BP_GameManager获取ShapesCollected变量
2. ToText (int)节点将ShapesCollected的值转换为Text类型
3. SetText (Text)将CounterText的文本设置为ToText (int)中的值

接下来要做的是每当玩家收集到一个形状时调用UpdateCounterText 。

调用更新函数

调用UpdateCounterText的最佳位置是在游戏增加ShapesCollected之后。我创建了一个名为IncrementShapesCollected的函数，它会为您递增计数器。每当它们与玩家重叠时，形状就会调用此函数。

单击编译，然后返回到BP_GameManager。

在调用UpdateCounterText之前，您需要对WBP_HUD的引用。看看你是否可以自己存储参考！

• 找到您创建和显示WBP_HUD的部分。
• 左键单击并拖动Create Widget节点的Return Value引脚。
• 释放左键单击空白区域，然后从菜单中选择提升为变量。
• 将新节点添加到节点链的末尾

创建变量后，将其重命名为HUDWidget。

接下来，拖动单击Set HUDWidget节点的右侧引脚并在空白处释放。添加一个UpdateCounterText节点。这将确保CounterText在游戏开始时显示ShapesCollected的值。

之后，导航到 My Blueprint 面板并转到Functions部分。双击IncrementShapesCollected打开其图形。

将HUDWidget变量拖到图表中。左键单击拖动其引脚并在空白处释放。添加一个UpdateCounterText节点并像这样连接它：

现在，每当IncrementShapesCollected执行时，它都会递增ShapesCollected，然后调用UpdateCounterText。然后，此函数会将 CounterText 更新为ShapesCollected的值。

单击编译，然后关闭BP_GameManager。按播放并收集一些形状以查看CounterText小部件更新。

接下来，您将使用称为binding的不同方法更新TimerText小部件。

绑定

绑定允许您自动更新某些小部件属性。要可绑定，该属性必须具有Bind 下拉菜单。

您可以将属性绑定到小部件中包含的函数或变量。绑定会不断地从函数或变量中获取值。然后它将绑定属性设置为该值。

您可能想知道为什么不应该一直使用绑定。绑定效率低下，因为它们不断更新。这意味着即使没有任何新信息，游戏也会浪费时间更新属性。将其与小部件仅在需要时更新的前一种方法进行比较。

话虽如此，绑定对于经常更改的元素（例如计时器）非常有用。让我们继续为TimerText创建一个绑定。

创建绑定

打开WBP_HUD并切换到Designer模式。

选择TimerText，然后转到 Details 面板中的Content部分。您将看到Text属性是可绑定的。单击绑定下拉菜单并选择创建绑定。

这将为您创建一个新函数并将您带到它的图表。将函数重命名为UpdateTimerText。

该函数将有一个Return节点，该节点带有一个Text类型的Return Value引脚。TimerText将显示您插入此引脚的任何文本。

将GameManager拖入图中，然后从中获取TimeRemaining变量。

将TimeRemaining变量连接到Return节点的Return Value 。和上次一样，虚幻引擎会自动为你添加一个转换节点。

概括：

• 绑定会不断调用UpdateTimerText函数
• 该函数将从BP_GameManager获取TimeRemaining变量
• ToText (float)节点会将值从TimeRemaining转换为Text类型。
• 然后将转换后的值输出到Return节点

HUD终于完成了。单击编译，然后关闭WBP_HUD。按播放查看最终结果。