玩家HUD

游戏的用户界面（UI）是指与玩家进行视觉交互的任何内容，例如菜单、暂停画面、物品栏、对话框和玩家的抬头显示（HUD）。 HUD是Gameplay期间在屏幕上保持可见的UI部分，例如玩家的生命值、装备或目标指示器。

现在你的角色可以拾取物品了。之后你将学习如何使用虚幻引擎的虚幻示意图形（UMG）系统构建一个HUD，向玩家显示已经拾取了哪些钥匙。 使用UMG，你可以通过在视觉效果编辑器中拖动和排列UI元素来设计HUD，这样你就可以确切地知道玩家将在游戏中看到的内容。

开始之前

请确保你已掌握设计解谜冒险游戏前几节讲述的以下内容：

• 蓝图基础知识，如变量、函数、事件图表和添加节点。

你需要准备好在创建钥匙中创建的下列资产：

• BP_Key蓝图类

• BP_AdventureCharacter蓝图类

• Enum_KeyType枚举

创建控件蓝图

UMG包括一种称为控件的特殊蓝图，你可以用它来构建各种UI元素。 要开始构建HUD，请创建新的控件蓝图资产。

要创建新的控件蓝图，请执行以下操作：

1. 在内容浏览器中，找到Content> AdventureGame> Designer > Blueprints，然后创建名为Widgets的文件夹来存储UI资产。

   

2. 在新的Widgets文件夹中，右键点击文件夹中的空白区域并选择用户界面（User Interface）> 控件蓝图（Widget Blueprint）来创建新资产。

   

3. 在选择父类（Pick Parent Class）窗口中，点击用户控件（User Widget）。

   

4. 输入控件名称。 本教程中使用的是WBP_PlayerHUD。

5. 双击蓝图将其打开。

浏览控件蓝图编辑器

控件蓝图会在特殊的控件编辑器中打开，该编辑器有两种模式：设计器（Designer）和图表（Graph）。 要在模式之间切换，请使用编辑器右上角附近的按钮。

在设计器模式下，你可以添加和编辑UI的各个部分。

在控件编辑器的左侧，控制板会包含你可以添加到UI的所有不同控件类型。 层级面板会显示UI组件的结构。 此面板中控件的顺序和嵌套会影响UI的布局和渲染。

窗口中间的网格是视觉设计器。 就像在蓝图事件图表中一样，使用鼠标滚轮进行放大缩小，使用鼠标右键移动设计。

网格左上角的缩放级别会随着你放大或缩小而更新。 1:1缩放意味着以100%的比例查看UI，以及UI元素在应用了该分辨率的游戏中的显示情况。 如果玩家在较小的屏幕上运行你的游戏，虚幻引擎会使用DPI缩放来缩放UI以适应该屏幕。

网格的左下角包含有关当前屏幕尺寸预设的信息。 这是你的控件蓝图预览的屏幕尺寸。 默认情况下，它会使用720P的电视分辨率。

从画布面板开始

在控制板选项卡中，控件按类型排序。 面板类型的控件不会在屏幕上显示任何内容；它们就像容器，可以控制放置在其中的控件的布局和定位。 面板适合用于自动缩放UI，以适应不同的电视屏幕尺寸和显示器分辨率。

画布面板是最灵活的面板控件类型，非常适合HUD。 与其他特定布局面板或方向排列控件不同，画布面板会使用锚点将控件放置在屏幕上你想要的确切位置，确保在屏幕改变大小时一切都保持在原位。

要创建画布面板，请按照以下步骤操作：

1. 在控制板（Palette）选项卡中，搜索画布（Canvas），并将画布面板（Canvas Panel）拖入层级面板中的[WBP_PlayerHUD]上方，使其嵌套在下面。

   

   窗口中间的视觉设计器区域中将出现一个矩形。

此画布是UI的根控件。 每个控件蓝图都必须有一个根控件，即保存所有其他控件的顶层UI元素。 在画布中放置另一个控件时，两者之间存在层级关系，画布为父控件，另一个控件为子控件。

默认情况下，画布面板为1920x1080像素，代表整个屏幕。 这是一种常见的分辨率，也是很好的起始点，因此请保持此画布大小。 在运行时，虚幻引擎会缩放UI以适应玩家的屏幕。

为HUD构建布局

有了画布之后，你需要将玩家生命值和物品栏区域放到UI的左上角。

要定义画布上文本的区域，请执行以下步骤：

