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

相关推荐
躺下睡觉~4 小时前
Unity-Transform类-父子关系
java·unity·游戏引擎
躺下睡觉~4 小时前
Unity-Transform类-缩放和看向
unity·游戏引擎
君莫愁。6 小时前
【Unity】检测鼠标点击位置是否有2D对象
unity·c#·游戏引擎
咩咩觉主7 小时前
Unity实战案例全解析:PVZ 植物卡片状态分析
unity·c#·游戏引擎
蓝裕安10 小时前
伪工厂模式制造敌人
开发语言·unity·游戏引擎
谢泽浩14 小时前
Unity 给模型贴上照片
unity·游戏引擎
z2014z14 小时前
Unity Resource System 优化笔记
unity·游戏引擎
王维志14 小时前
Unity 高亮插件HighlightPlus介绍
unity·游戏引擎
zaizai100715 小时前
我的demo保卫萝卜中的技术要点
unity
菌菌巧乐兹17 小时前
Unity 百度AI实现无绿幕拍照抠像功能(详解版)
人工智能·百度·unity