创建控件模板

每个使用 UMG 创建的 控件蓝图 均视为 用户控件，可在其他控件蓝图中重复使用和放置。 利用它便可创建 UI 各部分的模块，在其他控件蓝图中使用。 不仅控件的可视部分将移植到放置控件的的控件蓝图中，脚本功能也将同时移植。

编写一些蓝图脚本便可创建 UI 控件功能或外观的变量，可以每个实例为基础进行覆盖。 例如，在此指南中我们将创建一个可在其他控件蓝图中使用的按钮控件蓝图。 我们将创建并定义按钮的风格，但进行如此设置：将其放入其他控件蓝图时可对风格进行覆盖。 最后，我们将以每个实例为基础自定义点击按钮出现的效果（如需要在菜单中设置一系列外观相同但按下后作用不同的按钮，则十分适合使用此方法）。

步骤

在此指南中，我们使用的是启用了 Starter Content 的 Blueprint Third Person Template。

  1. 在 Content Browser 中 点击右键 并创建两个 控件蓝图，一个命名为 CustomButton、另一个命名为 HUD。CustomButton 是创建并在主 HUD 控件蓝图中使用的 UserWidget。

    UserWidget01.png

  2. 在 CustomButton 控件蓝图中，删除 Canvas Panel、添加一个 Button、对其 单击右键，选择 Wrap With -> Size Box。

    UserWidget02.png

  3. 在 Details 面板中将 Size Box 的 Width Override 设为 300、Height Override 设为 100。此外，您还可将图表布局改为 Desired on Screen，明确按键的实际大小。

    UserWidget03.png

  4. 在 Graph 标签上，按住 Ctrl 从 My Blueprint 面板拖动 Button_0，然后从其连出引线，添加一个 Set Style 节点。在 Variables > Apperance 类目下选中选项，其他将处理按钮背景的颜色乘数。

    UserWidget04.png

  5. 将 Event Construct 节点连接至 Set Widget Style 节点，然后 右键点击 Widget Style 并选中 Promote to Variable。

    UserWidget05.png

  6. 将新变量命名为 ButtonStyle 并 编译，然后将风格设为 Normal、Image 设为任意纹理。

    UserWidget06.png

  7. 右键点击 Normal 部分并选择 Copy，然后 点击右键 并 粘贴 到 Hovered 和 Pressed 状态。

    UserWidget07.png

  8. 展开 Hovered 并将 Tint 颜色改为任意颜色（如黄色）。

    UserWidget08.png

  9. 勾选 ButtonStyle 的 Editable 和 Expose on Spawn 复选框。进行此选择后，在其他地方使用此控件蓝图时可从其他控件蓝图修改此变量的值。

    UserWidget08b.png

  10. 选择 Button_0 变量，然后点击 OnClicked 的 +。

    UserWidget09.png

  11. 在 MyBlueprint 面板中，点击 + Event Dispatcher 按钮新建一个 事件调度器 并将其命名为 ButtonClicked。

    UserWidget10.png

  12. 将 ButtonClicked 拖入图表并选择 Call，然后将其与 OnClicked 事件挂钩。完成此设置后，按钮按下后将创建一个独有脚本功能。如果此按钮拥有多个实例且只使用 OnClicked 事件，每个实例将响应并执行相同功能。然而，创建 事件调度器 后我们即可以每个实例为基础实现事件，只让实际被点击的按钮发出额外的脚本。

    UserWidget11.png

  13. 打开 HUD 控件蓝图，然后将一个 Vertical Box 添加到 Canvas Panel，并按照下图修改大小。

    UserWidget12.png

  14. 在 Palette 下的 User Created 中为 Vertical Box 添加 3 个 Custom Buttons。

    UserWidget13.png

  15. 在 Graph 上选择 CustomButton，然后点击事件 Button Clicked 的 +。这就是我们在 CustomButton 控件蓝图中创建的 事件调度器。一旦该特定按钮被点击，它将作出响应。

    UserWidget15.png

  16. 为其他按钮点击 Button Clicked 的 +，然后将 Print String 节点连接到每个按钮，显示不同文字。在此例中，一旦按钮被按下即会在屏幕上进行显示。然而，根据点击的按钮不同，显示到屏幕上的文本也会有所不同。在实际使用中，可将每个按钮设为打开不同菜单、变更不同的游戏设置，或对玩家角色进行修改。

    UserWidget16.png

  17. 在关卡编辑器主工具栏中点击 Blueprints 和 Open Level Blueprint。

    UserWidget17.png

  18. 点击右键 并添加一个 Event BeginPlay 节点，然后将其与 Create Widget 节点相连，并把 Class 设为 HUD。

    UserWidget18.png

  19. 创建并连接一个 Add to Viewport 节点，然后将 Get Player Controller 连接到 Set Show Mouse Cursor（设为 True）。

    UserWidget19.png

  20. 编译 并关闭 关卡蓝图，然后点击 Play 在编辑器中开始游戏。

最终结果

在编辑器中进行游戏室，每个按钮的风格将基于定义的 ButtonStyle 变量自动设定。点击每个按钮时，它们将执行脚本的不同部分。事件调度器 被调用后，将调用相应的 ButtonClicked 事件。因为 ButtonStyle 变量为公开且在生成时可编辑，我们可选择在放置按钮的任意其他控件蓝图中覆盖按钮的风格。处理一些无需每次重建的动画或其他复杂脚本逻辑时此方法十分实用。将其创建为 UserWidget 则可在任意其他控件蓝图中使用，无需额外操作。

相关页面

完整内容索引