创建控件模板

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

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 为公开变量,且在生成时可编辑,因此可将其放入控件蓝图覆盖其中按钮样式。如不想在各蓝图中重新创建某些动画或其他复杂脚本逻辑,操作将十分有用。通过将按钮创建为用户控件,可在任何其他控件蓝图中重复使用,而无需进行额外工作。

欢迎来到全新虚幻引擎4文档站!

我们正在努力开发新功能,包括反馈系统,以便您能对我们的工作作出评价。但它目前还未正式上线。如果您对此页面有任何意见与在使用中遭遇任何问题,请前往文档反馈论坛告知我们。

新系统上线运行后,我们会及时通知您的。

发表反馈意见