虚幻学习笔记3—UI跟随弹窗

news2024/11/16 9:25:53

一、前言

        本文使用的虚幻引擎5.3.2,继点击场景3D物体的两种处理方式的基础完成对3D物体的点击触发后,我们需要制作一个可以弹窗显示该物体信息的UI面板,同时保证弹窗可以跟随物体。另外还讲了一种UI上的悬浮提示跟随弹窗。

二、实现

2.1、创建一个弹窗UI:创建一个如图2.1.1所示的UI,主要包含一个显示信息的文本和一个处理的

标题

按钮。将按钮的“是变量”勾选上。

2.2、 创建目标物体变量:在图表中创建一个点击场景3D物体的两种处理方式创建的蓝图物体变量,并后勾选其“可编辑实例”,在按钮的点击事件创建一个处理方法,比如销毁物体或者关闭弹窗等。如图2.2.1所示的蓝图

图2.2.1

点击按钮时先判断是否有效,这是一个容错率高的处理方式。文本直接绑定“目标物体”的名字。

图2.2.2

2.3、在点击场景3D物体的两种处理方式的点击物体处理事件中创建弹窗:如图2.3.1所示在创建弹窗后将自身传给目标物体

图2.3.1

通过这种方式将点击的物体传递给弹窗UI,并显示该物体的信息,如图2.3.2所示:此时的弹窗只

图2.3.2

能显示在左上角,“蓝色3”即点击目标物体的名字。点击销毁目标可以将3D物体和UI一起销毁。

2.4、让弹窗显示在3D物体所在的位置:在添加到视口后面增加“设置视口的位置“蓝图,如图2.4.1

图2.4.1

所示:获取玩家控制器中的”Project world to Screen"方法,将此时物体的位置转换成屏幕位置。

但是此时的弹窗只是在点击时出现在物体位置,镜头转动就不会在物体的位置,我们还需要做到跟随物体的运动而动。

2.5、弹窗跟随3D物体:在点击场景3D物体的两种处理方式的自定义蓝图Actor中新建“控件组件”,如图2.5.1所示,将控件类

图2.5.1

设置为“弹窗”,默认的空间为场景,此时在视口或场景中可以看到物体上面都有一个“弹窗”控件绑定在物体上。空间中有两种设置,分别为场景和屏幕。这个概念和Unity的Canvas的3D world和2D 视图有点类似。

1)场景:即固定在场景中,成为3D场景的一部分,摄像机绕到弹窗后面还有可能会看不到弹窗,

如图2.5.2所示,此时的弹窗说是UI,其实更像是一个3D的面板

图2.5.2

2)屏幕:这个设置会一直跟随物体的位置并始终显示正面在屏幕上,无论摄像机怎么转,都会显示在物体的位置屏幕处。

2.6、UI弹窗和3D弹窗关联:设置了弹窗后,发现UI上的文本不能显示3D物体的信息。怎么讲信息进行关联并将信息传递给UI弹窗了。如图2.6.1所示,在“自定义蓝图Actor”的开始事件中将此时的

图2.6.1

控件转换成“弹窗”并赋值自己给“弹窗”的“目标物体”。这样弹窗中的文本和点击事件才能有效使用。

2.7、增加点击3D物体开关:上面完成的弹窗是一开始就显示在屏幕上,在蓝图中增加开关处理弹窗的可视性,如图2.7.1所示:可实现点击开再点击即关闭的效果。然后将弹窗默认可视性设置为false。

图2.7.1

2.8、UI的Tips弹窗:

1)文本提示跟随:随便选中一个UI控件,在其“高级->工具提示文本”中创建绑定,如图2.8.1所示

图2.8.1

绑定一个变量或者其他数值,在鼠标悬浮在该按钮时即可弹窗显示预设的内容。

2)随便选中一个UI控件,在其“高级->工具提示控件”中创建一个提示绑定如图2.8.2所示,在事件

图2.8.2

处理时创建一个预设的UI控件作为弹窗,t如图2.8.3所示:这里创建的UI无需额外处理添加视口和销毁等操作,应该时虚幻自处理这部分销毁。

图2.8.3

2.9、UI的可视性:上述设置中用到了UI的“可视性”这个属性,如图2.9.1所示在UI细节面板中可以

图2.9.1

看到可视性有如下几种类型:

1)可视:顾名思义即可以显示并且也可交互。

2)已折叠和隐藏:不可见也不可交互。

3)非命中测试:可见但是不能交互,并且如果该UI的ZOrder在别的UI前面时,点击该UI可以穿透点击后面的UI组件。

三、总结

3.1、弹窗的空间设置为“场景”和“屏幕”是有区别的,“场景”会成为3D物体的一部分,“屏幕”会一直跟随显示在屏幕上。

3.2、UI的几种可视性交互区别。

        

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1262541.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【python】python基础速通系列2-python程序中的积木块

【组成Python的几个单位】 变量:指向值的名称。或者说变量是一个名称,这个名称指向一个具体的指。比如n=17,就说这个叫做n的变量的值是17。表达式:是值,变量和运算符的组合。如果把变量理解为名词,那么表达式就是把名词连起来的动词形容词。比如:n+25。语句:代码的基本…

Java后端开发——JDBC(万字详解)

Java后端开发——JDBC(万字详解) 今日目标 掌握JDBC的的CRUD理解JDBC中各个对象的作用掌握Druid的使用 1,JDBC概述 在开发中我们使用的是java语言,那么势必要通过java语言操作数据库中的数据。这就是接下来要学习的JDBC。 1.1 …

