Unreal Engine 4 Tutorial 04 界面UI

IT圈老男孩1 · 发表于 2022-6-13 10:34

资源与声明：

1-本文章部分图片与文字来源 Tommy Tran《Unreal Engine 4 Tutorial for Beginners》
https://www.raywenderlich.com/663-unreal-engine-4-blueprints-tutorial
本文章提供自己的见解看法，与学习笔记，如有侵权欢迎联系删除，若文章有误，欢迎指正讨论；
本章教程主要实现的是一个玩家（Actor）吃香蕉的游戏，有点像神庙逃亡类型跑酷游戏的吃金币；
关键点有三个：
1-游戏界面UI调节
2-创建变量储存References，来完成计数器的更新
3-绑定倒数时间
0-技巧总结

0-1函数的文件层级

每个Blueprint 函数都有自己下属的很多函数，比如：

UI Blueprint的函数

GameManager的函数

比如说GameManager下面都是关于Game的函数；
UI蓝图下面都是关于UI界面的函数；每一个都可以用自己的小蓝图编辑；
1-游戏界面UI调节

这个比较简单，就是创建小部件和文本，并通过锚点来固定在屏幕的一角；
在我们自己定义的User Interface\Widget Blueprint 实现；
1-1关于Widgets

小部件是为 UI 提供某种视觉功能的 UI 元素。例如，一个 Button 小部件提供了一个用户可以看到和点击的对象。

小部件本身不必是可见的。例如，网格面板小部件在其内容之间平均划分其空间。用户看不到网格面板，但可以看到它的效果。

小部件还可以包含其他Widgets。下面是一个自定义小部件的示例，其中包含一个文本小部件（名称标签）和一个文本框小部件：

您甚至可以将小部件构建成一个完整的界面，例如菜单屏幕。下面是一个看起来像标题屏幕的小部件示例。所有 UI 元素也是小部件，并包含在标题屏幕小部件中。

现在您知道什么是Widgets，是时候为 HUD 创建一个了。
1-2创建Widgets

转到内容浏览器并导航到UI文件夹。单击Add New按钮并选择User Interface\Widget Blueprint。将新资产重命名为WBP_HUD。

双击WBP_HUD 以在UMG UI 设计器中打开它。
1-3UMG UI Designer

UMG UI Designer 由七个主要元素组成：

设计器：此区域包含小部件的可视化表示。按住右键单击并移动鼠标进行平移。通过滚动鼠标滚轮进行缩放。
详细信息：您选择的任何小部件都将在此处显示其属性
调色板：您可以使用的所有小部件的列表。任何用户创建的小部件也将出现在这里。
层次结构：您当前使用的所有小部件的列表
动画：小部件可以具有某些动画属性，例如位置和大小。此面板列出了您的所有动画。
时间轴：当您选择动画时，此面板将显示动画属性和关键帧
编辑器模式：在这里，您可以在设计器和图形模式之间切换。图表模式几乎与蓝图的事件图表相同。

1-4创建文本小部件

文本小部件非常适合显示计数器和计时器等数字信息。
转到 Palette 面板并搜索Text小部件。通过按住左键并将其拖动到设计器面板中来添加小部件。

暂时不用担心文本内容，稍后您将替换它。
将小部件重命名为CounterText。您可以通过选择文本小部件并转到详细信息面板来执行此操作。在顶部的文本框中输入CounterText。

您可以通过在设计器中左键单击并拖动小部件来移动小部件。

您还可以通过左键单击并拖动手柄来调整小部件的大小。调整大小允许您设置小部件的边界。虚幻不会渲染边界之外的任何东西。

或者，您可以通过修改详细信息面板中的值来设置位置和大小。为CounterText设置以下属性和值：

位置 X： 200
Y位置： 50
尺寸 X： 500
Y 码： 100

目前，文本只占方框的一小部分。

您可以通过转到详细信息面板并导航到外观部分来增加字体大小。在Font属性的最右侧，有一个用于设置字体大小的文本框。

将字体大小设置为68。

让我们通过在它旁边添加一个图标来使计数器看起来更漂亮。
1-5创建图像小部件

