创建控件模板

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

Choose your operating system:

Windows

macOS

Linux

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

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

1 - 设置按钮控件

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

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

  1. 点击 内容浏览器 中的 添加(Add),然后选择 用户界面 > 控件蓝图(User Interface > Widget Blueprint)

    01_NewWidgetBlueprint.png

    你还可以在 内容浏览器 中右键点击,然后选择 用户界面 > 控件蓝图(User Interface > Widget Blueprint),以此来添加控件蓝图。

  2. 你应该创建两个 控件蓝图(Widget Blueprints),命名为 CustomButtonHUD

    02_WidgetsYouNeed.png

    CustomButton 是将要添加入**HUD** 控件蓝图的用户控件。

  3. 调色板(Palette)层级(Hirerchy) 中拖入来添加 按钮(Button)。右键点击添加的 按钮(Button) 并选择 用于包裹(Wrap With) > 尺寸框(Size Box)

    03_WrapWithSetButton.png

  4. 尺寸框(Size Box) 细节(Details) 面板中,将 宽度覆盖(Width Override) 调整到 300高度覆盖(Height Override) 调整到 100。你还可以将图表布局调整为 实际屏幕显示(Desired on Screen) 以了解按钮的实际大小。

    04_SizeBoxDetails.png

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

    05_AddSetStyleNode.png

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

    06_SetStylePromToVar.png

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

    07_VarDetailPanel.png

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

    08_CopyButtonStyle.png 09_SetButtonStyle.png

  9. 展开 悬停 并将 着色 颜色改为任意颜色(如黄色)。

    10_SetHovered.png

  10. ButtonStyle 中,勾选 实例可编辑(Instance Editable)生成时公开(Expose on Spawn)

    11_ButtonStyleVarDetails.png

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

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

    12_AddOnClickEvent.png

  12. MyBlueprint 面板中,选择 事件调度器 以新建名为 ButtonClicked事件调度器

    13_AddEventDispatchers.png

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

    14_OnClickButtonScript.png

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

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

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

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

    15_AddVertBoxtoCanPan.png

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

    16_VertBoxHierarchy.png

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

    17_AddButtonClickedEvent.png

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

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

    18_AddPrintStringScript.png

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

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

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

    19_OpenLevelBP.png

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

    20_CreateHUDWidget.png

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

    21_EventBeginPlayScript.png

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

最终结果

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