【新手必读】Unreal Engine 4 UI入门教程（下）

最新推荐文章于 2023-06-25 00:48:08 发布

开发游戏的老王

最新推荐文章于 2023-06-25 00:48:08 发布

阅读量1.3k

点赞数 4

分类专栏：虚幻引擎图文笔记我的译文文章标签：虚幻4 UE4 虚幻引擎游戏开发

原文链接：https://www.raywenderlich.com/480-unreal-engine-4-ui-tutorial

版权

虚幻引擎图文笔记同时被 2 个专栏收录

195 篇文章 341 订阅

订阅专栏

我的译文

36 篇文章 12 订阅

订阅专栏

本文是《Unreal Engine 4 UI 入门教程的下半部分，上半部分请见《Unreal Engine 4 UI 入门教程（上）》
作者|Tommy Tran Aug 3 2017 | 翻译开发游戏的老王

文章目录

显示HUD

点击编译并回到主编辑器。在Blueprints文件夹打开BP_GameManager。

HUD应该在游戏一开始就显示出来，所以我们可以使用Event BeginPlay节点来显示它。

找到Event BeginPlay节点，并节点链的末尾处添加Create Widget 节点。该节点会实例化一个指定的小部件。

在这里插入图片描述

点击Class旁边的下拉列表，选择WBP_HUD 。

在这里插入图片描述

要显示HUD，还需要一个Add to Viewport节点。左键拖拽Create Widget节点的Return Value引脚，并在空白处释放，在弹出的上下文菜单中添加Add to Viewport。

在这里插入图片描述

我们捋一捋要发生的事件：

引擎生成BP_GameManager之后就会执行Restart和SetUpCamera两个函数。
Create Widget创建WBP_HUD实例。
Add to Viewport节点显示WBP_HUD。

点击编译并回到主编辑器，按下Play，这时游戏中就可以显示HUD了。

在这里插入图片描述

要让计数器和计时器显示数据，我们就需要一些存储数据的变量。在BP_GameManager我们可以看到如下变量。

在这里插入图片描述

要使用这些变量，我们要能够从WBP_HUD访问到BP_GameManager。其实只要把BP_GameManager的引用存储到一个变量里就可以了。

存储引用

存储引用非常有用，这意味我们可以非常方便地访问指定实例。

试想一下，我们有一个里面装有球的盒子。如果你想找到球并检测它，这很容易，因为我们只有一个盒子。

在这里插入图片描述

在试想一下，我们有一百个盒子，但只有一个里面有球。那么我们就得检查每一个盒子，直到找到有球的盒子。

在这里插入图片描述

如果每次我们想检测球就要执行一遍上述操作，那么很快就会导致性能问题。

使用引用，我们可以保存持有球的盒子的路径，这样就没有必要查询每一个盒子了。

在这里插入图片描述

创建变量

打开WBP_HUD并在编辑器模式处切换到图形模式。

在这里插入图片描述

在My Blueprint标签上创建新的变量并命名为GameManager。

点击细节面板Variable Type旁边的下拉菜单，找到BP_GameManager并选择BP Game Manager\Object Reference（译者注：就是把GameManager设为BP_GameManager类型）。

在这里插入图片描述

设置引用

点击编译并打开BP_GameManager。

定位到Create Widget节点并左键拖拽Return Value引脚，然后在空白处释放，在出现的菜单中选择Set Game Manager。

然后将Add to Viewport 节点连接到Set Game Manager。

在这里插入图片描述

注意：我们可以在连线上双击，创建Reroute节点，然后左键拖拽它们，以美化布线。

接下来，创建Self 节点并将其连接到Set Game Manager 节点的左边。（注：创建节点的时候Self节点在列表里显示为Get a reference to self）。

在这里插入图片描述
这样，当WBP_HUD实例化以后，它就拥有了一个BP_GameManager的引用。

在下个部分，我们将了解在函数的帮助下，如何更新小部件。

函数

在蓝图中，函数和事件很相似，有所不同的是，我们可以使用节点来调用函数。为什么我们要使用函数呢？

在这里插入图片描述

更好的组织（Organization）

使用函数的好处之一就是便于组织代码（节点）。我们可以把很多节点打包到一个节点中。

看一下BP_GameManager部分的 Event BeginPlay，有两个函数：Restart和SetUpCamera。

在这里插入图片描述

如果不适用函数的话，该部分将会如下所示：

在这里插入图片描述

如你所见，使用函数的话，将会看起来整洁很多。

更好的复用性（Reusability）

使用函数的另一个有点就是更好的复用性。例如，如果我们想重置计数器和计时器，那么使用一个Restart函数就很方便了。

在这里插入图片描述
这样，就没有必要在每次重置的时候都重新创建和连接节点来重置那些变量了。

现在，我们知道什么是函数了，接下来要用一个函数实现更新CounterText 小部件。

更新小部件

默认情况下，文本小部件在蓝图中不可以访问。这意味着我们无法为它们设置属性。幸运的是，这很好解决。

点击编译并打开WBP_HUD，切换到设计模式。

选择CounterText并在其细节面板中勾选最上面的checkbox。

在这里插入图片描述

现在我们就可以更新CounterText。下面就是要创建一个函数来更新文本。

创建更新函数

切换到图模式，并在My Blueprint标签处点击Functions右边的+号

在这里插入图片描述

上述操作是创建了一个函数并将你带入它的视图。将其重命名为UpdateCounterText。

默认地，图会包含一个入口节点（Entry node）。当函数执行的时候，这个节点就是它的起点。

在这里插入图片描述

要让 CounterText 显示ShapesCollected的值，就需要将它们连接到一起。

将GameManager拖拽到图中。左键拖拽它的引脚并在空白处释放。在出现的菜单中选择Get Shapes Collected。

在这里插入图片描述

我们使用 SetText (Text)节点来设置文本。将CounterText拖拽到图中。左键拖拽它的引脚并在空白处释放。在菜单中选择SetText (Text) 节点。

在这里插入图片描述

SetText (Text) 节点仅接受 Text类型的输入，然而ShapesCollected 是个整型。幸运的是，当我们把一个整型拖拽给 Text输入端时，虚幻可以自动自动进行转换。

连接ShapesCollected到Set Text (Text) 的 In Text 引脚。虚幻会自动为我们生成一个ToText (int) 节点。

在这里插入图片描述

按如下所示连接各节点，以完成函数。

在这里插入图片描述

事件的顺序：

当UpdateCounterText被调用，它会从BP_GameManager 获取ShapesCollected 变量。
ToText (int) 会把ShapesCollected 转换为Text 类型。
SetText (Text) 会把CounterText的文本设为**ToText (int)**的值。

接下来，就是要实现，当玩家收集到一个形状时就调用UpdateCounterText。

调用更新函数

调用UpdateCounterText函数的最佳时机就是在ShapesCollected数值刚增加以后。笔者已经定义了一个名为IncrementShapesCollected的函数用于增加计数器数值。当游戏中的形状和玩家重叠就会调用这个函数。

在这里插入图片描述

点击编译并回到BP_GameManager。

我们需要一个WBP_HUD的引用，才能够调用到UpdateCounterText。试一下，你自己能否实现存储引用？

以下为读者自测部分的答案：

定位到我们创建和显示WBP_HUD的地方。
左键拖拽Create Widget节点的Return Value引脚。
在空白处释放，然后在菜单中选择提升为变量（Promote to variable）。
在节点链的最后将新的节点添加进去。

将新的变量命名为HUDWidget

在这里插入图片描述