在UE4中，可以使用**Unreal Motion Graphics (UMG)**创建**UI**，UMG允许通过拖放UI元素(如按钮和文本标签)构建UI。

  • 学习目标：
    • 创建显示计数器和计时器的平时显示器（HUD）
    • 显示 HUD
    • 更新计数器和计时器以显示变量值

1.gif

  • 任务：创建一个显示两件功能的HUD
    • 计数器：用于追踪玩家收集了多少个物体
    • 计时器：显示形状停止之前剩余的秒数
  • 要实现这些功能，需要使用**Widgets**
  1. **Widget**是一个UI元素，它为UI提供某种视觉功能。
  2. Widget本身不必可见，不可见的widget也可以看到其效果
  3. widget还可以包含其他小部件
  4. widget也可以构造为整个界面，其界面上的UI元素也可以是widget，包含在该widget中。

    1.UMG UI设计器

  • 创建流程： Content Browser —> UI文件夹 —> Add/Import —> User Interface —> Widget Blueprint
  • **UMG UI设计器**由七个主要元素组成：
  • image.png
  1. **Designer**：此区域包含widget的可视表示形式。通过按住鼠标右键并移动鼠标进行平移。通过滚动鼠标滚轮进行缩放。
  2. **Details**：显示选择的widget的属性
  3. **Palette**：可使用的widget列表，包括用户自行创建的widget也将在此处
  4. **Hierarchy**：当前选择的widget的列表
  5. **Animations**：此区域列出了所有的动画，widget对某些属性可以进行动画处理，例如位置和大小
  6. **Timeline**：显示选择动画的动画属性和关键帧
  7. **Editor Mode**：在设计器和图形模式之间进行切换，图形模式与BluePrint的Event Graph几乎相同

2.创建控件

1.创建文本控件

Palette —> Text：文本控件非常适合显示数字信息，如计时器和计数器

  • 在Details的顶部文本框内进行重命名操作
  • 在Details的Anchors对文本控件进行移动缩放操作
  • 在Details的Appearance-Font对文本控件字体和字号进行更改

  • 虚幻引擎不会渲染任何超出界限的部分控件

    2.创建图形控件

  • Palette—>Image:创建图形控件

  • Appearance—Brush—Image更改图形形状

image.png

  • Appearance—Slot(Canvas Panel Slot)-Size To Content将自动调整控件大小以适应其内容

image.png
在不同尺寸的屏幕上玩游戏时，UI需要相应的移动其控件。若要维护UI的布局，可以使用**Anchors/锚点**

3.锚点

Anchor定义了控件的位置，设置控件的位置时，其本质上就是在设置其相对于该锚点的位置

  • 使用一个锚点时，可以确保UI在不同大小的屏幕上具有相同的布局
  • 使用两个及以上的锚点时，可以自动调整控件的大小以保证其相对大小

**Anchor Medallion**表示锚点的位置，每当其选择控件时，锚点奖章就会自动显示

  • 更改锚点奖章位置，对应控件的位置就将更新为相对于锚点奖章位置

04-虚幻引擎4：UI教程 - 图5

  • 对此选项进行操作，将更改**WBP_HUD**的大小以匹配该选项，
  • image.png

4.显示HUD

在游戏开始时，HUD应当立即可见，因此可以使用Event BeginPlay来执行此操作。

  • 找到Event BeginPlay节点，在其节点链末尾添加**Create Widget**来创建指定控件的实例
  • image.png
  • 为Construct NONE的Class指定WBP_HUD。
  • 要显示HUD，需要使用**Add to Viewport**节点，将**Create Widget**的返回值与输出引脚与**Add to Viewport**完成链接。

    回顾总结

    image.png
  1. 一旦虚幻引擎调用BP_GameManager，Restart和Set up Camera功能将开始执行。这些函数设置了一些变量和相机。
  2. Create Widget节点创建WBP_HUD
  3. Add to Viewport节点将WBP_HUD显示出来

    5.存储引用

    要显示计数器和计时器的值，需要保存该信息的变量(TimeRemaining、ShapesCollected)。这些变量位于BP_GameManager，要使用这些变量，需要使用从WBP_HUD访问BP_GameManager的方法。而通过对变量中存储对BP_GameManager的引用即可执行此操作。

存储引用的用途：访问特定实例

1.创建变量

  • 在**WBP_HUD**—**Graph**—**My Blueprint**创建名为**GameManager**的变量
  • 在**Details**—**Variable Type**中将**Create Widget**的Class设置为**BP_Game Manager**并选择**Object Reference**引用关系。
  • **Object Reference**：引用其资源，其引用的类会被自动实例化加载到内存中

  • image.png

    2.设置引用

  • **Create Widget**的**class**选择为**WBP_HUD**时，即：创建**WBP_HUD**时执行

