虚幻引擎5文档已被迁移至 Epic开发者社区

UMG UI设计器快速入门

虚幻引擎4中的虚幻示意图形使用入门。

Choose your operating system:

Windows

macOS

Linux

在本 快速入门指南 中，您将了解如何使用 虚幻示意图形界面设计器（Unreal Motion Graphics UI Designer）(UMG) 实现一些基本的游戏中HUD元素和前端菜单。您将了解如何实现血条和能量条以及跟踪和显示玩家弹药的方法。

在本指南的过程中，将提供其他文档的链接，如果您有其他问题，您可通过这些文档深入了解各个部分的主题。虽然本指南将介绍完成每个步骤所需的操作，但如果您之前没有使用过虚幻编辑器，则建议您先阅读 关卡设计师快速入门 指南，以便更好地了解编辑器的一般用法、术语和过程。

1 - 必要的项目设置

在本教程中，我们将在启用 初学者内容包（Starter Content） 的情况下使用 蓝图第一人称（Blueprint First Person） 模板。

  1. 单击 内容浏览器（Content Browser） 中的 新增（Add New） 按钮，然后在 用户界面（User Interface） 下选择 控件蓝图（Widget Blueprint） 并将其命名为 HUD 。

    RequiredSetup_1.1.png

    将创建所有用户界面元素（HUD、菜单等）并放置在控件蓝图中。控件蓝图允许您以可视化方式对UI元素进行布局，并为这些元素提供脚本化功能。我们现在正在创建控件蓝图，以便我们可以告诉它，当在世界场景中生成我们的玩家角色时进行显示，不过我们会在稍后设置它。

    有关控件蓝图的更多信息，请参阅 控件蓝图 文档。

  2. 再创建两个 控件蓝图 ，一个名为 主菜单（MainMenu） ，另一个名为 暂停菜单（PauseMenu） 。

    AllWidgets.png

  3. 右键单击 内容浏览器（Content Browser） ，并创建一个名为 主（Main） 的新 关卡（Level） 。

    RequiredSetup_1.3.png

    我们会在本指南的稍后部分使用它进行主菜单（Main Menu）设置。

  4. 在 内容浏览器（Content Browser） 中，打开 Content/FirstPersonBP/Blueprints 文件夹下的 第一人称角色（FirstPersonCharacter） 蓝图。

    UMGQS2.png

    这是可操作角色的蓝图，我们将在其中创建一些信息以传递给我们的 HUD 控件蓝图进行显示。

  5. 在 我的蓝图（My Blueprint） 窗口中，单击 添加变量（Add Variable） 按钮。

    RequiredSetup_1.5.png

  6. 在新变量的 详情（Details） 面板中，将其命名为 生命值（Health） ，将其更改为 浮点（Float） 变量类型，并将 默认值（Default Value） 设置为 1.0 。

    RequiredSetup_1.6.png

    该变量表示我们将在HUD上显示的玩家角色的生命值。

  7. 创建另一个名为 能量（Energy） 的 浮点（Float） 变量，并将其 默认值（Default Value） 设置为 1.0 。

    RequiredSetup_1.7.png

    该变量表示我们将在HUD上显示的玩家角色的能量值。

    无法输入默认值？单击工具栏中的 编译（Compile） 按钮以编译蓝图，然后重试。

  8. 创建另一个名为 弹药（Ammo） 的 整数（Integer） 类型的变量，并将其 默认值（Default Value） 设置为 25 。

    RequiredSetup_1.8.png

  9. 再创建一个名为 最大弹药量（MaxAmmo） 的 整数（Integer） 变量，并将其 默认值（Default Value） 设置为 25 。

  10. 在 图表（Graph） 窗口中找到 Event Begin Play 节点。右键单击执行引脚并选择 拆分链接（Break Link to Branch） 。

    RequiredSetup_1.10.png

    这将断开Event Begin Play的连接，以便我们添加新功能。

    您还可以在执行引脚上使用Alt+单击来断开它。

  11. 选择 Event Begin Play 节点并将其拖动至左侧，为将在后续步骤中创建的新节点提供空间。

  12. 拖出 Event Begin play ，然后添加一个 Create Widget 节点，并将 类（Class） 设置为您的 HUD 控件蓝图。

    RequiredSetup_1.12.png

  13. 拖出 Create HUD_C Widget 的 返回值（Return Value） ，选择 提升到变量（Promote to Variable） 并命名为 HUD引用（HUD Reference） 。

    RequiredSetup_1.13.png

    这将在游戏启动时创建我们的HUD控件蓝图，并将其存储为一个变量，以便稍后访问。这对于以后调用函数或设置HUD的属性很有用，例如，如果您想在游戏暂停时隐藏HUD，可以通过该变量访问HUD。

  14. 拖出 Set 节点的输出引脚，并添加 Add to Viewport 节点。

    UMGQS9.png

    顾名思义，这将把指定为目标的控件蓝图添加到玩家视口中，并将其绘制在屏幕上。

