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

相关推荐
牙膏上的小苏打233314 小时前
Unity Surround开关后导致获取主显示器分辨率错误
unity·主屏幕
Unity大海16 小时前
诠视科技Unity SDK开发环境配置、项目设置、apk打包。
科技·unity·游戏引擎
Dawn·张19 小时前
UE小:在Unreal Engine 5中实现多层静态网格体遮挡拾取
ue5
浅陌sss1 天前
Unity中 粒子系统使用整理(一)
unity·游戏引擎
维度攻城狮1 天前
实现在Unity3D中仿真汽车,而且还能使用ros2控制
python·unity·docker·汽车·ros2·rviz2
为你写首诗ge1 天前
【Unity网络编程知识】FTP学习
网络·unity
神码编程1 天前
【Unity】 HTFramework框架(六十四)SaveDataRuntime运行时保存组件参数、预制体
unity·编辑器·游戏引擎
菲fay1 天前
Unity 单例模式写法
unity·单例模式
火一线1 天前
【Framework-Client系列】UIGenerate介绍
游戏·unity
lalapanda1 天前
UE5学习记录 part13
学习·ue5