image.png

  • 创建**Self**节点，并将其连接到**SET Game Manager**，**Self**节点将获取对**BP_GameManager**的引用。

  • 现在创建**WBP_HUB**时，它将对**BP_GameManager**进行引用。

    6.功能

    在蓝图中，函数是类似于事件图表的图形，与事件图表不同的是，函数可以被节点调用。
    使用函数的原因：

    • 组织：通过使用函数，可以将多个节点折叠为单个节点。
    • 复用性：使用函数，可以省去每次重置节点时必须创建变量的工作，提高效率。

      1.更新控件

      在默认情况下，无法从蓝图访问Text控件，这意味着无法设置其Text属性。
      解决办法：在**WBP_HUD**中，使用**Designer**模式，选择**CounterText**，勾选**is Variable**复选框
      image.png对其进行更改。使**CounterText**的属性可以进行更新。
      下一步：创建一个可以使文本更新的函数

      2.创建计数器更新函数

  • 切换到Graph模式，在My Blueprint界面，通过Functions创建一个新的函数并将其命名为UpdateCounterText。

  • 默认情况下，图形将包含一个输入节点。当函数开始时从输入节点开始image.png
  • 创建**Get Shapes Collected**节点来获取ShapesCollected变量，并将其与GameManager变量进行连接。
  • 创建**SetText(Text)**节点来设置文本，并将其与Counter Text进行连接
  • 由于SetText(Text)节点仅接受文本类型的输入，但ShapesCollected变量的数据类型为Integer，不过将整数类型作为文本类型输入时，虚幻引擎自动创建**ToText(int)**将其进行转换。
  • 将输入节点连接到SetText(Text)节点完成更新函数的创建。
  • image.png

事件顺序：

  1. 当Update Counter Text被调用时，该函数将从BP_GameManager获取Shapes Collected变量
  2. ToText(int)节点将Shapes Collected变量转换成Text类型
  3. SetText(Text)节点 把Counter Text的文本设置为ToText(int)的值。
  4. 每当玩家收集形状时调用UpdateCounterText函数

    3.调用计数器更新函数

  • 在游戏递增ShapesCollected后调用UpdateCounterText函数
  • 创建IncrementShapesCollected函数，使其递增计数器。每当形状与播放器重叠时，调用此函数。
  • 在调用UpdateCounterText之前，需要对WBP_HUD进行引用
  • BP_GameManager中添加WBP_HUD中设定的Text Widget和Image
  • WBP_HUD对BP_GameManger有一个访问以引用其TimeRemaining和ShapesCollected进行引用

  • 在调用UpdateCounterText之前，需要一个对WBP_HUD的引用

    image.png

    • 该操作将WBP_HUD类的返回值(常量)升级为变量，将其重命名为HUDWidget
    • HUDWidget的作用是为了引用MBP_HUD中的SetText(Text)函数

  • image.png

  • 添加**UpdateCounterText**节点，使**CounterText**在游戏开始时显示**ShapesCollected**的值
  • 在IncrementShapesCollected函数界面对Update Counter Text函数进行扩充，使其具备递增ShapesCollected的功能。而Update Counter Text会将CounterText更新为ShapesCollected的值。

7.绑定

  • 使用绑定可以自动更新某些控件的属性。若要进行绑定操，则该属性必须具有Bind下拉列表
  • image.png
  • 可以将属性绑定到控件中包含的函数和变量。Bind将不断从函数或变量中获取值，然后它会将绑定属性设置为该值。

  • 绑定的缺点：绑定效率低下，因为它不断更新。

    1.创建绑定

  • 在WBP_HUB—Designer—Details—Content中可以看到，**Text**属性是可以进行绑定操作的

  • image.png
  • **Create Binding**会创建一个新的函数，并打开图形界面。将新创建的函数重命名为**UpdateTimerText**
  • **Return Node**函数具有一个**Return**节点，其返回值引脚类型为**Text**，**TimeText**将显示插入此引脚的任何文本。
  • 从GameManager节点中，获取TimeRemaining变量并将其与Return Node的Return Value相连，虚幻引擎将自动添加一个转换节点。

    2.总结

  1. 绑定将不断调用UpdateTimerText函数(实质是绑定自动创建的函数)
  2. UpdateTimerText函数将从BP_GameManager中获取TimeRemaining变量
  3. ToText(Float)节点将值从TimeRemaining转换为Text类型
  4. 将转换后的值输出到Return Node