阿赵UE学习笔记——30、HUD简单介绍

2024-04-24 00:20

本文主要是介绍阿赵UE学习笔记——30、HUD简单介绍,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

阿赵UE学习笔记目录

  大家好,我是阿赵。
  继续学习虚幻引擎,这次来学习一下HUD的基础使用。

一、 什么是HUD

  HUD(Head-Up Display),也就是俗称的抬头显示。很多其他领域里面有用到这个术语,比如开车的朋友可能会接触过,车载HUD,就是把仪表盘数据和地图导航投影到汽车的前挡风玻璃,让司机可以不用低头看仪表盘,就能正常的看到当前的驾驶数据。
  UE里面的HUD,实际上并不是一个什么设备,就是一个UI系统,和Unity引擎的UGUI之类的类似,是一个可以可视化编辑的UI系统。

二、 创建HUD

  为了创建HUD,可以先建一个文件夹,用于专门存放HUD文件,然后在内容浏览器找到这个文件夹,鼠标右键——用户界面——控件蓝图:
在这里插入图片描述

  这样就创建出一个HUD的UIWidget文件了,给他命名一下,我这里命名为HUD1。需要注意的是,由于UE所有的对象其实都是蓝图,而蓝图的名称就相当于代码里面的类名,所以我们给这些UIWidget文件命名的时候要注意别起得很随意,因为后面是通过这个类名来加载UI控件的。
在这里插入图片描述

  创建完之后,双击打开HUD的编辑器,是这个样子的:
在这里插入图片描述

  留意右上角,分别有”设计器”和”图表”这两个页签。设计器是用于可视化编辑UI组件的,图表是用于编辑蓝图逻辑的。
在这里插入图片描述

三、 设置屏幕分辨率和画布

1、屏幕分辨率

  用过Unity引擎的朋友会比较熟悉,我们在设计UI的时候,是需要先定一个标准分辨率的,比如比较场景的1920x1080之类,或者是直接拿某个设备的分辨率作为参考。
  UE的HUD里面也是需要这样做的:
在这里插入图片描述

  在屏幕尺寸里面,可以选择一些手机或者其他设备的分辨率作为参考。设置了之后,在设计区域的左下角,会显示当前的分辨率:
在这里插入图片描述

  我们也可以手动的去设置这个分辨率,找到设计区域右下角的这个小滑块,可以拖动:
在这里插入图片描述

  拖动的时候,设计区域会出现各种分辨率的提示,可以根据需要拖动到合适的分辨率作为参考。
在这里插入图片描述

2、 画布

  又要和Unity引擎作对比了,UGUI在制作的时候,是需要先创建一个Canvas画布的,所有的UI元素都是在Canvas上面添加。
  UE引擎也是同样的道理,在HUD的根节点上面,我们需要先添加一个Canvas画布:
在这里插入图片描述

  添加完画布之后,准备工作就完成了,可以准备开始放UI组件了。

四、 创建文本块

  打开左边的工具栏,找到通用页签。这里面会有一些比较常用的UI组件。
在这里插入图片描述

  这里为了简单测试,先创建一个文本块,方法是直接把文本框拖动到画布上:
在这里插入图片描述

  在画布上面创建了文本块后,文本块默认是选中状态,这时候留意看右边的细节面板,会发现有对应这个文本块的很多参数。如果用过UGUI的朋友,估计会觉得大同小异。
在这里插入图片描述

  首先要注意的是锚点,也就是这个文本块相对于父级的对齐方式。
在这里插入图片描述

  然后,如果我们需要用蓝图动态修改文本块的内容,那么这里需要给文本块起一个规范的名称,并且勾上“是变量”。这样,文本块就会变成一个可以动态设置值的变量。下面的“文本”,是文本块实际显示的字符串内容,我们可以试试改变它:
在这里插入图片描述

在这里插入图片描述

  想要后面用蓝图控制这个字符串的内容设置值,我们需要进行绑定:
在这里插入图片描述

  在创建绑定之后,会进入到蓝图节点界面,把Return Value拖出来,然后提升为变量:
在这里插入图片描述

  然后为这个变量设置一个变量名
在这里插入图片描述

  这样,以后我们通过蓝图设置这个变量的值,文本块的内容也会相应的变化。

五、 创建按钮

  接下来创建一个按钮,方法同样是把按钮直接拖动到画布上:
在这里插入图片描述

  需要注意的是,如果是Unity的UGUI里面的按钮,它会默认在里面创建了一个Text文本组件,但UE的按钮,它原始是没有Text的,只有一个底纹框。所以如果我们想在按钮上面有文字显示,我们还要手动的再拖一个文本块到按钮里面:
在这里插入图片描述

  由于我想让这个按钮触发功能,所以同样的,给它起一个标准的名称,然后勾上“是变量”:
在这里插入图片描述

  当勾选上“是变量”之后,在细节栏下面会多出了一个叫做“事件”的折叠栏,里面是这个按钮各种不同情况下的触发事件:
在这里插入图片描述

  在“点击时”事件后面点加号,会进入到蓝图节点编辑,这时候,找到上面已经绑定了变量的那个文本块,拖动出来,选择设置值:
在这里插入图片描述

  把On Clicked连到Set节点,然后在下面的设置变量值里面输入一点内容:
在这里插入图片描述

  这样,一个按钮点击后给文本框设置文本显示的功能就做完了。

