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

创建控件模板

在游戏进程中创建、显示和移除屏幕UI元素的方法范例。

Choose your operating system:

Windows

macOS

Linux

使用UMG创建的每个 控件蓝图 都被视为 用户控件 ，其可在其他控件蓝图中重复使用和放置。 其视觉效果和脚本功能都将延续到该蓝图中。

利用某些蓝图脚本，可创建UI控件的运行方式或外观的变量，可逐实例基础覆盖此类方式或外观。 本操作指南中将创建按钮并设定样式，通过此操作，便可在将其放置入其它控件蓝图时覆盖样式。 最后，可自定义逐实例基础点击按钮时的结果。如在菜单中具有一系列按钮，且希望其外观和操作相同，但点击后产生的结果不同，此操作将十分有用。

1 - 设置按钮控件

首先，需创建按钮并设置点击按钮时要运行的脚本。

本操作指南将使用 蓝图第三人称模板 ，同时启用 初学者内容包 。

  1. 右键点击 内容浏览器 ，创建两个 控件蓝图 ，一个命名为 CustomButton ，另一个命名为 HUD 。

    UserWidget01.png

    CustomButton 为要添加到 HUD 控件蓝图中的用户控件。

    同时还可通过前往到 内容浏览器 > 新增 > 用户界面 添加控件蓝图。

  2. 删除 CustomButton 空间蓝图中的 画布面板 。然后，添加按钮并右键点击，选中 用于包裹（Wrap With） > 尺寸框（Size Box） 。

    UserWidgets_new_02.png

  3. 在 尺寸框 细节 面板中，将 宽度覆盖 改为 300 ， 高度覆盖 改为 100 。也可将图形布局改为 实际屏幕显示（Desired on Screen） ，以了解按钮的实际大小。

    UserWidget03.png

  4. 在事件图表中，长按 Ctrl 键并从 我的蓝图 面板中拖出 按钮 。然后，拖出引脚并添加 设置样式（Set Style） 节点。确保选中 Variable Apperance 节点，而非 Button Function 节点。

    UserWidget04.png

  5. 将 Event Construct 节点连接到 Set Widget Style 节点，然后右键点击 控件样式 并选择 升级为变量 。

    UserWidget05.png

  6. 将新变量命名为 ButtonStyle ，然后 编译 蓝图。然后，将 法线 > 图像 样式设为任意纹理。

    UserWidgets_new_06.png

  7. 右键点击 法线 部分，然后选择 复制 。然后，将图像设置粘贴到 悬停 值和 按下 值。所有三个数值现应具有相同图像纹理。

    UserWidgets_new_07.png UserWidgets_new_07.2.png

  8. 展开 悬停 并将 着色 颜色改为任意颜色（如黄色）。

    UserWidgets_new_08.png

  9. 在 ButtonStyle 中，勾选 实例可编辑（Instance Editable） 和 生成时公开（Expose on Spawn） 。

    UserWidgets_new_09.png

    利用此操作，可在其他蓝图中使用该控件蓝图时，修改此变量的值。

  10. 选择 Button 变量，然后点击 + 号将 OnClicked 节点添加到图表。

    UserWidgets_new_10.png

  11. 在 MyBlueprint 面板中，选择 事件调度器 以新建名为 ButtonClicked 的 事件调度器 。

    UserWidgets_new_11.png

  12. 将 ButtonClicked 拖入图表，选择 调用 ，然后将该节点连接到 OnClicked 事件。

    UserWidget11.png

    点击按钮时，其将创建专属的脚本功能。如拥有此按钮的多个实例，且仅使用 OnClicked 事件，各实例将进行响应并执行相同功能。然而，通过创建 事件调度器 ，即可在逐实例基础上实现事件，同时仅有实际点击的按钮才会触发额外脚本。

2 - 将按钮控件添加到HUD控件

创建并编写按钮控件后，现在可将按钮添加到HUD控件，同时将HUD添加到视口，游戏内即可显示按钮。

  1. 打开 HUD 控件蓝图，并向 画布面板 添加 垂直框 。将框的尺寸调小。

    UserWidget12.png

  2. 在 用户创建 下的 选用板 中，向 垂直框 添加三个 自定义按钮 。

    UserWidget13.png

  3. 在事件图表中，选择所有 CustomButton ，然后点击 + 将 点击按钮 事件添加到图中。现在应有3个事件，每个按钮一个。

    UserWidgets_new_15.png

    此为 CustomButton 控件蓝图中创建的 事件调度器 ，点击此特殊按钮时其将进行响应。

  4. 对于各 ButtonClicked 事件，拖出引脚并将 Print String 节点连接到各事件。在 字符串中 文本框中添加不同文本。

    UserWidget16.png

    本例中将根据点击的按钮将不同文本打印到屏幕。在现实范例中，可让各按钮打开不同菜单、修改不同游戏设置，或对玩家角色进行改造。

    基于范例目的，本指南模拟点击按钮。欲了解制作HUD菜单的方法，参见UMG UI设计器快速入门指南中的 创建主菜单 。

  5. 从关卡编辑器主工具栏前往 蓝图 ，并选择 打开关卡蓝图 。

    UserWidget17.png

  6. 在事件图表中点击鼠标右键，并添加 Event BeginPlay 节点。将节点连接至 Create Widget 节点，并将 类 设为 HUD 。

    UserWidget18.png

  7. 添加 Add to Viewport 节点，并将其连接至 Create HUD Widget 节点。然后，将 Get Player Controller 函数添加到 Set Show Mouse Cursor 节点，并勾选此复选框（将其设为True）。

    UserWidget19.png

  8. 编译 、 保存 ，再关闭 关卡蓝图 ，然后在编辑器中点击 运行 ，与游戏中的按钮进行交互。

最终结果

在编辑器中运行时，将基于已定义的 ButtonStyle 变量自动设置各按钮的样式，调用 事件调度器 和相应的 ButtonClicked 事件时，此类按钮将执行脚本的不同部分。 ButtonStyle 为公开变量，且在生成时可编辑，因此可将其放入控件蓝图覆盖其中按钮样式。如不想在各蓝图中重新创建某些动画或其他复杂脚本逻辑，操作将十分有用。通过将按钮创建为用户控件，可在任何其他控件蓝图中重复使用，而无需进行额外工作。

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