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

LiteralliJeff

原文|《Unreal Engine 4 UI Tutorial》
作者|Tommy Tran Aug 3 2017 | 翻译 开发游戏的老王
阅读时长|25分钟 内容难度|入门
在本教程中，你将学会如何创建，显示以及更新HUD（heads-up display）

文章目录

开始吧什么是小部件（widget）创建小部件UMG UI Designer创建文本小部件创建图像小部件锚点（Anchor）创建计时器

在游戏中，开发者使用图形和文字来显示玩家角色诸如健康值、分数等相关信息。这就是所谓的用户界面（User Interface即UI）。
在虚幻4中，我们可以使用Unreal Motion Graphics (UMG)来创建UI。UMG允许我们通过简单拖拽诸如按钮、文本标签等UI元素来构建UI。
在本教程中，我们将介绍如下内容：

用HUD显示一个计数器和一个计时器显示HUD更新计数器和计时器以显示变量的值

注意，本文将使用蓝图。如果你需要复习一下，那么可以参考本系列教程中的蓝图教程。
开始吧

译者注： 本教程提供了范例工程，如果需要可以到原文网站免费注册并下载。

下载并解压范例工程。在项目文件夹中打开GeometryCatcher.uproject。

注意：如果此时弹出个消息该项目使用旧版本引擎开发的，没关系（虚幻更新很频繁）。你可以先把项目复制一下再应用该选项，或者直接应用。

点击Play，然后通过鼠标的水平滑动控制白色方块，尽量让它接住掉下来的形状。10秒钟后，形状就会停止生成。

首先，我们要创建一个HUD用来显示两件事：

一个计数器：用于显示玩家已经收集了多少形状一个计时器：显示距形状停止产生还剩多少秒

我们要使用小部件（widget）以实现上述功能。
什么是小部件（widget）

所谓小部件就是一个可以为UI提供一定可视化功能的UI元素。例如，一个按钮小部件可以提供一个用户可以看到并且可以按下的对象。

小部件本身并不可见。例如，一个网格面板小部件（Grid Panel widget）会将其内部空间等分。用户看不到网格面板，但是可以看到它的效果。

小部件中也可以包含其它小部件。下面就是一个自定义小部件包含一个文本小部件以及一个文本输入框小部件的例子：

我们甚至可以构建一个小部件，让它的大小覆盖整个屏幕。下面就是一个类似标题界面的例子。所有的UI元素也是小部件，它们都被包含在标题界面小部件里面。

现在，我们了解了什么是小部件，接下来我们为HUD创建一个小部件。
创建小部件

在内容浏览器中找到UI文件夹。点击 Add New 按钮并选择User Interface\Widget Blueprint ，将心创建的资源更名为WBP_HUD。

在WBP_HUD上双击，这时UMG UI Designer就会帮你把它打开。
UMG UI Designer

UMG UI Designer（下文简称UMG编辑器）由7个主要部分构成。

1. Designer: 设计面板，该区域是小部件的视觉展示区域。使用鼠标右键拖拽可以平移视图，鼠标滚轮可以控制缩放。
2. Details: 细节面板，显示当前所选的小部件属性。
3. Palette: 调色板（译者注：下文译为工具箱）可用小部件列表，用户自定义的小部件也会显示在此。
4. Hierarchy: 层级面板，近期使用的小部件列表。
5. Animations: 动画面板，小部件可以包含诸如位置、大小等属性的动画。此列表将显示我们所有的动画。
6. Timeline: 时间线，当我们选择一个动画时，该面板将会显示动画属性及关键帧。
7. Editor Mode: 编辑器模式， 我们可以于此处在设计模式（Designer Mode）和图模式（Graph Mode）间切换。图模式基本上就是蓝图的事件图。
创建文本小部件

要显示诸如计数器或者计时器之类的内容，使用文本小部件（Text Widget） 最合适不过了。
在工具箱中找到Text，鼠标左键拖拽到设计面板上。