六、 把HUD加入到场景

  为了测试这个功能,我新建了一个关卡场景:
在这里插入图片描述

  打开这个关卡,然后选择打开关卡蓝图:
在这里插入图片描述

  进入到蓝图编辑界面,找到Event BeginPlay节点。这个节点是在关卡开始运行的时候会调用,有点类似于Unity引擎MonoBehaviour生命周期里面的Start。
  在BeginPlay后面,创建一个Sequence序列节点,然后连上:
在这里插入图片描述

  实际上如果只是为了把HUD添加到场景,我们是不需要添加序列节点的。但由于一个关卡里面,除了需要在BeginPlay时添加HUD,一般还会有其他的初始化操作,所以添加一个序列节点,可以在BeginPlay的时候按顺序执行多种逻辑,而添加HUD只是其中一种。
  接下来创建一个CreateWidget的节点:
在这里插入图片描述

  然后在Class里面找到刚才创建的HUD1:
在这里插入图片描述

  然后再添加一个Add To Viewport的节点:
在这里插入图片描述

  把它们都连上:
在这里插入图片描述

  保存、编译后,运行关卡,会看到刚才的UI出现了,然后点击按钮,会看到文本块的内容变成了刚才我设置的“我被点击了”
在这里插入图片描述

这篇关于阿赵UE学习笔记——30、HUD简单介绍的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/930276

相关文章

四种Flutter子页面向父组件传递数据的方法介绍

《四种Flutter子页面向父组件传递数据的方法介绍》在Flutter中,如果父组件需要调用子组件的方法,可以通过常用的四种方式实现,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录方法 1:使用 GlobalKey 和 State 调用子组件方法方法 2:通过回调函数(Callb

Python进阶之Excel基本操作介绍

《Python进阶之Excel基本操作介绍》在现实中,很多工作都需要与数据打交道,Excel作为常用的数据处理工具,一直备受人们的青睐,本文主要为大家介绍了一些Python中Excel的基本操作,希望... 目录概述写入使用 xlwt使用 XlsxWriter读取修改概述在现实中,很多工作都需要与数据打交

利用Python编写一个简单的聊天机器人

《利用Python编写一个简单的聊天机器人》这篇文章主要为大家详细介绍了如何利用Python编写一个简单的聊天机器人,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 使用 python 编写一个简单的聊天机器人可以从最基础的逻辑开始,然后逐步加入更复杂的功能。这里我们将先实现一个简单的

java脚本使用不同版本jdk的说明介绍

《java脚本使用不同版本jdk的说明介绍》本文介绍了在Java中执行JavaScript脚本的几种方式,包括使用ScriptEngine、Nashorn和GraalVM,ScriptEngine适用... 目录Java脚本使用不同版本jdk的说明1.使用ScriptEngine执行javascript2.

mysql-8.0.30压缩包版安装和配置MySQL环境过程

《mysql-8.0.30压缩包版安装和配置MySQL环境过程》该文章介绍了如何在Windows系统中下载、安装和配置MySQL数据库,包括下载地址、解压文件、创建和配置my.ini文件、设置环境变量... 目录压缩包安装配置下载配置环境变量下载和初始化总结压缩包安装配置下载下载地址:https://d

Python实现NLP的完整流程介绍

《Python实现NLP的完整流程介绍》这篇文章主要为大家详细介绍了Python实现NLP的完整流程,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. 编程安装和导入必要的库2. 文本数据准备3. 文本预处理3.1 小写化3.2 分词(Tokenizatio

使用IntelliJ IDEA创建简单的Java Web项目完整步骤

《使用IntelliJIDEA创建简单的JavaWeb项目完整步骤》:本文主要介绍如何使用IntelliJIDEA创建一个简单的JavaWeb项目,实现登录、注册和查看用户列表功能,使用Se... 目录前置准备项目功能实现步骤1. 创建项目2. 配置 Tomcat3. 项目文件结构4. 创建数据库和表5.

使用PyQt5编写一个简单的取色器

《使用PyQt5编写一个简单的取色器》:本文主要介绍PyQt5搭建的一个取色器,一共写了两款应用,一款使用快捷键捕获鼠标附近图像的RGB和16进制颜色编码,一款跟随鼠标刷新图像的RGB和16... 目录取色器1取色器2PyQt5搭建的一个取色器,一共写了两款应用,一款使用快捷键捕获鼠标附近图像的RGB和16

四种简单方法 轻松进入电脑主板 BIOS 或 UEFI 固件设置

《四种简单方法轻松进入电脑主板BIOS或UEFI固件设置》设置BIOS/UEFI是计算机维护和管理中的一项重要任务,它允许用户配置计算机的启动选项、硬件设置和其他关键参数,该怎么进入呢?下面... 随着计算机技术的发展,大多数主流 PC 和笔记本已经从传统 BIOS 转向了 UEFI 固件。很多时候,我们也

基于Qt开发一个简单的OFD阅读器

《基于Qt开发一个简单的OFD阅读器》这篇文章主要为大家详细介绍了如何使用Qt框架开发一个功能强大且性能优异的OFD阅读器,文中的示例代码讲解详细,有需要的小伙伴可以参考一下... 目录摘要引言一、OFD文件格式解析二、文档结构解析三、页面渲染四、用户交互五、性能优化六、示例代码七、未来发展方向八、结论摘要