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

相关文章

重新对Java的类加载器的学习方式

《重新对Java的类加载器的学习方式》:本文主要介绍重新对Java的类加载器的学习方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、介绍1.1、简介1.2、符号引用和直接引用1、符号引用2、直接引用3、符号转直接的过程2、加载流程3、类加载的分类3.1、显示

Java中 instanceof 的用法详细介绍

《Java中instanceof的用法详细介绍》在Java中,instanceof是一个二元运算符(类型比较操作符),用于检查一个对象是否是某个特定类、接口的实例,或者是否是其子类的实例,这篇文章... 目录引言基本语法基本作用1. 检查对象是否是指定类的实例2. 检查对象是否是子类的实例3. 检查对象是否

什么是ReFS 文件系统? ntfs和refs的优缺点区别介绍

《什么是ReFS文件系统?ntfs和refs的优缺点区别介绍》最近有用户在Win11Insider的安装界面中发现,可以使用ReFS来格式化硬盘,这是不是意味着,ReFS有望在未来成为W... 数十年以来,Windows 系统一直将 NTFS 作为「内置硬盘」的默认文件系统。不过近些年来,微软还在研发一款名

C#使用StackExchange.Redis实现分布式锁的两种方式介绍

《C#使用StackExchange.Redis实现分布式锁的两种方式介绍》分布式锁在集群的架构中发挥着重要的作用,:本文主要介绍C#使用StackExchange.Redis实现分布式锁的... 目录自定义分布式锁获取锁释放锁自动续期StackExchange.Redis分布式锁获取锁释放锁自动续期分布式

Java学习手册之Filter和Listener使用方法

《Java学习手册之Filter和Listener使用方法》:本文主要介绍Java学习手册之Filter和Listener使用方法的相关资料,Filter是一种拦截器,可以在请求到达Servl... 目录一、Filter(过滤器)1. Filter 的工作原理2. Filter 的配置与使用二、Listen

redis过期key的删除策略介绍

《redis过期key的删除策略介绍》:本文主要介绍redis过期key的删除策略,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录第一种策略:被动删除第二种策略:定期删除第三种策略:强制删除关于big key的清理UNLINK命令FLUSHALL/FLUSHDB命

Pytest多环境切换的常见方法介绍

《Pytest多环境切换的常见方法介绍》Pytest作为自动化测试的主力框架,如何实现本地、测试、预发、生产环境的灵活切换,本文总结了通过pytest框架实现自由环境切换的几种方法,大家可以根据需要进... 目录1.pytest-base-url2.hooks函数3.yml和fixture结论你是否也遇到过

利用Python快速搭建Markdown笔记发布系统

《利用Python快速搭建Markdown笔记发布系统》这篇文章主要为大家详细介绍了使用Python生态的成熟工具,在30分钟内搭建一个支持Markdown渲染、分类标签、全文搜索的私有化知识发布系统... 目录引言:为什么要自建知识博客一、技术选型:极简主义开发栈二、系统架构设计三、核心代码实现(分步解析

使用Python开发一个简单的本地图片服务器

《使用Python开发一个简单的本地图片服务器》本文介绍了如何结合wxPython构建的图形用户界面GUI和Python内建的Web服务器功能,在本地网络中搭建一个私人的,即开即用的网页相册,文中的示... 目录项目目标核心技术栈代码深度解析完整代码工作流程主要功能与优势潜在改进与思考运行结果总结你是否曾经

Mysql表的简单操作(基本技能)

《Mysql表的简单操作(基本技能)》在数据库中,表的操作主要包括表的创建、查看、修改、删除等,了解如何操作这些表是数据库管理和开发的基本技能,本文给大家介绍Mysql表的简单操作,感兴趣的朋友一起看... 目录3.1 创建表 3.2 查看表结构3.3 修改表3.4 实践案例:修改表在数据库中,表的操作主要