先别着急文本的内容，稍后我们会替换它。
将该小部件更名为CounterText。我们可以选定小部件，然后在细节面板上为它更名。

我们可以左键拖拽小部件，让它在设计面板上移动。

当然，我们也可以在细节面板中通过修改对应的属性值来设定位置和大小。请如下设置CounterText的属性和值：

Position X: 200Position Y: 50Size X: 500Size Y: 100

目前，文本只占据了矩形框的一小块区域。

我们可以在细节面板的Appearance部分中增大字体大小。在Font属性的最右边，有一个用于设置字体大小的文本框。

将字体大小设为68.

接下来，咱们给计数器添加一个小图标，让它看起来更好看。
创建图像小部件

在UI上显示诸如小图标一类的图像，我们就可以使用图像小部件（Image Widget）。
创建一个图像小部件，然后命名为CounterIcon，将其Position X 和Position Y分别设为75和50，这样的位置就如下所示了。

我们可以在细节面板的Appearance部分，设置图片。展开Brush属性并点击下拉列表，选择一个图片。本例中，我们选择了T_Counter。

图像会看起来变形，因为小部件的大小和图片大小时不同的。
不要去修改小部件大小，我们可以使用Size To Content选项。这个选项可以自动修改小部件大小以适应其内容大小。
依然保持在细节面板，找到Slot (Canvas Panel Slot) 部分。勾选Size To Content旁边的单选框。

这样小部件就把自己的大小调整为了其内容的大小了。

当游戏运行在不同大小的屏幕上，其UI也需要相应地调整小部件的位置。为了保持UI的布局，我们需要使用锚点（Anchor）。
锚点（Anchor）

所谓锚点，就是定义小部件位置所参照的基准点。默认地，小部件以其上级小部件（父部件）的左上角为自己的锚点。所以，当我们设置一个小部件的位置，实质上实在设置它相对于锚点的位置。
在下面的例子中，每一个图片都以唯一的点作为其锚点（距离最近的顶点）。

注意，每个图片和它锚点的相对位置都是不变的。使用锚点，我们可以确保UI在不同大小的屏幕上保持相同的布局。
在下面的例子中，横条以左上和右上角为锚点。

垂直方向上，横条会移动但不会改变大小。这是因为，在Y轴方向它只有顶部一个锚点。然而它会在水平方向上改变大小，因为在X轴向上，它有两个锚点。
下面这个**锚点徽标（Anchor Medallion）**代表着锚点的位置。当我们选择一个小部件，这个标志就会显示出来。

CounterText和CounterIcon的锚点，已经在正确的位置，所以没必要调整它们。
接下来，我们为计时器创建另一个文本和图像小部件。然而，这次我们要把它们放置在右手边。
创建计时器

创建一个文本组件并命名为TimerText。设置如下属性：

Position X: 1225Position Y: 50Size X: 500Size Y: 100Font Size: 68Justification: Align Text Right (使文本右对齐)

接下来，将锚点设为右上角。我们可以通过左键拖拽锚点徽标上的圆圈来修改锚点位置。将锚点徽标移动到右上角。

请注意，位置的值会相对于锚点的改变而改变。

创建一个图像小部件，并命名为TimerIcon。设置如下属性：

Position X: 1750Position Y: 50Size To Content: CheckedBrush\Image: T_Timer

这回我们不使用锚点徽标了，我们可以直接使用预设。在细节面板中点击Anchors旁边的下拉列表，就可以看到预设了。选择第三个预设（方块在右上角的那个）
。

这样，UI的布局就完成了。我们可以模拟不同的屏幕大小，测试锚点的效果。在设计面板中点击 Screen Size 下拉列表。

选择不同的选项以改变WBP_HUD 的大小。下面是HUD在iPad Air上的效果。注意，两个小部件之间的距离变得很近。

在下面的部分，我们将了解如何显示WBP_HUD 小部件。