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

相关文章

zookeeper端口说明及介绍

《zookeeper端口说明及介绍》:本文主要介绍zookeeper端口说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、zookeeper有三个端口(可以修改)aVNMqvZ二、3个端口的作用三、部署时注意总China编程结一、zookeeper有三个端口(可以

Python中win32包的安装及常见用途介绍

《Python中win32包的安装及常见用途介绍》在Windows环境下,PythonWin32模块通常随Python安装包一起安装,:本文主要介绍Python中win32包的安装及常见用途的相关... 目录前言主要组件安装方法常见用途1. 操作Windows注册表2. 操作Windows服务3. 窗口操作

c++中的set容器介绍及操作大全

《c++中的set容器介绍及操作大全》:本文主要介绍c++中的set容器介绍及操作大全,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录​​一、核心特性​​️ ​​二、基本操作​​​​1. 初始化与赋值​​​​2. 增删查操作​​​​3. 遍历方

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

MybatisPlus service接口功能介绍

《MybatisPlusservice接口功能介绍》:本文主要介绍MybatisPlusservice接口功能介绍,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友... 目录Service接口基本用法进阶用法总结:Lambda方法Service接口基本用法MyBATisP

基于Python实现一个简单的题库与在线考试系统

《基于Python实现一个简单的题库与在线考试系统》在当今信息化教育时代,在线学习与考试系统已成为教育技术领域的重要组成部分,本文就来介绍一下如何使用Python和PyQt5框架开发一个名为白泽题库系... 目录概述功能特点界面展示系统架构设计类结构图Excel题库填写格式模板题库题目填写格式表核心数据结构

Go学习记录之runtime包深入解析

《Go学习记录之runtime包深入解析》Go语言runtime包管理运行时环境,涵盖goroutine调度、内存分配、垃圾回收、类型信息等核心功能,:本文主要介绍Go学习记录之runtime包的... 目录前言:一、runtime包内容学习1、作用:① Goroutine和并发控制:② 垃圾回收:③ 栈和

MySQL复杂SQL之多表联查/子查询详细介绍(最新整理)

《MySQL复杂SQL之多表联查/子查询详细介绍(最新整理)》掌握多表联查(INNERJOIN,LEFTJOIN,RIGHTJOIN,FULLJOIN)和子查询(标量、列、行、表子查询、相关/非相关、... 目录第一部分:多表联查 (JOIN Operations)1. 连接的类型 (JOIN Types)

Android学习总结之Java和kotlin区别超详细分析

《Android学习总结之Java和kotlin区别超详细分析》Java和Kotlin都是用于Android开发的编程语言,它们各自具有独特的特点和优势,:本文主要介绍Android学习总结之Ja... 目录一、空安全机制真题 1:Kotlin 如何解决 Java 的 NullPointerExceptio

java中BigDecimal里面的subtract函数介绍及实现方法

《java中BigDecimal里面的subtract函数介绍及实现方法》在Java中实现减法操作需要根据数据类型选择不同方法,主要分为数值型减法和字符串减法两种场景,本文给大家介绍java中BigD... 目录Java中BigDecimal里面的subtract函数的意思?一、数值型减法(高精度计算)1.