图像小部件是一种在 UI 中显示图形（例如图标）的简单方法。
创建一个Image小部件并将其命名为CounterIcon。将位置 X设置为75并将位置 Y设置为50。这将把它放在 CounterText旁边。

要设置图像，请转到详细信息面板并转到外观部分。展开Brush属性，然后单击Image的下拉菜单。选择T_Counter。

图像看起来会被拉伸，因为小部件与图像的大小不同。

您可以使用Size To Content选项，而不是调整小部件的大小。此选项将自动调整小部件的大小以适应其内容。
在 Details 面板中时，转到Slot（Canvas Panel Slot）部分。选中Size To Content旁边的复选框。

小部件将自行调整大小以适合图像。

当在不同的屏幕尺寸上玩游戏时，UI 需要相应地移动其小部件。要维护 UI 的布局，您可以使用锚点。
1-6锚点

锚点定义小部件的位置相对于何处。默认情况下，小部件的锚点设置在其父级的左上角。因此，当您设置小部件的位置时，实际上是在设置它相对于该锚点的位置。
在下面的示例中，每个图像都锚定到一个点（最近的角落）。

注意每个图像是如何保持其相对于其锚点的位置的。使用锚点，您可以确保您的 UI 在不同的屏幕尺寸上具有相同的布局。
您还可以使用锚点自动调整小部件的大小。当锚定到两个或更多点时，小部件将调整自身大小以保持其相对大小。
在下面的示例中，栏固定在左上角和右上角。

在垂直方向上，条会移动但不会调整大小。这是因为它在 Y 轴（顶部）上只有一个锚点。但是，条形图会水平调整大小，因为它在 X 轴上有两个锚点。
Anchor Medallion代表您的锚的位置。只要您选择了一个小部件，它就会出现。

CounterText和CounterIcon的锚点已经在正确的位置，因此您无需设置它们。
接下来，您将为计时器创建另一个文本和图像小部件。但是，这一次您将它们放置在右侧。
1-7创建计时器

创建一个Text小部件并将其命名为TimerText。设置以下属性：

位置 X： 1225
Y位置： 50
尺寸 X： 500
Y 码： 100
字体大小： 68
理由：文本右对齐（这将使文本与小部件的右侧对齐）

这个TimerText 晚点要绑定。

接下来，您将锚点设置在右上角。您可以通过左键单击并拖动Anchor Medallion上的圆圈来执行此操作。将Anchor Medallion移动到右上角。

注意位置是如何更新为相对于锚点的。

创建一个Image小部件并将其命名为TimerIcon。设置以下属性：

位置 X： 1750
Y位置： 50
大小到内容：选中
画笔\图像： T_Timer

您可以使用预设，而不是使用 Anchor Medallion 设置锚点。转到详细信息面板并单击锚点旁边的下拉菜单以显示预设。选择第三个预设（右上角有正方形的那个）。

UI 的布局现在已经完成。您可以通过模拟不同的屏幕尺寸来查看锚点的工作情况。转到 Designer 面板并单击Screen Size 下拉菜单。

选择一个选项将更改WBP_HUD的大小以匹配该选项。以下是 HUD 在 iPad Air 上的外观。注意小部件是如何靠得更近的。

在下一节中，您将学习如何显示WBP_HUD小部件。
1-8显示 HUD

单击编译，然后返回主编辑器。导航到Blueprints文件夹并双击BP_GameManager将其打开。
游戏一开始，HUD 应该是可见的。您可以使用Event BeginPlay节点来执行此操作。
找到Event BeginPlay节点，然后将Create Widget节点添加到节点链的末尾。此节点将创建指定小部件的实例。

单击Class旁边的下拉菜单并选择WBP_HUD。
这里就绑定了我们刚刚创建的 Widget(UI) Blueprint;

要显示 HUD，您需要使用Add to Viewport 节点。左键单击并拖动Create Widget节点的Return Value引脚。释放左键单击空白区域以调出上下文菜单。添加添加到视口节点。

让我们回顾一下事件的顺序：

