Unity转Unreal5从入门到精通之UMG的使用

前言

UMG (Unreal Motion Graphics UI Designer)是Unreal种的可视化 UI 工具。它就类似于Unity中的UGUI,可用于为用户创建游戏内 HUD、菜单和其他与界面相关的图形。 UMG 的核心是UI控件。它可用于创建UI界面（按钮、复选框、滑块、进度条等）。

快速入门

我们今天通过一个实战来讲解UMG的使用，我们来做一个游戏的血条，能量条和弹夹的实时更新的Demo，我们就基于官方FirstPlayer第一人称射击游戏的demo来做即可，这样我们就可以只关注UMG相关的逻辑。

UMG的控件可以使用控件蓝图进行编辑，并具有以下两个选项卡进行编辑：
“设计器”选项卡允许您直观地布置界面和基本功能。

“图表”选项卡提供所使用的小部件背后的功能。

新建UI控件蓝图

我们新建一个HUD的控件蓝图

这个UMG的设计器，就类似Unity中的UGUI画布操作是一样的
左侧的控制器菜单栏里面，可以找到画布，按钮，文本，滑动条，还有布局管理器等等

我们先新建一个画布，大小拉到1920x1080
先来做左上角的血条能量条
新建一个水平框，即UGUI中的HorizontalLayout，是一个布局管理器，
然后里面添加两个竖直框，一个放两个文本，一个放两个进度条
分别修改名字为Health和Energy
修改锚点为左上角

然后再屏幕右上角添加一个弹夹数量Ammo的文本框

好了，UMG的设计先保持这样

添加UMG到屏幕上

我们刚才创建好的UI，如何添加到运行时屏幕上呢？
在Unity中，我们可以直接添加到场景中，当然也可以运行时动态克隆出来。
在Unreal中，我们的UMG只能运行时动态创建出来。那么接下来我们来看下如何创建UMG到屏幕上。

1.打开BP_FirstPersonPlayerController，它是我们的第一人称控制器，是一个控制玩家运动的蓝图。
2.我们在原有逻辑的基础上，从EventBeginPlay后面添加新逻辑
添加节点CreateWidget，Class选择我们新创建的HUD
3.然后使用Promoted Variable，把画布提升为变量，方便后面Player和HUD的交互
4.使用Add to ViewPort，把HUD添加到屏幕上
现在运行，我们就能看到屏幕上出现了我们新建的HUD的UI界面

HP,MP更新

我们找到BP_FirstPersonCharacter蓝图，他是我们的第一人称的实体类，我们需要给我们的角色添加Health，Energy，Ammo之类的属性

在事件图表中的变量中添加我们需要的属性

然后在蓝图的图表中，添加Health和Energy的变量逻辑
我们假设跳跃需要能量，那么每跳一次，就让Energy的值减0.25

然后是Health血量的逻辑，因为我们没有被攻击的路基，那么我们就使用按键来模拟，比如我们按下键盘的F键，然后扣血0.25

好了，完成后，蓝图如下所示：

Ammo更新

打开武器蓝图BP_Weapon_Component。它是控制我们的枪射击的蓝图
打开后，我们在事件图标中找到EnhanceinputAction IA_Shoot节点，它是接受我们的射击事件的，即点击鼠标左键。
我们在点击射击后，添加一个if判断，即Character的Ammo数量是不是>0，是的话才能射击，如下所示：

在节点的最后，即射击完毕后，发射完小球，对Character的Ammo减1，代表弹夹数量减一

UMG中添加Charater引用

为了方便在UMG中实时获取玩家的Health值和Energy的值，我们需要在UMG的蓝图中，设置Character的引用。

注意：
这里GetPlayer Character节点，是获取场景中第一个PlayerCharacter即玩家实体

不要选错了GetPlayerController，因为这俩拼写有点相似。

但是我们这里可能会好奇，这俩有什么不一样？
包括蓝图也有两个，分别是
BP_FirstPersonCharacter和BP_FistPersonPlayerController
这俩是由区别的如下：
Character
Character是继承自Pawn，并拥有了四处走动的功能。就是一个人形生物
我们可以使用Character来制作，第一人称人，第三人称人，野怪，巡逻兵等
PlayerController
PlayerController是一个Controller，是一个玩家控制器，控制人物运动的。
还有AIController是AI控制的运动类，PlayerController是玩家手动控制的运动类

属性绑定

一些都准备就绪了，接下来我们对UMG中的属性进行绑定
点击HPProgress，在进度百分比中，点击绑定，选择MyCharacter中的Health

点击MPProgress，在进度百分比中，点击绑定，选择MyCharacter中的Energy

点击AmmoText，选择绑定，添加自定义绑定，这是会闯将一个控件蓝图，即AmmoText控件的一个事件绑定，我们可以在里面添加Text文本框的更新事件。
GetAmmoText就是绑定的事件函数
ReturnNode就是返回值，返回子弹数量/弹夹总数，如15/25

我们现在要做的就是在这个函数体内，获取玩家的Ammo数量和MaxAmmo数量，然后把他们拼接成 15/25的形式。
由于我们已经有MyCharacter的引用，所以很容易拿到Ammo和MaxAmmo，接下来只要拼接就可以了。
如下所示：

好了，接下来我们 运行来看下效果
我们可以看到，当发射子弹是，Ammo的弹夹数量显示发生了变化
当跳跃的时候，Energy能量发生了变化
当点击F按键的时候，Health血条也发生了变化

好了，这个UMG的基础篇介绍就到这里，希望对你有所帮助