1. 在控制板（Palette）中搜索覆层（Overlay），然后将覆层（Overlay）面板拖到层级中，使其作为子控件嵌套在画布面板（Canvas Panel）下。

   

   覆层是一种面板类型，可在同一空间中将多个控件彼此叠加。 它们适合用于在UI元素背后添加背景图像，或在UI元素上添加静态图标或文本标签。 就这个HUD而言，我们会在UI文本后面叠加模糊效果，使其更易于阅读。

2. 选择新覆层。 此面板是画布的子控件，因此它在画布的左上角有一个锚点。

   

   在本教程中，你将把锚点保留在原处，但在细节面板中，你可以使用锚点属性来移动锚点。

   

3. 在细节面板中，将位置X（Position X）和位置Y（Position Y）设置为20。 这是覆层面板距离锚点的像素数。 添加偏移可以调整UI的外观，并防止文本超出屏幕边缘时被剪切掉。

4. 要定义你绘制UI文本的区域，请拖动覆层面板边界框上的控制点以调整大小，直至其宽约250像素，高约200像素。

   或者，在细节面板中，使用尺寸X（Size X）和尺寸Y（Size Y）调整面板的大小。

   

   此区域将显示玩家的生命值（HP）和他们收集的钥匙的名称。

5. 在控制板中，搜索并拖动一个垂直框面板，使其成为覆层下面的子项。 这种类型的面板会垂直排列其内部的UI元素，就像在表格的列中一样。

6. 添加两个水平框面板作为垂直框的子项。 水平框会水平排列其中的所有UI元素，就像在表格的一行中一样。 一个水平框是玩家生命值信息的容器，另一个水平框是Keys Collected（已收集的钥匙）标签的容器。

   

垂直框和水平框是布局控件。 这些面板就像隐形的管理器，在设计器中没有可见的框架，但会自动调整大小以适应其内容。

对齐每种类型的方框，整理你将添加到UI的文本：

• 覆层面板支持重叠，因此垂直框强制水平框垂直对齐，而不是堆叠在彼此之上。

• 第一行有两个文本框，因此通过添加水平框，你可以控制该行中每个文本框的对齐和间距。

添加文本标签

现在已经定义了HUD的结构，接下来可以添加不会根据游戏中发生的情况而改变的静态文本。

你需要在玩家生命值之前添加HP标签，在关键帧名称列表之前添加Keys Collected标签。 现在，你还要为玩家的当前生命值添加占位符文本。 在本教程系列的小节中，我们要将这个占位符更改为变量，以反映玩家的真实生命值。

要为玩家的生命值（HP）添加文本标签，请执行以下步骤：

1. 在控制板中搜索文本（text），然后将两个文本控件拖入层级，作为第一个水平框的子项。

   

   确保你添加的是文本（Text）控件，而不是文本框（Text Box）。

2. 选择水平框（Horizontal Box）下的第一个文本（Text）控件。 在细节面板的插槽（水平框插槽）[Slot (Horizontal Box Slot)]选项中，将填充（Padding）设置为5。 此设置将文本设置为距离水平框边缘5像素内。

   

3. 在内容（Content）选项中，将文本（Text）设置为HP :。

   

4. 在外观（Appearance）分段中，点击颜色和不透明度（Color and Opacity）旁边的色条，并选取文本的颜色。 本教程使用绿色（十六进制sRGB = 78FF3FFF）。

   

5. 选择第二个文本（Text）控件。 在细节面板顶部，将控件TextBlock重命名为txtHP。 在本教程的后续部分中会引用此控件，因此要给它一个独一无二的描述性变量名称。

   

6. 将填充更改为5，将文本更改为100。

   

请按照以下步骤，为玩家收集的钥匙添加文本标签：

1. 在控制板中，拖出一个文本控件，使其成为第二个水平框的子项。

2. 将填充更改为5，并将文本更改为Keys Collected:

3. 在颜色和不透明度（Color and Opacity）选项中选择一种颜色。 本教程使用橙色（十六进制sRGB = FF6200FF）。

现在每个水平框中都有一些文本，你可以看到此布局的灵活结构。 如果你选择水平框或文本控件，箭头按钮会出现在该控件的边缘。 单击箭头以重新组织控件。 通过使用每个文本控件的对齐和填充选项，你可以批量控制同行和不同行元素之间的间距。

为变量添加空间

在游戏中，玩家的大部分HUD需要在Gameplay期间更新，因为玩家会做出一系列行为，例如受到伤害、接收或使用物品，或者获得强化道具。 要在你的项目执行此操作，你需要将HUD连接到跟踪玩家钥匙的变量，以便它可以在玩家拿到钥匙时更新。

要添加用于显示钥匙列表的输入文本框，请执行以下步骤：