一旦 Unreal 生成BP_GameManager，就会执行Restart 和 SetUpCamera 函数。这些函数设置了一些变量和相机。如果您不知道函数是什么，请不要担心。本教程稍后将介绍它们。
Create Widget 节点创建WBP_HUD 的一个实例。是这个Class的一个实例；
Add to Viewport 节点显示 WBP_HUD。

单击编译，然后返回主编辑器。按Play使用您的新 HUD 玩游戏。

要显示计数器和计时器的值，您将需要保存该信息的变量。您可以在BP_GameManager中找到这些变量。

要使用这些变量，您需要一种从WBP_HUD访问BP_GameManager的方法。您可以通过在变量中存储对BP_GameManager的引用来做到这一点。
重点，我们希望在WBP_HUD 中获取 BP_GameManager 里的信息，就用一个变量作为媒介，变量储存的是对GameManager的一个引用。
2-计数器更新

2-1存储References（引用）

存储引用很有用，因为这意味着您可以轻松访问特定实例。
想象一下，你有一个盒子，里面有一个球。如果你想找到球并检查它，这很容易，因为只有一个盒子。

现在，假设您有一百个盒子，但只有一个包含一个球。您必须检查每个盒子，直到找到带球的盒子。

每当您想检查球时，您都必须执行此操作。这将很快导致性能问题。
使用参考，您可以跟踪带球的盒子。这样，您不必检查每个框。

2-2创建变量

这个变量，就是WBP_HUD 里去调用GameManager里的信息的引用。
所以在UI的Blueprint里。
打开WBP_HUD并通过转到 Editor Mode 并选择Graph来切换到 Graph 模式。

导航到 My Blueprint 选项卡并创建一个名为GameManager的新变量。
牛逼，直接有一个type 就是GameManager的Reference；
转到 Details 面板，然后单击Variable Type旁边的下拉菜单。搜索BP_GameManager并选择BP Game Manager\Object Reference。

2-3设置引用

单击编译，然后打开BP_GameManager。
找到Create Widget节点，然后左键单击并拖动Return Value引脚。释放左键单击空白区域，然后从菜单中选择设置游戏管理器。
然后，将Add to Viewport节点链接到Set Game Manager节点。

注意：您可以通过双击电线来重新布线以创建重新布线节点。左键单击并拖动“重新布线”节点以重新布线。
接下来，创建一个Self 节点并将其连接到Set Game Manager节点的左侧引脚。Self节点将被列为Get a reference to self。
表示获取的GameManager文件，就是目前打开这个。
这个有点像一个指针，把当前GameManager指向了我们的WBP_HUD。

现在，当WBP_HUD创建时，它将引用BP_GameManager。
在下一节中，您将学习如何在函数的帮助下更新小部件。
2-4函数

在蓝图中，函数是类似于事件图表的图表。与事件图不同，您可以使用节点调用函数。但是你为什么要这样做呢？

使用函数的原因之一是 组织 organization。通过使用函数，您可以将多个节点折叠成一个节点。
查看 BP_GameManager 的Event BeginPlay部分。有两个功能：Restart和SetUpCamera。
有点像整合的电池；

这是该部分没有功能时的样子：

如您所见，使用函数看起来更简洁。
可重用性
使用函数的另一个原因是可重用性。例如，如果您想重置计数器和计时器，您可以使用Restart功能轻松完成。

这为您节省了每次要重置这些变量时都必须重新创建节点的工作。
现在您知道什么是函数，您将使用一个函数来更新CounterText小部件。
2-5更新Widget

默认情况下，无法从蓝图中访问文本小部件。这意味着您将无法设置其 Text 属性。幸运的是，这是一个简单的解决方法。
单击编译，然后打开WBP_HUD。切换到设计器模式。
选择CounterText，然后转到详细信息面板。选中位于最顶部的Is Variable 复选框。（可变的）

现在，您将能够更新CounterText。下一步是创建一个函数来更新文本。
2-6创建更新函数

在UI的Blueprint里切换回图表模式（在Designer模式底下是没有这个选项的），然后转到我的蓝图选项卡。单击“函数”部分右侧的+号。

这将创建一个新函数并将您带到它的图表。将函数重命名为UpdateCounterText。
默认情况下，图表将包含一个Entry节点。当函数执行时，它将从这里开始。

