10.4 用户界面和HUD在线视频

大家好

欢迎来到虚幻引擎技术基础课堂

我是主讲教师

黄颖翠

现在我们将针对

虚幻引擎技术基础课程中

蓝图应用章节的

用户界面和HUD功能

进行讲解

游戏界面主要是

用于将信息传达给玩家

并提供了用于提示用户直接输入的方法

我们这节课的学习目标是

通过UI显示玩家的相关信息

我们分两个部分

第一

设计与分析需要显示的玩家信息

第二

实现蓝图控制主角个人信息

与UI实时绑定显示

我们先了解两个专业词语

游戏界面通常包含两个主要元素

头显（HUD）

和用户界面（UI）

HUD指的是

游戏期间在屏幕上

覆盖的状态和信息

HUD的目的是

告知玩家当前游戏状态

即分数

生命值

游戏剩余时间等

HUD通常是不可互动的

意味着玩家不能单击HUD的元素

用户界面指的是

菜单和其他互动元素

这些元素通常是

在屏幕上覆盖绘制的

就像HUD一样

但在某些情况下

它们会成为游戏世界本身的一部分

在场景中的一个表面上渲染出来

最明显的UI示例是

游戏启动时显示的主菜单

或玩家暂停游戏时

显示的暂停菜单

但是

游戏期间可能会显示其他UI

这些可以用于显示游戏中

不同角色之间的对话

让玩家可以选择武器

盔甲等等

我们现在设计下

需要显示的玩家信息

左边的图是展示了

控件的布局和所需的控件

右边是显示效果

我们可以看到主要用到了垂直框

水平框

文本框

进度条

他们的主要用途

我在这里给大家介绍一下

垂直框

水平框主要用于对其布局

例如垂直摆放控件

或者水平摆放控件

Text是常用的显示文字的控件

进度条是一般用来

通过图片的截取效果显示数值

是个浮点数0-1之间的一个数

满格图片是1

一般用来显示血条

体力值

进度等

当然作为了这些

还需要绑定到主角开始运行的程序中

才能呈现出来

这个绑定步骤将会在操作练习中

给大家演示

好

现在我们进入操作部分

一般游戏中都会出现血量

子弹数等数值显示

我们现在在

FirstPersonBP文件夹下

创建一个文件夹UI

在里面右击选择用户界面

控件蓝图

修改名字为HUD

我们打开它

来编辑一个界面UI

我们按ppt显示的效果

制作一个UI

我们需要在面板中

找到一个水平框

然后两个垂直框

在垂直框中

分别拉两个文字

和两个进度条

我们把它调整下位置

文本的垂直框位置设置为

x=80

Y=60

这是相对左上角的坐标

文本这里改成Health健康值

用于显示出来

第二个文本这里

也改成Stamina

体力值用于显示出来

我们再把这两个进度条调整下

填充下

上下置顶

左右置顶

设置上面的颜色为红色

设置下面的颜色为蓝色

做完后

没有颜色显示

是因为它们默认值为0

需要设置它们值为1

才能显示颜色

做完后其实还是不能显示在游戏中的

我们需要把它放在主人公面前

所以我们找到主角的蓝图

找到事件开始

运行BeginPlay

这个函数

在它后面添加调用

我们先拉开一点

右击输入createWidget

创建控件

创建什么控件呢

就是我们刚做的HUD

创建还不够

只是创建了

但没有显示在屏幕中

我们在这再加操作

Add to View

添加到视口上面

修改下连接线

这样就可以显示出来了

编译一下

我们看一下

这回UI就有了

我们可以继续画UI

我们可以修改下他们的名字

让这个控件更直观一点

我们再创建一个水平框

里面放一个文本内容

显示为killed

我们把尺寸放大到32

再加一个文本用来显示击杀数量

默认值显示为0

我们拷贝一份

修改下名字

显示弹药Ammo

用来显示子弹数量

我们重新运行下

你会发现现在UI上的数据

和游戏内部数据

并没有构建关系

我们需要把他们关联起来

我们需要给主角创建几个变量值

健康值

体力

当前弹药数

击杀数

健康值和体力是浮点数

弹药和击杀数是整数

我们点开它们的眼睛

相当于public

可被其他蓝图引用的意思

那么UI上如何和那些变量连接起来呢

我们发现当我们拉这个值时

血条长度会改变

这边有一个绑定

可以和那些变量连接起来

创建一个绑定

这个UI需要拿主角的变量

我们再这个图表里面获取

cast first person Character

这个主角这个类

在这个类中

找到Health健康值这个变量

赋值给返回的节点

当然我们还需要获取主人公

这个对象右击查找

get player Character

获取玩家对象

我们是单机游戏

所以这里索引默认是0就可以了

我们点击

设计器

回到原来HUD编辑界面

你可以看到这里已经绑定好关系了

默认值UI显示这里是1

但是运行后是0

灰色的

说明值已经绑定了

因为我们Health健康值之前赋值为0

我们把健康值赋值为1

好

我们再创建一个体力值来绑定

结构和健康值是一样的

只是变量连接不同

创建一个绑定

这个UI需要拿主角的变量

我们再这个图表里面获取

cast first person Character

这个主角这个类

在这个类中

找到体力这个变量

返回给节点

当然

我们还需要获取主人公这个对象

测试一下

灰色值为0

我们修改下玩家变量Stamina为1

再运行

有了满的体力

这两个变量绑定了关系

好了

下一个就是击杀数

这个有一点不同

它是绑定的是一个字符串

不是浮点数

当然区别也不是很大

创建一个绑定

我们再这个图表里

获取主角的类

获取到killed值

我们直接连接过去

它会帮我们自动转换

从整数转换成字符串

我们再获取主人公这个对象

子弹也是一个重复的工作

同样

它也会帮我们把值

从整数转换成字符串

编译一下

但是运行后我们UI还是没有用的

为什么呢？

因为这么变量并没有人改变它

虽然被人改变后会被刷新到UI上

没有敌人会攻击我们

但是我们可以改变子弹数量和击杀数量

我们找到主人公的蓝图

在他发射子弹的时候改变子弹数量

我们在发子弹这边做判断

我们做一个分支判断

先判断当前是否是否还有子弹

判断一下当前子弹数是否大于0

如果为假则不做处理

如果为真则发射子弹

那子弹如何减一呢

应该在分支后

真这里做一个子弹整数减一

然后判定能打子弹后

子弹数减一

然后执行发射子弹行为

我们先确认下子弹数量是否是30

设置好了

运行一下

打光子弹看一下

子弹数没有了就不会再发射子弹

那么击杀数如何加1呢

我们可以在圆柱体的蓝图中

找到摧毁这个地方

在摧毁前对击杀数加一

就这个思路

我们先cast to first person

获取他的killed击杀数

然后加一

这里要赋值玩家游戏对象

最后再把这个圆柱销毁

编译一下

我们再试一下

再次攻击爆炸

击杀数加一

好了

这样就完成了我们这节课目标

在UI上正确显示了数值

本小节的操作讲解已经完成

留给大家一个课后练习

请大家课后自己操作一下

实现一个蓝图逻辑

当子弹被消耗后

按A键可以补充弹药

但是补充值满子弹数是30

好

本节课内容就讲解完毕

感谢大家聆听

再见