调整角色变量

在开始生成实际的HUD之前，我们要做的最后一件事是提供一种用于更改我们角色变量的方法。

  1. 在 第一人称角色（FirstPersonCharacter） 蓝图中，当按住 Alt 时，拖入 能量（Energy） 变量，并将其放置在Jump脚本旁边。

    Step2_1.png

  2. 按住 Ctrl ，拖入 能量（Energy） 变量副本，并将其连接到 Float - Float 节点，值设置为 0.25 ，连接方式如图所示。

    Step2_2.png

    每次角色跳跃时，将从角色的当前能量值中扣除0.25。

  3. 为 生命值（Health） 变量设置相同的脚本，但是使用 F 按键事件（或任何其他按键事件）进行测试。

    Step2_3.png

    这将让我们能够在每按下一个按键时测试我们的生命值（Health）变量是否通过HUD正确显示。

  4. 找到 生成发射物（Spawn Projectile） 脚本，在 InputAction Fire（InputAction Fire） 事件后， 右键单击 并添加一个 Branch 节点。

  5. 对于 Branch 条件，按住 Ctrl 并拖入 弹药（Ammo） 变量（连接到 整数（Integer）> 整数（Integer） 变量），其值设置为 0 ，连接方式如图所示。

    Step2_4.png

    这将仅允许玩家在弹药大于零的情况下射出发射物。

  6. 在 生成发射物（Spawn Projectile） 脚本末尾处，在 Play Sound at Location 节点后，将 弹药（Ammo） 设置为等于 弹药-1（Ammo - 1） 。

    RequiredSetup_1.2.5.png

    这会在每次玩家发射发射物时减去1个弹药，让我们在HUD上有所显示。

    要添加重装弹药的功能，请添加一个R按键事件，按住alt拖入弹药（ammo）变量，按住ctrl拖入最大弹药量（max ammo）变量，并将其连接起来，如下图所示： RequiredSetup_ReloadAmmoNote.png

  7. 编译（Compile） 并 保存（Save） ，然后关闭蓝图。

在下一步中，我们将设置生命值（Health），能量（Energy）和弹药（Ammo）变量在我们HUD上的显示，并使它们在游戏中生效。

2 - 显示生命值、能量和弹药

视觉效果：生命值、能量和弹药