要使CounterText显示ShapesCollected变量，您需要链接它们。
将GameManager变量拖到图表中。左键单击并拖动其引脚，然后在空白处释放左键单击。从菜单中，选择Get Shapes Collected。

要设置文本，您将使用SetText (Text)节点。将CounterText变量拖到图中。左键单击并拖动其引脚，然后在空白处释放左键单击。从菜单中，添加一个SetText (Text)节点。

SetText (Text)只接受Text类型的输入。但是，ShapesCollected变量的类型是Integer。幸运的是，当您尝试将整数插入文本输入时，虚幻引擎会自动进行转换。
将ShapesCollected变量连接到Set Text (Text)节点的In Text引脚。Unreal 会自动为您创建一个ToText (int)节点。
简单说，就是我们要从Shapes Collected里获取Int数据，然后属兔到set text的 In Text 里；

要完成该功能，请将Entry节点连接到Set Text (Text)节点。

Update函数的事件顺序：

当您调用UpdateCounterText时，该函数将从BP_GameManager获取ShapesCollected变量
ToText (int)节点将ShapesCollected的值转换为Text类型
SetText (Text)将CounterText的文本设置为ToText (int)中的值

接下来要做的是每当玩家收集到一个形状时调用UpdateCounterText 。
2-7调用更新函数

调用UpdateCounterText的最佳位置是在游戏增加ShapesCollected之后。我创建了一个名为IncrementShapesCollected 的函数，它会为您递增计数器。每当它们与玩家重叠时，就会调用此函数。

单击编译，然后返回到BP_GameManager。
在调用UpdateCounterText之前，您需要对WBP_HUD的引用。看看你是否可以自己存储引用！

找到您创建和显示WBP_HUD的部分。
左键单击并拖动Create Widget节点的Return Value引脚。
释放左键单击空白区域，然后从菜单中选择提升为变量。
将新节点添加到节点链的末尾

创建变量后，将其重命名为HUDWidget。（是Create Widget节点的Return Value）

接下来，拖动单击Set HUDWidget 节点的右侧引脚并在空白处释放。添加一个UpdateCounterText节点。这将确保CounterText在游戏开始时显示ShapesCollected的值。

之后，导航到 My Blueprint 面板并转到Functions部分。双击IncrementShapesCollected打开其图形。

将HUDWidget变量拖到图表中。左键单击拖动其引脚并在空白处释放。添加一个UpdateCounterText 节点并像这样连接它：

现在，每当IncrementShapesCollected 执行时，它都会递增ShapesCollected，然后调用UpdateCounterText。然后，此函数会将 CounterText 更新为ShapesCollected的值。
单击编译，然后关闭BP_GameManager。按播放并收集一些形状以查看CounterText小部件更新。

接下来，您将使用称为绑定方法更新TimerText小部件。
但是有个疑惑IncrementShapesCollected 是什么时候被调用的呢？？

在BP_Shape里

3-绑定倒数时间

打开WBP_HUD并切换到Designer模式。
选择TimerText，然后转到 Details 面板中的Content部分。您将看到Text属性是可绑定的。单击绑定下拉菜单并选择创建绑定。

这将为您创建一个新函数并将您带到它的图表。将函数重命名为UpdateTimerText。
该函数将有一个Return节点，该节点带有一个Text类型的Return Value引脚。TimerText将显示您插入此引脚的任何文本。

将GameManager拖入图中，然后从中获取TimeRemaining变量。
将TimeRemaining变量连接到Return节点的Return Value 。和上次一样，虚幻引擎会自动为你添加一个转换节点。

概括

绑定会不断调用UpdateTimerText函数
该函数将从BP_GameManager获取TimeRemaining变量
ToText (float)节点会将值从TimeRemaining转换为Text类型。
然后将转换后的值输出到Return节点

HUD终于完成了。单击编译，然后关闭WBP_HUD。按播放查看最终结果。

您可以在此处下载已完成的项目。

		自动登录	找回密码
密码			立即注册

Unreal Engine 4 Tutorial 04 界面UI

本帖子中包含更多资源