深度视觉目标跟踪进展综述

1 引言 目标跟踪旨在基于初始帧中指定的感兴趣目标( 一般用矩形框表示) ,在后续帧中对该目标进行持续的定位。 基于深度学习的跟踪算法,采用的框架包括相关滤波器、分类式网络、双路网络等。 处理跟踪任务的角度,分为基于匹配思路的双路网…

Vue3的项目创建到启动

Vue3的项目创建 检查node版本创建 npm init vuelatest 安装依赖 项目启动 启动成功

MySQL修改已存在数据的字符集

在实际应用中,如果一开始没有正确的设置字符集,在运行一段时间以后,才发现当前字符集不能满足要求,需要进行调整,但又不想丢弃这段时间的数据,这个时候就需要修改字符集。 在MySQL设置默认字符集和校对规则…

HCIE 01:基于前缀列表的BGP ORF功能

当运行BGP协议的某台设备上,针对入方向配置了基于ip-prefix的路由过滤,过滤了邻居发送的路由; 目前想,通过在peer关系的两端设备上都配置ORF功能,实现路由发送端只能送路由接收端过滤后的路由; ORF功能的说…

Django回顾2

目录 一.HTTP 1.URL介绍 2.格式: 3.补充: 二.web框架 1.什么是框架 2.什么是web框架 3.wsgi协议 基于wsgi协议的web服务器: 4.协议是怎么规定的 三.Django 1.MVC与MTV模型(所有框架其实都遵循MVC架构) 2.…

Milvus入门手册1.0

一、window环境搭建(单机) 1、docker安装 略 2、milvus安装 参考文档:https://milvus.io/docs/install_standalone-docker.md tips: (1)compose.yaml下载比较慢,可以在网络上找一份。 (2&…

上海数字孪生技术推进制造业升级,工业物联网可视化应用加速

上海数字孪生技术推进制造业升级,工业物联网可视化应用加速。数字孪生技术,是从数字模型、数字样机的相关技术发展而来,而对于生产系统的数字孪生又和虚拟制造这一相关技术。数字孪生不是全新技术,它具有建模仿真、虚拟制造、数字…

kubenetes--kube-proxy实现负载均衡

一、Linux网络收包 要了解kube-proxy如何实现负载均衡,要先了解Linux网络收包机制,kube-proxy利用Linux的内核实现的负载均衡。 在TCP/IP网络分层模型里,整个协议栈被分成了物理层、链路层、网络层,传输层和应用层。物理层对应的…

【高并发写】库存系统设计

点击下方“JavaEdge”,选择“设为星标” 第一时间关注技术干货! 免责声明~ 任何文章不要过度深思! 万事万物都经不起审视,因为世上没有同样的成长环境,也没有同样的认知水平,更「没有适用于所有人的解决方案…

Vue 入门指南:从零开始学习 Vue 的基础知识

🥝VUE官方文档 注意: 📒Vue 2 将于 2023 年 12 月 31 日停止维护。详见 Vue 2 延长 LTS。📒Vue 2 中文文档已迁移至 v2.cn.vuejs.org。📒想从 Vue 2 升级?请参考迁移指南。 文章目录 🍁前言&am…

后台管理系统开源项目

最近项目没有什么事做,就自己整理,修改了一些vue2,react的后台管理系统项目,方便以后有需要可以直接提取,当然也方便了大家 vue2技术栈 lyl-vueProjectAdmin: vue2后台管理系统 react技术栈 lyl-reactAdminProject:…

Vue3-基于husky的代码检查工作流

husky是一个git hooks工具(git的钩子工具,可以在特定时机执行特定的命令) 代码检查 背景:想要使代码上传到git仓库前进行代码检查,所以提前下载好git 打开项目终端,点击右上角选择进入Git Bash控制 1.如…

牛客 算法题 golang语言实现

题目 HJ101 输入整型数组和排序标识,对其元素按照升序或降序进行排序 描述 输入整型数组和排序标识,对其元素按照升序或降序进行排序数据范围: 1 ≤ � ≤ 10001≤n≤1000 ,元素大小满足 0 ≤ � &#…

同为科技(TOWE)工业级炫彩桌面PDU让你的桌面更整洁

在当今社会,人们越来越注重生活品质与工作效率,桌面PDU插座是安全便捷的桌面电源设备,兼顾了工业机柜PDU功能、输出方式多样化与C端电气设备高颜值、实用性的特点,可满足消费者日常多方位用电需求。同为科技(TOWE&…

应用密码学期末复习(1)

学习资料 应用密码学总结_应用密码学知识点总结-CSDN博客 应用密码学期末复习知识点总结_5的36次方mod97__PriDe的博客-CSDN博客 【密码学】密码学期末考试速成课,不挂科!!#高数帮_哔哩哔哩_bilibili 目录 学习资料 第一章 概述 1.1信息…

vue2通过权限控制tab标签显示和隐藏

vue2通过权限控制tab标签显示和隐藏 1、前言2、v-if实现自定义控制 1、前言 在开发过程中,我们可能会遇到这样一个场景:根据不同权限对tab栏内容进行控制,这时候用自定义指令v-permission就达不到我们想要的效果,其是将当前节点的…

FinOps和DevOps的未来会怎样?

FinOps(或财务运营)是一种文化实践,它将财务责任引入云的可变支出模型。这是一种将系统、最佳实践和文化相结合的战略方法,可提高组织了解云成本并做出明智决策的能力。 本质上,FinOps 是一个管理云运营费用&#xff…