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

相关文章

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

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

springboot简单集成Security配置的教程

《springboot简单集成Security配置的教程》:本文主要介绍springboot简单集成Security配置的教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录集成Security安全框架引入依赖编写配置类WebSecurityConfig(自定义资源权限规则

MySQL中慢SQL优化的不同方式介绍

《MySQL中慢SQL优化的不同方式介绍》慢SQL的优化,主要从两个方面考虑,SQL语句本身的优化,以及数据库设计的优化,下面小编就来给大家介绍一下有哪些方式可以优化慢SQL吧... 目录避免不必要的列分页优化索引优化JOIN 的优化排序优化UNION 优化慢 SQL 的优化,主要从两个方面考虑,SQL 语

如何使用Python实现一个简单的window任务管理器

《如何使用Python实现一个简单的window任务管理器》这篇文章主要为大家详细介绍了如何使用Python实现一个简单的window任务管理器,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起... 任务管理器效果图完整代码import tkinter as tkfrom tkinter i

C++中函数模板与类模板的简单使用及区别介绍

《C++中函数模板与类模板的简单使用及区别介绍》这篇文章介绍了C++中的模板机制,包括函数模板和类模板的概念、语法和实际应用,函数模板通过类型参数实现泛型操作,而类模板允许创建可处理多种数据类型的类,... 目录一、函数模板定义语法真实示例二、类模板三、关键区别四、注意事项 ‌在C++中,模板是实现泛型编程

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构:try: with sync_playwright(

Java使用多线程处理未知任务数的方案介绍

《Java使用多线程处理未知任务数的方案介绍》这篇文章主要为大家详细介绍了Java如何使用多线程实现处理未知任务数,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 知道任务个数,你可以定义好线程数规则,生成线程数去跑代码说明:1.虚拟线程池:使用 Executors.newVir

使用EasyExcel实现简单的Excel表格解析操作

《使用EasyExcel实现简单的Excel表格解析操作》:本文主要介绍如何使用EasyExcel完成简单的表格解析操作,同时实现了大量数据情况下数据的分次批量入库,并记录每条数据入库的状态,感兴... 目录前言固定模板及表数据格式的解析实现Excel模板内容对应的实体类实现AnalysisEventLis

Java进阶学习之如何开启远程调式

《Java进阶学习之如何开启远程调式》Java开发中的远程调试是一项至关重要的技能,特别是在处理生产环境的问题或者协作开发时,:本文主要介绍Java进阶学习之如何开启远程调式的相关资料,需要的朋友... 目录概述Java远程调试的开启与底层原理开启Java远程调试底层原理JVM参数总结&nbsMbKKXJx

JAVA SE包装类和泛型详细介绍及说明方法

《JAVASE包装类和泛型详细介绍及说明方法》:本文主要介绍JAVASE包装类和泛型的相关资料,包括基本数据类型与包装类的对应关系,以及装箱和拆箱的概念,并重点讲解了自动装箱和自动拆箱的机制,文... 目录1. 包装类1.1 基本数据类型和对应的包装类1.2 装箱和拆箱1.3 自动装箱和自动拆箱2. 泛型2