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

一、前言

        本文使用的虚幻引擎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.hqwc.cn/news/225676.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

nginx 配置跨域(小皮面板)

本地开发的时候,前端请求后端,后端不能用域名请求,只能用端口模式,在小皮面板的话就是如下配置: 我的测试项目部署: 前端:http://localhost:8082 后端:http://localhost:8081 前端…

万宾科技第四代可燃气体监测仪的作用

燃气作为一种重要的能源已在居民生活、工业生产和商业活动等领域得到了广泛的应用。但是与之而来的便是各种各样的燃气管网的安全问题,其中燃气管网泄漏成为了城市生命线建设中亟待解决的安全隐患。因此采取切实有效的措施来保障燃气管网的安全运行,应用…

Modbus平台:协议中间件(支持Modbus TCP、RTU、ASCII)

该程序可放置外网中,适用于DTU长连接(心跳包必须包含DTU,可以是tcp/udp),也可以在内网中,短连接访问设备server 支持协议:Modbus TCP | RTU | ASCII 连接方式:TcpAtive: TCP主动 | …

Java(九)(多线程,线程安全,实现线程的方法,线程同步,线程池,并发和并行,线程的六种状态)

目录 多线程 线程 实现线程的方法 方法一:继承Thread父类 方法二:实现Runnable接口 方法三:Callable接口和FutureTask类来实现 Thread方法 线程安全 线程同步 同步代码块 同步方法 Lock锁 线程池 线程池对象的创建方式一: 线程池处理Runnable任务 线程池处理Cal…

软件提示找不到“vcruntime140.dll丢失的五个解决方法”(有效方法)

“vcruntime140.dll丢失的五个解决方法”。在我们的日常生活和工作中,有时候会遇到一些电脑问题,而vcruntime140.dll丢失就是其中之一。那么,什么是vcruntime140.dll文件呢?它为什么会丢失?又该如何解决这个问题呢&…

顶象s_v3滑块

Monday:你要悄悄打工,然后惊艳所有人。 网址:https://m.sichuanair.com/touch-webapp/user/login 说正事,顶象官网的验证码js会变更,但是对于某些特定的网站,有一个生sv_3版本的算法。 之前做过很多个站点…

Java-多线程基本知识学习总结

多线程 前言一、线程的创建1、继承Thread类2、实现Runnable接口 二、线程的生命周期三、操作线程的方法1、线程的休眠2、线程的加入3、线程的礼让4、线程的优先级 四、线程同步End 前言 Java是支持多线程的编程语言,所谓多线程就是程序能够同时完成多种操作。 计算…

APP端-阻止ios 默认全屏模式显示

问题描述: ios 默认全屏模式显示&#xff0c;该加的参数都加了&#xff0c;但是还是会自动默认全屏模式 代码如下: <video autoPlay loop playsInline muted{true} poster{UPIPreload}><source src{"video/your.mp4"} /></video>于是乎跟我们的A…

yolov5检测(前向)输入视频输出(不在图上画标签形式的原)图片的方法,及设置每隔几帧保存的方式(不每帧保存减少重复)

这些天我忽然有个需求&#xff0c;要更新迭代一个场景的检测模型&#xff0c;甲方爸爸提供的新数据集是监控视频形式的(因为拍视频确实更加的方便)&#xff0c;而我训练模型确实要标注好的图片形式。 根据这些条件的话&#xff0c;思路应该是要这样的&#xff1a;首先使用现有的…

win_sever系列:windows sever 2012R和windows sever 2016如何开启远程连接服务以及问题解决

windows sever 2012R和windows sever 2016如何开启远程连接服务以及问题解决 一. windows sever 2012R和windows sever 2016如何开启远程连接服务前言一、确保需要进行远程的两个服务器处于同一网段二、关闭防火墙三、需要把被远程的电脑的允许远程打开3.1打开windows sever 20…

户外园林气象环境RTU采集主机监测的具体使用

户外园林是人们休闲、娱乐和放松心情的场所&#xff0c;良好的气象环境对于提供舒适的户外体验至关重要。为了有效监测和管理园林的气象环境&#xff0c;户外园林气象环境RTU&#xff08;Remote Terminal Unit&#xff09;采集主机应运而生。本文将详细介绍户外园林气象环境RTU…

分享一个适用于 Vue3 的好的组件库,PrimeVue组件。

一、PrimeVue介绍 PrimeVue 是一个基于 Vue.js 的 UI 组件库&#xff0c;专注于提供丰富、灵活、现代的 UI 组件&#xff0c;以帮助开发者构建功能强大的 Web 应用程序。PrimeVue 提供了一系列的组件&#xff0c;涵盖了从基本的表单元素到高级的数据表格和图表等各种组件。 二、…