创建和显示UI

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

Windows
MacOS
Linux

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

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

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

heroimage_helloworld.png

1 - 设置UI控件蓝图

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

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

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

    CreatingWidgets01.png

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

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

    CreatingWidgets02.png

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

    点击查看大图。

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

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

    CW04_textblock.png

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

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

    CreatingWidgets05.png

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

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

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

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

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

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

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

    CW06_details.png

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

    CreatingWidgets09.png

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

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

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

    CreatingWidgets10.png

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

    CreatingWidgets11.png

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

    CreatingWidgets12.png

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

    CreatingWidgets13.png CW10.5_promotevariable_sampleuiname.png

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

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

    CreatingWidgets14.png

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

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

    CreatingWidgets15.png

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

    CreatingWidgets16.png

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

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

    CreatingWidgets17.png

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

    CreatingWidgets18.png

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

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

    CreatingWidgets19.png

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

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

    CreatingWidgets20.png

最终结果

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

Select Skin
Light
Dark

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

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

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

发表反馈意见