创建和显示UI

通过范例,讲解创建、显示及在游戏进程时移除屏幕中的UI元素。

Choose your operating system:

Windows

macOS

Linux

多数游戏中,需将部分信息通过游戏用户界面传递给玩家。 其中包括主菜单、游戏暂停菜单、生命或经验值等HUD元素、物品栏物品或在指定情景中指导玩家操作的帮助文本。

利用 虚幻示意图形(UMG),可创建控件蓝图来处理项目中的UI元素显示。 控件蓝图使用蓝图可视化脚本来设计UI元素布局及脚本功能,例如点击按钮或值改变时的行为。

在本说明指南中,将创建控件蓝图并向其添加文本,然后通过关卡蓝图,在按下按键时进行显示。

heroimage_helloworld.png

1 - 设置UI控件蓝图

首先需设置用户界面(UI)控件蓝图。

本操作指南将使用 蓝图第三人称模板。也可使用其他任何项目。

  1. 内容浏览器中,点击 新增(Add New) 按钮,在 用户界面 下,选择 控件蓝图

    01_NewWidgetBlueprint.png

    在控件蓝图内创建所有UMG UI。

  2. 将控件蓝图命名为 SampleUI ,然后双击打开。

    02_WidgetContBrowser.png

    打开蓝图时,将显示UMG编辑器界面。

    点击查看大图。

    控件蓝图默认打开到 设计器 选项卡,可用于设置UI元素的视觉布局。要编写控件蓝图的功能脚本,在编辑器右上角选择 图表

  3. 控制板 窗口中,将 文本 控件拖如 视觉设计器 图表。

    04_DragTextWidget.png

    "控制板"窗口包含多种类型的控件,可用于构造UI元素。

  4. 在文本控件的 细节 面板中,点击锚点下拉菜单,选择锁定到居中。

    05_AnchorsForTextWidget.png

    此操作可确保视口大小改变时,文本控件将继续相对屏幕中心位置锁定。

  5. 细节 面板中为 文本 控件设置以下属性:

    • 文本控件命名:建议将此属性改为可快速区分所建不同元素的命名。

    • 内容大小(Size to Content):点击此,将自动调整控件适应控件大小。

    • 文本:此为UI中显示的控件内文本。

    • 颜色和不透明度:选择文本颜色。

    • 字体大小:打开字体组,将大小调整为56。该部分中还可更改 字体系列(Font Family)字型(Typeface)

    06_TextWidgetSettings.png

  6. 此外,将文本控件放在屏幕中间。效果如下:

    07_LocationTextWidget.png

  7. 调整后选择 编译,然后选择 保存。然后关闭控件蓝图。

    08_CompileBPWidget.png

2 - 向关卡添加UI蓝图控件

要在游戏中显示刚创建的文本,需将蓝图控件添加到关卡。其中设计添加脚本告知关卡,按 Enter 键时应在游戏中显示文本。

  1. 在主工具栏中,选择 蓝图 下拉按钮,然后 打开关卡蓝图

    09_OpenLevelBP.png

  2. 在图表中点击右键,搜索 Create Widget 节点。

    10_CreateWidgetNode.png

  3. 在此节点上,点击 类(Class) 下拉菜单,搜索刚创建的控件蓝图 SampleUI

    11_SetCreateWidgetNode.png

  4. 右键点击 Return Value 引脚,选择 Promote to Variable。将变量重命名为 SampleUI

    12_PromToVarSampleUI.png 13_SetSampleUI.png

    创建控件蓝图(UI)时,建议将其提升为变量,以便之后通过蓝图脚本进行访问。

  5. Set 节点上的输出引脚连出引线,并搜索 Add to Viewport 节点。

    14_AddToViewportNode.png

    此为告知控件蓝图在游戏中显示的方式。

  6. 在图表中点击右键,并搜索 Enter 键盘事件。

    15_AddKeyboardEventNode.png

  7. Pressed 引脚连接到 Create Sample UI Widget 节点的可执行引脚。

    16_KeyboardEventScript-1.png

    此操作将告知视口,按下 Enter 时创建控件并存储为变量,然后在游戏中显示 SampleUI 控件。

  8. 按住 Ctrl 并将 SampleUI 变量从 我的蓝图(My Blueprint) 面板拖入图表。

    17_DragSampleUINode.png

  9. 从新节点的引脚连出引线,搜索并添加 Remove from Parent 节点。

    18_AddRemoveFromParentNode.png

    Remove from Parent节点将告知蓝图应在视口中移除元素。

  10. Enter 节点的 Release 引脚连接到 Remove from Parent 可执行引脚。

    19_KeyboardEventScript-2.png

    现在在游戏进程时按下 Enter 键时,将显示文本。松开Enter键时,文本将消失。

  11. 选择 编译保存 后,关闭 关卡蓝图。之后点击主工具栏中的 运行 按钮。按下并松开 Enter 查看SampleUI控件的使用情况!

    20_PlayButton.png

最终结果

在编辑器中运行时,每当按下和松开 Enter 键,便可得到类似以下范例的结果。