这里我们将开始设置我们HUD的视觉效果方面。

  1. 打开您的 HUD 控件蓝图，访问 控件蓝图编辑器（Widget Blueprint Editor） 。

    Step2_6.png

    在控件蓝图编辑器（Widget Blueprint Editor）中，我们可以提供我们HUD的视觉效果布局和脚本功能。

    有关控件蓝图编辑器的各个不同方面的更多信息，请参阅 控件蓝图 。

  2. 在 面板（Panel） 下的 控制板（Palette） 窗口中，将 水平方框（Horizontal Box） 拖动到 层级（Hierarchy） 窗口中的 画布面板（CanvasPanel） 上。

    DisplayingHealth_2.2.png

    面板（Panel） 控件有点像其他控件的容器，并为其中的控件提供额外的功能。

  3. 同样在 面板（Panel） 下，将两个 垂直方框（Vertical Box） 拖动到 水平方框（Horizontal Box） 上。

    Step2_8.png

  4. 在 常见（Common） 下，将两个 文本（Text） 控件拖动到第一个垂直方框上，将两个 进度条（Progress Bar） 拖动到第二个垂直方框上。

    Step2_9.png

  5. 选择 水平方框（Horizontal Box） ，然后在图表中调整该框大小，并将其放置在窗口的左上角。

    Step2_10.png

    进度条将显示得非常小，但别担心，我们接下来会解决这个问题。

  6. 选择两个 进度条（Progress Bar） ，然后在 详情（Details） 面板中将它们的 大小（Size） 设置为 填充（Fill） 。

    DisplayingHealth_2.6.png

  7. 选择包含进度条的 垂直方框（Vertical Box） ，并将其也设置为 填充（Fill） 。

    DisplayingHealth_2.7.png

  8. 再次选择 水平方框（Horizontal Box） ，重新调整其大小，使进度条与文本对齐。

    Step2_13.png

  9. 在 层级（Hierarchy） 窗口中选择最顶部的 文本（Text） 控件，然后在 详情（Details） 面板的 内容（Content） 下，输入 生命值：（Health:） 。

    DisplayingHealth_2.9.png

    对另一个 文本（Text） 控件执行相同的操作，但将它标记为 能量（Energy） ，使您的图表看起来如下所示。

    Step2_15.png

    在默认情况下，UMG文本控件使用虚幻引擎自带字体。这可以帮助您快速启动项目。但该内置字体有一定的限制。例如，它只支持少量语言。对于大部分项目，尤其是那些界面上使用非英语文本的项目，需要将您自定义的字体导入资源，并设置文本控件使用该字体。详情请参阅 字体 文档。

  10. 选择生命值旁边的 进度条（Progress Bar） ，并在 详情（Details） 面板中，将 填充颜色和不透明度（Fill Color and Opacity） 设置为绿色。

    UMGColorPicker1.jpg

    您可能注意到，分配颜色时，进度条没有改变颜色。这是因为填充进度条的 百分比（Percent） 值被设置为0.0（您可以更改此值来测试不同的颜色，稍后我们会将它链接到我们角色的生命值）。

  11. 还为 能量（Energy） 条设置填充颜色（Fill Color）（我们选择了橙色）。

  12. 为了显示弹药，使用上面的方法，向 层级（Hierarchy） 添加控件，这样您的设置如下所示。

    Step2_16.png

  13. 选择包含弹药信息的 水平方框（Horizontal Box） ，调整大小并放置在右上角。

    DisplayingHealth_2.13.png

  14. 在选中 水平方框（Horizontal Box） 的情况下，在 详情（Details） 面板中单击 锚点（Anchor） 并选择右上角的锚点。

    DisplayingHealth_2.14.png

    这会将锚点Medallion移动到屏幕的右上角。

    Step2_19.png

    通过 锚定（Anchoring） 一个控件，您可指示控件，无论屏幕大小如何，它都将出现在相对于锚点Medallion所在位置的地方。换句话说，当屏幕大小发生变化时，将控件移开锚点Medallion位置相同距离（在本例中，离开屏幕右上角相同的距离）。

    您可以单击并更改图表内的 预览大小（Preview Size） 选项，从而测试不同尺寸的屏幕大。

脚本：生命值、能量和弹药

