前言
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的基础篇介绍就到这里,希望对你有所帮助