1. 在控制板（Palette）中，搜索并拖出一个文本框（多行）[Text Box (Multi-Line)]，使其成为垂直框（Vertical Box）的最后一个子项。 此输入控件会接受多行用户输入的文本。 你可以使用事件图表逻辑，在用户拿到某个钥匙时向此控件添加文本。

   

2. 在层级中，选择文本框。 在细节面板中，将其重命名为txtKeys。

   

   你还可以通过在层级中右键点击控件来查看和更改控件的名称。

3. 在视觉设计器中，你会看到输入文本框带有默认背景，请将其删除：

   1. 在细节面板顶部附近，展开填充并设置以下数值，用缩进填充文本框：

      • 左边：15

      • 顶部、右边和底部：4

      

   2. 在样式（Style）分段中，展开样式（Style）> 普通背景图像（Background Image Normal），然后点击着色（Tint）旁边的色条。

      

   3. 将十六进制sRGB更改为FFFFFF00以使背景透明，然后点击确定。

      

4. 此控件不带默认字体样式，因此你需要自行设置字体属性。 在样式分段中，展开文本样式（Text Style）> 字体（Font），并设置以下内容：

   1. 将字体族系（Font Family）更改为Roboto。

   2. 将字形（Typeface）更改为粗体（Bold）。

   3. 将大小更改为24。

   4. 将颜色更改为白色。

      

选择txtKeys后，在细节面板的顶部，你会看到是变量（Is Variable）已启用。 文本框接受用户输入的文本，因此会自动设置为变量。 启用是变量后，你将能够在控件蓝图的事件图表中引用和使用txtKeys。

特效中的图层

你可以模糊覆层的边界框的背景，使HUD文本更易于阅读。 使用覆层面板的分层功能，在垂直框和水平框后面放置模糊效果。

要使用控件对HUD文本后的屏幕区域进行模糊处理，请执行以下步骤：

1. 在控制板（Palette）中搜索模糊（blur），然后将背景模糊（Background Blur）控件作为覆层（Overlay）的子项拖入层级（Hierarchy）。

2. 编辑器会将背景模糊（Background Blur）添加到列表底部，将其拖拽到覆层下、垂直框上方，成为首个子项。

   

3. 在细节面板的外观选项中，将模糊强度设置为2。

   使用大幅模糊效果会增加GPU的运行时开销。 你还可以使用不透明的边界（Border）控件或使用图像（Image）控件应用纹理，这也是成本更低的替代方案。

4. 使效果填充覆层控件大小：

   1. 在插槽（覆层插槽）[Slot (Overlay Slot)]分段中，单击水平对齐（Horizontal Alignment）旁边的水平填充（Fill Horizontally）。

   2. 在垂直对齐（Vertical Alignment）旁边，选择垂直填充（Fill Vertically）。

   

下方示例展示了UI文本在没有虚幻背景、带有夸张虚化效果时的显示效果：

构建HUD的逻辑

为了完成控件蓝图，你将构建相应的逻辑，显示玩家拾取的钥匙名称。

为拾取钥匙设置构建块

在开始构建并将钥匙名称添加到HUD的逻辑之前，你需要：

• 追踪玩家拥有的钥匙的数组变量。

• 当玩家发现新钥匙时，角色的蓝图可以调用的函数。

要从其他蓝图触发HUD逻辑的执行，就要使用函数而不是事件图表。 该函数将获取玩家已收集的钥匙，将其保存在指定的变量中，并将该变量中钥匙的名称输入到txtKeys框中。

请按照以下步骤，添加一个新的变量和函数来跟踪玩家的钥匙：

1. 点击窗口右上角附近的图表（Graph），编辑控件蓝图的事件图表。 此图表的功能与目前使用的其他蓝图相同。

   

   你的txtKeys变量会列在窗口左侧的面板中。

2. 创建一个在调用时执行所有HUD逻辑的函数：

   1. 在函数（Functions）区域，点击（+）按钮添加一个函数。 该函数的新选项卡将显示在图表上方。

   2. 将函数命名为fnAddKeyHUD。

   3. 选中该函数后，在细节面板中的输入（Inputs）部分，点击+来添加新的函数输入。

      

   4. 将输入命名为KeyType并将其类型更改为枚举键类型（Enum Key Type）。

      

