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

RecursiveFrog

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

文章目录

显示HUD存储引用创建变量设置引用函数

更好的组织（Organization）更好的复用性（Reusability）

更新小部件

创建更新函数调用更新函数

绑定创建一个绑定

显示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

拖拽Set HUDWidget右边的引脚，并在空白处释放，添加UpdateCounterText。这是在确保CounterText 在游戏中显示的是ShapesCollected 的值。

然后，在My Blueprint面板的Functions部分，双击IncrementShapesCollected函数，打开它的图。

将HUDWidget 拖拽到图中。左键拖拽它的引脚并在空白处释放。添加UpdateCounterText节点并如下连接：

现在，只要IncrementShapesCollected执行，它就会增加ShapesCollected的值，然后调用UpdateCounterText。这个函数就会将CounterText 更新为ShapesCollected 的值。
点击编译并关闭BP_GameManager。按下Play并收集一些形状看看CounterText 是否更新。

接下来，我们要更新计时器小部件。不过，这次要使用一种不同的方法：绑定（binding）。
绑定

绑定允许我们自动更新一些小部件的属性。该属性必须有**绑定下拉列表（Bind drop-down）**才可以绑定。

我们可以在小部件中将属性绑定到函数或变量上。然后绑定就会连续不断地从函数或变量上取值。从而为属性赋值。

你可能奇怪，我们是不是只用绑定就可以了呢？绑定效率并不高，因为它要不停的更新。这意味着游戏要耗时去更新一些没有变化的值。回忆一下之前的方法，它只在有需要的时候才会更新。
也就是说，绑定适合于诸如计时器这样频繁更新的元素。接下来，咱们为TimerText创建一个绑定。
创建一个绑定

打开WBP_HUD 并切换到设计模式。
选择TimerText并在细节面板中找到Content部分。我们发现Text属性是可绑定的。点击Bind drop-down 并选择Create Binding

该操作会创建一个新的函数，并跳转到它的图中。将其重命名为UpdateTimerText。
这个函数的将带有一个Text类型的返回值节点。TimerText将显示其输入引脚的内容。

将GameManager拖拽到图中，并从中获取到TimeRemaining变量。
将TimeRemaining连接到返回值节点的Return Value上。和上次一样，虚幻会自动添加一个转换节点。

小结：

绑定会连续不断地调用UpdateTimerText函数。该函数会从BP_GameManager中获取TimeRemaining。ToText (float)节点会把TimeRemaining 转换为Text 类型。转换后的值将会输出到返回值节点。

HUD到此完成。点击编译然后关闭WBP_HUD。 按下Play看一下最终结果。