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

相关推荐
浅陌sss13 小时前
Unity中可靠的UDP实现
unity
虾球xz15 小时前
游戏引擎学习第107天
学习·游戏引擎
虾球xz15 小时前
游戏引擎学习第105天
前端·学习·游戏引擎
快下雨了L15 小时前
UE5TSubclassOf模板,定时器的使用,SpawnActor函数的使用,SetStaticMesh函数的使用
ue5
Zhichao_9716 小时前
【UE5 C++课程系列笔记】30——自动拷贝DLL及其他资源
c++·ue5
奔跑的犀牛先生18 小时前
unity学习46:反向动力学IK
unity
幻世界20 小时前
【工具插件类教学】实现运行时2D物体交互的利器Runtime2DTransformInteractor
unity·交互·运行时2d物体交互
虾球xz1 天前
游戏引擎学习第104天
学习·游戏引擎
音视频牛哥2 天前
Unity实现高性能多实例RTSP|RTMP播放器技术实践
unity·游戏引擎·音视频·实时音视频·大牛直播sdk·rtsp播放器·rtsp player
Bluesonli2 天前
第 16 天:游戏 UI(UMG)开发,打造主菜单 & 血条!
学习·游戏·ui·ue5·虚幻·unreal engine