3. 在我的蓝图（My Blueprint）面板中，创建数组变量来存储玩家的钥匙：

   1. 在变量（Variables）区域，点击 +以创建新变量。

   2. 将变量命名为KeysToDisplay。

   3. 将其类型更改为枚举键类型（Enum Key Type）。 这是你使用红色、黄色和蓝色钥匙类型的枚举。

   4. 右键点击变量类型，将其转换为数组。 或者，使用细节面板更改其容器类型。

      

      你可以将角色蓝图的钥匙数组传递到函数中，而不是在此处重新构建，但如果你想执行任何特定于HUD的逻辑（例如显示每个钥匙的图像），在HUD中为这些钥匙设计独立的轨道，这样有更好的灵活性。

4. 要打印多行文本框中的钥匙名称，你需要将它们全部组合在一个字符串中。

   在局部变量（Local Variables）部分，点击+按钮添加一个新变量。 将其命名为Keys，并将其类型更改为字符串，将容器类型更改为单个。

   

在屏幕上显示玩家的钥匙

现在可以开始向fnAddKeyHUD函数添加逻辑了。

调用此函数时，将以红色、黄色或蓝色KeyType开始。 你需要将钥匙类型添加到KeysToDisplay 数组，并将所有钥匙添加到字符串变量，然后将该字符串转换为文本，以便在屏幕上显示。

首先，要构建KeysToDisplay数组，请执行以下步骤：

1. 在控件蓝图的图表视图中，确保你正在查看fnAddKeyHUD选项卡。

2. 要构建KeysToDisplay数组，请在函数条目节点之后添加Add Unique节点。

3. 对于其目标数组（Target Array），连接到KeysToDisplay变量的引用。

4. 对于其第二个输入，连接Key Type函数输入。

   

   Add Unique节点会接收一个数组和一个新数值，并将该数值添加到数组（如果数组中尚无该数值）。 此节点可确保钥匙不会在HUD上多次出现。

要将所有收集的钥匙合并到“Keys”字符串中，请执行以下步骤：

1. 循环会遍历KeysToDisplay数组中的每个项目。 在Add Unique节点后，添加For Each Loop节点。

2. 将另一个KeysToDisplay引用连接到循环的数组（Array）输入。

   

   对于数组中的每个项目（或元素），或循环的每次迭代，你需要将该元素转换为字符串，将其添加到钥匙的字符串变量，然后在钥匙的名称后面新增一行（例如按Enter键）。

   请记住，任何连接到Loop Body执行引脚的逻辑，都会使数组中的每个项目执行一次。 等循环遍历完所有元素后，执行会通过Completed引脚。

3. 在节点图表中右键单击，搜索添加字符串（Append String），然后添加一个字符串类型的Append节点。 这会将字符串输入组合在一起，形成单个字符串返回值。

4. 设置Append节点以获取Keys 变量的当前内容，添加新的数组元素，然后添加换行符：

   1. 对于其A输入，将引用连接到Keys。

   2. 对于其B输入，连接For Each Loop节点的Array Element引脚。 虚幻引擎添加了一个Enum to String节点来转换数值。

   3. 点击Add pin以添加C输入。 点击进入文本框并按Shift+Enter以添加新的行。

      

5. 从Append节点的Return Value引脚拖出引脚，并添加Set Keys节点。

6. 将循环的执行输出引脚连接到Set Keys节点。

   

循环主体完成后，你将获得一个长字符串，其中包含所有玩家钥匙的名称。

要将Keys字符串传递到HUD的TxtKeys文本框，请执行以下步骤：

1. 从循环的Completed执行引脚拖出，并添加SetText (Multi-Line Text Box)节点。

   如果找不到此节点，请禁用节点操作列表右上角附近的上下文关联（Context Sensitive）。

   

   SetText节点会接受文本类型输入并将其显示在目标文本框中。

2. 设置SetText (Multi-Line Text Box)节点：

   1. 对于Target，将引用连接到TxtKeys。

   2. 对于In Text，将引用连接到Keys。 虚幻引擎添加了To Text (String)节点，用于将Keys字符串转换为文本。

      

      文本是单独的数据类型。 字符串用于编程和调试，而文本用于面向用户的文本，并支持翻译和格式化。

3. 编译并保存你的蓝图。

完整的fnAddKeyHUD 函数应如下所示：

HUD已准备就绪！ 现在你需要将其添加到玩家角色，以便在启动游戏时让它显示在屏幕上。

更新玩家角色

要完成HUD设置，你需要向角色蓝图添加逻辑，用于在游戏开始时添加HUD控件，并在玩家拾起钥匙时更新。

从角色蓝图调用FnAddKeyHUD

将BP_AdventureCharacter中的钥匙逻辑连接到HUD的逻辑，这样向玩家添加钥匙也会向HUD添加钥匙。

