阿赵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

相关文章

Python 基于http.server模块实现简单http服务的代码举例

《Python基于http.server模块实现简单http服务的代码举例》Pythonhttp.server模块通过继承BaseHTTPRequestHandler处理HTTP请求,使用Threa... 目录测试环境代码实现相关介绍模块简介类及相关函数简介参考链接测试环境win11专业版python

Java中HashMap的用法详细介绍

《Java中HashMap的用法详细介绍》JavaHashMap是一种高效的数据结构,用于存储键值对,它是基于哈希表实现的,提供快速的插入、删除和查找操作,:本文主要介绍Java中HashMap... 目录一.HashMap1.基本概念2.底层数据结构:3.HashCode和equals方法为什么重写Has

Unity新手入门学习殿堂级知识详细讲解(图文)

《Unity新手入门学习殿堂级知识详细讲解(图文)》Unity是一款跨平台游戏引擎,支持2D/3D及VR/AR开发,核心功能模块包括图形、音频、物理等,通过可视化编辑器与脚本扩展实现开发,项目结构含A... 目录入门概述什么是 UnityUnity引擎基础认知编辑器核心操作Unity 编辑器项目模式分类工程

Springboot项目构建时各种依赖详细介绍与依赖关系说明详解

《Springboot项目构建时各种依赖详细介绍与依赖关系说明详解》SpringBoot通过spring-boot-dependencies统一依赖版本管理,spring-boot-starter-w... 目录一、spring-boot-dependencies1.简介2. 内容概览3.核心内容结构4.

python连接sqlite3简单用法完整例子

《python连接sqlite3简单用法完整例子》SQLite3是一个内置的Python模块,可以通过Python的标准库轻松地使用,无需进行额外安装和配置,:本文主要介绍python连接sqli... 目录1. 连接到数据库2. 创建游标对象3. 创建表4. 插入数据5. 查询数据6. 更新数据7. 删除

Jenkins的安装与简单配置过程

《Jenkins的安装与简单配置过程》本文简述Jenkins在CentOS7.3上安装流程,包括Java环境配置、RPM包安装、修改JENKINS_HOME路径及权限、启动服务、插件安装与系统管理设置... 目录www.chinasem.cnJenkins安装访问并配置JenkinsJenkins配置邮件通知

Python学习笔记之getattr和hasattr用法示例详解

《Python学习笔记之getattr和hasattr用法示例详解》在Python中,hasattr()、getattr()和setattr()是一组内置函数,用于对对象的属性进行操作和查询,这篇文章... 目录1.getattr用法详解1.1 基本作用1.2 示例1.3 原理2.hasattr用法详解2.

setsid 命令工作原理和使用案例介绍

《setsid命令工作原理和使用案例介绍》setsid命令在Linux中创建独立会话,使进程脱离终端运行,适用于守护进程和后台任务,通过重定向输出和确保权限,可有效管理长时间运行的进程,本文给大家介... 目录setsid 命令介绍和使用案例基本介绍基本语法主要特点命令参数使用案例1. 在后台运行命令2.

Python yield与yield from的简单使用方式

《Pythonyield与yieldfrom的简单使用方式》生成器通过yield定义,可在处理I/O时暂停执行并返回部分结果,待其他任务完成后继续,yieldfrom用于将一个生成器的值传递给另一... 目录python yield与yield from的使用代码结构总结Python yield与yield

MySQL常用字符串函数示例和场景介绍

《MySQL常用字符串函数示例和场景介绍》MySQL提供了丰富的字符串函数帮助我们高效地对字符串进行处理、转换和分析,本文我将全面且深入地介绍MySQL常用的字符串函数,并结合具体示例和场景,帮你熟练... 目录一、字符串函数概述1.1 字符串函数的作用1.2 字符串函数分类二、字符串长度与统计函数2.1