在一些游戏中,除了游戏人物及地图外。还会有一些固定在屏幕上的元素,比如血条/地图/背包/进度条等这些界面元素。那么,这些界面元素是怎么被添加到游戏之中的呢?这些元素是不是还可以被控制改变的呢?

苏南大叔:UE5教程,虚幻5引擎编辑器如何添加UI界面到游戏? - 添加ui界面到游戏
UE5教程,虚幻5引擎编辑器如何添加UI界面到游戏?(图8-1)

大家好,这里是苏南大叔的程序如此灵动博客,这里记录苏南大叔和计算机代码的故事。本文描述虚幻5游戏引擎中,如何添加UI元素。本文测试环境:mac虚幻编辑器@5.0.2

UI元素设计

可以在资源管理器里面,新建一个UI界面(user widget),然后双击继续编辑。

苏南大叔:UE5教程,虚幻5引擎编辑器如何添加UI界面到游戏? - 添加用户界面
UE5教程,虚幻5引擎编辑器如何添加UI界面到游戏?(图8-2)

对比网页前端的话,

  • 使用canvaspanel来作为div
  • 使用text添加文字span
  • 使用image添加图片img

苏南大叔:UE5教程,虚幻5引擎编辑器如何添加UI界面到游戏? - 添加界面控件
UE5教程,虚幻5引擎编辑器如何添加UI界面到游戏?(图8-3)

蓝图添加UI

默认情况下,这个界面是不会被添加到游戏之中的,必须在特定的时机来添加对应的界面UI。

苏南大叔:UE5教程,虚幻5引擎编辑器如何添加UI界面到游戏? - 添加到游戏
UE5教程,虚幻5引擎编辑器如何添加UI界面到游戏?(图8-4)

在本文的例子中,在人物蓝图里面,通过“游戏开始”事件,对其进行了添加。添加的蓝图逻辑如下:这里是create widget来创建控件的,但是修改里面的target后,显示的函数名会发生变化。

苏南大叔:UE5教程,虚幻5引擎编辑器如何添加UI界面到游戏? - 设置文本文字
UE5教程,虚幻5引擎编辑器如何添加UI界面到游戏?(图8-5)

这里在上述界面蓝图内部,做了一个自定义事件,用于外部触发。在这个事件中,对相关控件进行了修改(先修改文字,再修改是否隐藏)。这里需要说明的是:

  • 如果有无法解释的异常,记得先在左上角执行编译。
  • 控件必须先设置为“是变量”,才能在蓝图中使用。

苏南大叔:UE5教程,虚幻5引擎编辑器如何添加UI界面到游戏? - 设为变量
UE5教程,虚幻5引擎编辑器如何添加UI界面到游戏?(图8-6)

添加完效果图,是这样的:

苏南大叔:UE5教程,虚幻5引擎编辑器如何添加UI界面到游戏? - 最终效果图
UE5教程,虚幻5引擎编辑器如何添加UI界面到游戏?(图8-7)

蓝图隐藏UI

有添加就有删除,当然本文中是隐藏。调用的函数是set visibility。如下图所示:

苏南大叔:UE5教程,虚幻5引擎编辑器如何添加UI界面到游戏? - 隐藏ui
UE5教程,虚幻5引擎编辑器如何添加UI界面到游戏?(图8-8)

相关链接

综述

本文就界面UI控件的添加及隐藏方法,做了简要的探讨。更多虚幻5引擎的相关经验文章,请点击下面的链接:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。