请按照以下步骤，实现在玩家获得钥匙时触发HUD的逻辑：

1. 打开BP_AdventureCharacter蓝图。 在我的蓝图（My Blueprint）面板中的变量（Variables）部分，点击+添加新变量。

2. 将变量命名为HUD，并将类型更改为WBP Player HUD（对象引用）。

   

   这会存储你在角色事件图表中创建的HUD控件。

3. 前往事件图表的分段，其中Event fnBPIAddKey向玩家的HeldKeys数组添加了一个新的钥匙。

   

   在我的蓝图（My Blueprint）面板的图表（Graphs）分段中，展开事件图表（EventGraph）并双击事件，从而转至该图表的区域。

4. 在Add节点之后，连接FnAddKeyHUD节点。

5. 设置FnAddKeyHUD 节点：

   1. 对于Target，将引用连接到HUD变量。

   2. 对于Key Type，将引脚连接到Event fnBPIAddKey节点的Key Type引脚。

      

   现在，这会获取玩家的新钥匙并调用HUD控件蓝图中的FnAddKeyHUD函数。

6. 保存并编译蓝图。

游戏开始时显示HUD

要在玩家在关卡中生成时创建HUD，请按照以下步骤操作：

1. 在角色的事件图表中找到一个空白区域，并添加一个Event Possessed 节点。 这是在玩家控制或占据玩家角色时广播的事件。

2. 右键点击Event Possessed节点并选择添加对父函数的调用，确保父角色类中的Event Possessed逻辑仍然执行。 连接每个节点的执行和New Controller引脚。

   

   在角色蓝图的右上角，你会看到它派生自BP_FirstPersonCharacter蓝图类。 这意味着角色将使用自身和父节点的逻辑。 如果你向角色蓝图添加的事件在父节点中已经存在，则会将其重载。 重载事件时，请确保同时调用父节点版本，以便其逻辑在添加版本之前运行。

   

3. 要创建HUD，请连接Create Widget节点，并将其类（Class）更改为WBP Player HUD。 这将创建控件蓝图的实例。

4. 在Create Widget节点后添加Set HUD节点，连接两个引脚。 这会将新的控件蓝图保存到变量。

   

5. 要在屏幕上显示HUD对象，请添加Add to Viewport节点。 将其Target设置为HUD变量。

   

   虽然你可以将Create Widget节点直接连接到Add to Viewport节点，但本教程会将创建控件和屏幕上绘制的控件分开。 如果你希望控件在特定时刻之前处于就绪但隐藏的状态，例如玩家命中数次后出现连击警告，则这个属性就非常有用。 如果控件有大量动画、效果和声音，最好提前加载，避免Gameplay滞后。

6. 编译并保存。

你的新角色蓝图逻辑应如下所示：

测试HUD

点击运行（Play）测试游戏。 游戏开始时，应该会在HUD上看到玩家的HP和“已收集的钥匙（Keys Collected）”标签。 触摸钥匙应该会将该钥匙的名称添加到HUD。

根据需要调整HUD。 你也可以自行尝试以下设计：

• 调整覆层面板的大小。

• 更改字体大小和样式。

• 把它移到其他地方，不要放在左上角。

• 为背景添加不同的控件，例如纹理或材质。

要进一步设计你的HUD，请尝试用图标替换文本标签。 为此，将图像导入到内容浏览器中，并使用图像控件将其添加到HUD。 如需详细了解将资源导入虚幻编辑器，请参阅直接导入资产。

设计有效的HUD

这里还有一些设计策略，可用于创建简洁明了的HUD。

更加清晰明确：

使用高对比度文本、清晰的字体和合适的字体大小。 请确保你的HUD在标准视距下，以及玩家在复杂的环境中移动时（而不仅仅是站着不动）时依然清晰直观。

保持清晰简洁：

仅显示玩家现在需要的内容，并在需要时隐藏或最小化不相关的信息。 然而，玩家应该始终能够一目了然地看到他们需要的东西，这样他们才可以自信地做出决定。

添加反馈：

当HUD更新时（例如拾取钥匙），使用短动画、颜色变化或声音让玩家知道这一变化。

使用大小和位置确定优先级：

重要的信息应该突出显示——使用更大的文本、醒目的颜色，或者将此信息放在玩家自然就会看到的左上角或中间位置。

下一步

在下一小节中，你将继续向关卡中添加更多Gameplay元素，并学习如何对开关进行编程，使其在按下时执行操作。

• 

  谜题：开关和立方体

  在平台解谜游戏分段的第一部分中，使用材质、物理效果和蓝图创建由立方体激活的开关。