现在我们有了视觉效果布局，我们可以添加钩来提供HUD元素背后的功能。

  1. 在控件蓝图编辑器（Widget Blueprint Editor）窗口的右上角单击 图表（Graph） 按钮。

    Step2_20.png

  2. 在 图表（Graph） 中的 Event Construct 节点下， 右键单击 并添加 Get Player Character 节点。

  3. 拖出 返回值（Return Value） 引脚，并选择 **转换为第一人称角色（Cast to FirstPersonCharacter）

    ScriptHealthEnergyAmmo_2.3.png

    这里我们检查玩家角色所使用的角色蓝图是否确实是 第一人称角色（First Person Character） 蓝图。

  4. 拖出 作为第一人称角色（As First Person Character） 引脚并选择 提升到变量（Promote to Variable） （将其命名为 我的角色（My Character） ），然后进行连接，如下所示。

    Step2_22.png

    这将允许我们访问包含在 第一人称角色（FirstPersonCharacter） 蓝图中的变量。

  5. 单击工具栏中的 编译（Compile） 以编译脚本。

  6. 返回 设计器（Designer） 选项卡，并选择 生命值（Health） 旁边的 进度条（Progress Bar） 。

  7. 在 详情（Details） 面板中，在 进度（Progress） 下，单击 百分比（Percent） 旁边的 绑定（Bind） 选项，并将其设置为使用 我的角色（MyCharacter） 中的 生命值（Health） 。

    ScriptHealthEnergyAmmo_2.7.png

    这将进度条（Progress Bar）的值绑定到 第一人称角色（First Person Character） 蓝图中的 生命值（Health） 变量。现在，每当我们的角色在蓝图中的生命值（Health）值发生更改时，会自动在我们的HUD中更新。您还可能注意到，在绑定进度条（Progress Bar）之后，进度条不会发生变化。这是因为我们已经声明将在 事件构造（Event Construct） （或者在游戏开始构造HUD时）时发生这种情况。

  8. 选择能量（Energy）旁边的 进度条（Progress Bar） 并重复上面的过程，将 百分比（Percent） 绑定到 我的角色（MyCharacter） 中的 能量（Energy） 。

    ScriptHealthEnergyAmmo_2.8.png

  9. 在弹药（Ammo）文本后选择25，然后在 文本（Text） 的 详情（Details） 面板中单击 绑定（Bind） 和 创建绑定（Create Binding） 。

    ScriptHealthEnergyAmmo_2.9.png

    现在，就像我们以前使用 子对象属性（Sub-Object Properties） 绑定相同类型的属性一样，我们也可以创建自己的自定义绑定。这里，我们将 文本（Text） 属性绑定到 第一人称角色（First Person Character） 蓝图中的 整数（Integer） 属性，以显示当前弹药。

  10. 在创建并自动打开的函数中，按住 Ctrl 并将 我的角色（MyCharacter） 变量拖到图表中。

    Step2_27.png

  11. 拖出引脚 我的角色（MyCharacter） 并选择获取 弹药（Ammo） 。

  12. 将弹药（Ammo）引脚连接到 返回节点（Return Node） 的 返回值（Return Value） 。

    Step2_28.png

    连接时将自动为您创建一个转换节点 To Text 。

  13. 对另一个25文本重复上述过程，并为"最大弹药量（Max Ammo）"文本创建绑定。

    Step2_29.png

    如果您的最大弹药量（Max Ammo）将保持不变，您可能不需要这样操做，但这样操做使您可以更改弹药量。

  14. 单击 编译（Compile） 和 保存（Save） ，然后单击 运行（Play） 按钮以在编辑器中运行。

现在我们的生命值（Health）、能量（Energy）和弹药（Ammo）值显示在我们的HUD上，并反映我们角色蓝图中的当前值。按空格键会使角色跳跃并消耗能量，按鼠标左键会使武器发射而减少弹药，按F键会使我们失去生命值（稍后您可以将其连接到伤害系统）

在下一部分，我们将创建一个主菜单，我们可以用它来加载到我们设置的游戏中。

下一步，我们将添加一个游戏内暂停菜单，这样玩家可以暂停游戏或退出游戏，并回到该主菜单（Main Menu）。

3 - 进一步阅读

要继续搭建你通过此快速入门指南创建的UHD，请参阅 创建主菜单 和 创建暂停菜单 。

有关本快速入门指南中涵盖的编辑器主题以及整个编辑器的更多信息，请参阅 引擎功能 页面。

至于本指南所述主题的涵盖范围：

欢迎帮助改进虚幻引擎文档！请告诉我们该如何更好地为您服务。
填写问卷调查
取消