虚幻学习笔记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.mzph.cn/news/179915.shtml

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

相关文章

【计算机毕业设计】nodejs+vue音乐播放器系统 微信小程序83g3s

本系统的设计与实现共包含12个表:分别是配置文件信息表,音乐列表评论表信息表,音乐论坛信息表,歌手介绍信息表,音乐资讯信息表,收藏表信息表,token表信息表,用户表信息表,音乐类型信…

viple模拟器使用(四):unity模拟器中实现沿右墙迷宫算法

沿右墙迷宫算法 引导 线控模拟可以使得通过用户手动操作,实现机器人在模拟环境下在迷宫中行走(即:运动),算法可以使得机器人按照一定的策略自动行走,沿右墙迷宫算法就是其中的一种策略。 目的 运行程序后&…

Python---lambda表达式

普通函数与匿名函数 在Python中,函数是一个被命名的、独立的完成特定功能的一段代码,并可能给调用它的程序一个返回值。 所以在Python中,函数大多数是有名函数 > 普通函数。但是有些情况下,我们为了简化程序代码,…

AT89S52单片机的定时器

目录 定时器/计数器的结构 工作方式控制寄存器TMOD和TCON 定时器/计数器T1、T0的4种工作方式 1.方式0 2.方式1 3.方式2 4.方式3 定时器/计数器T2的结构与工作方式 1.T2的特殊功能寄存器T2MOD和T2CON 2.特殊功能寄存器T2CON 3.T2的三种工作模式 1. 捕捉方式 2.重新…

IWDG和WWDG HAL库+cubeMX

一.IWDG 1.原理 启用IWDG后,LSI时钟会自动开启 2.IWDG溢出时间计算 3.IWDG配置步骤 4.HAL库相关函数介绍 HAL_IWDG_Init //使能IWDG,设置预分频系数和重装载值等 HAL_IWDG_Refresh //把重装载寄存器的值重载到计数器中,喂狗typedef str…

leetcode:2549. 统计桌面上的不同数字(python3解法)

难度&#xff1a;简单 给你一个正整数 n &#xff0c;开始时&#xff0c;它放在桌面上。在 109 天内&#xff0c;每天都要执行下述步骤&#xff1a; 对于出现在桌面上的每个数字 x &#xff0c;找出符合 1 < i < n 且满足 x % i 1 的所有数字 i 。然后&#xff0c;将这些…

linux文件管理命令_切换创建复制移动删除查看修改

1.3 文件管理命令 1.3.1 cd&#xff1a;切换目录&#xff08;change directory&#xff09; cd 绝对路径/相对路径 # 根目录 [rootlocalhost ~]# cd / # 家目录 [rootlocalhost /]# cd [rootlocalhost /]# cd ~ # 父级目录 [rootlocalhost /]# cd .. # 返回上一次目录 [roo…

dcat admin日志扩展 dcat-log-viewer 遇到的问题记录

扩展地址&#xff1a; https://github.com/duolabmeng6/dcat-log-viewer 问题描述&#xff1a; 使用很简单&#xff0c;直接安装扩展包&#xff0c;开启扩展就可以了&#xff0c;会自动生成菜单。 之前在别的系统用过&#xff0c;没问题&#xff0c;今天在一个新的系统用的时…

食谱菜谱大全API接口

食谱菜谱大全API接口 一、食谱菜谱大全API接口二、使用步骤1、接口2、请求参数3、请求参数示例4、接口 返回示例 三、 如何获取appKey和uid1、申请appKey:2、获取appKey和uid 四、重要说明 一、食谱菜谱大全API接口 包含所有家用或者商用的食谱菜谱的API接口 二、使用步骤 1…

Vue3-VueRouter4路由语法解析

1.创建路由实例由createRouter实现 2.路由模式 1&#xff09;history模式使用createWebHistory()&#xff1a;地址栏不带# 2&#xff09;hash模式使用createWebHashHistory()&#xff1a;地址栏带# 3&#xff09;参数是基础路径&#xff0c;默认/ 括号里的就是设置路径的前…

微服务--04--SpringCloudGateway 网关

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 1.网关路由1.1 认识网关在SpringCloud当中&#xff0c;提供了两种网关实现方案&#xff1a; 1.2.快速入门1.3.路由过滤 2.网关登录校验2.1.鉴权思路分析2.2.网关过滤…

图解系列--Web服务器,Http首部

1.用单台虚拟主机实现多个域名 HTTP/1.1 规范允许一台 HTTP 服务器搭建多个 Web 站点。。比如&#xff0c;提供 Web 托管服务&#xff08;Web Hosting Service&#xff09;的供应商&#xff0c;可以用一台服务器为多位客户服务&#xff0c;也可以以每位客户持有的域名运行各自不…

【古月居《ros入门21讲》学习笔记】07_创建工作空间和功能包

目录 说明&#xff1a; 1. 工作空间(workspace) 结构&#xff1a; 2. 创建工作空间和功能包 创建工作空间 编译工作空间 创建功能包 设置环境变量 3. 注意 同一个工作空间下&#xff0c;不能存在同名的功能包&#xff1b; 不同工作空间下&#xff0c;可以存在同名的功…

达索系统3DEXPERIENCE WORKS 2024 结构仿真功能增强

simulia结构仿真是什么&#xff1f; 不仅能对结构进行力学、热学、声学等多学科计算&#xff0c;辅助于设计方案的优化&#xff1b;还能采用数字化技术模拟产品性能&#xff0c;大幅节约试验和样机迭代成本。达索系统3DEXPERIENCE WORKS 2024 结构仿真为企业提供随需应变、精准…

centos7-docker安装与使用

文章目录 一、docker简介1.1docker应用场景1.2docker的优点1.2.1快速&#xff0c;一致地交付应用程序1.2.2响应式部署和扩展1.2.3在同一硬件上运行更多工作负载 1.2docker的架构 二、docker的安装2.1新系统的环境搭建2.1.1更换yum源 2.2安装docker与卸载2.2.1yum安装docker2.2.…

看懂YOLOv7混淆矩阵的含义,正确计算召回率、精确率、误检率、漏检率

文章目录 1、准确率、精确率、召回率、误报率、漏报率概念及公式1.1 准确率 Accuracy1.2 精确率 Precision1.3 召回率 Recall1.4 F1-Score1.5 误检率 false rate1.6 漏检率 miss rate 2、YOLOv7混淆矩阵分析 1、准确率、精确率、召回率、误报率、漏报率概念及公式 重点参考博文…

.net7.0中把exe和dll分开打包

之前写过 C#把dll分别放在指定的文件夹_wpf core dll 放文件夹-CSDN博客 C#把dll打包到exe_c# 打包exe_故里2130的博客-CSDN博客 这都是老技术了&#xff0c;可以进行参考。 现在的.netcore系列有单独支持把exe和dll分开打包的功能了&#xff0c;当然也支持.net7.0和.net8.…

Phpstudy v8.0/8.1小皮升级Apache至最新,同时升级openssl版本httpd-2.4.58 apache 2.4.58

1.apache官网下载最新版本的apache 2.4.58 2.phpstudy下apache停止运行&#xff0c;把原来的Apache文件夹备份一份 复制图中的文件替换apache目录下文件 3.phpstudy中开启apache

Ps:子路径的上下排列以及对齐与分布

不论是一个形状图层&#xff08;或图层的矢量蒙版&#xff09;上的多个形状还是同一路径层上多个路径&#xff0c;只要对应“路径”面板的一个路径层&#xff0c;可以将这些路径称为该路径层的“子路径”&#xff0c;也称为“组件”。 当一个路径层上有两个以上的子路径时&…

uniapp微信小程序中阻止事件冒泡

开发场景&#xff1a;列表中展示地块的数据信息&#xff0c;用户可以点击列表进入地块的详情界面&#xff0c;也可以点击列表中的星星按钮进行收藏 遇到的问题&#xff1a;每次点击星星的时候&#xff0c;都会触发父级的点击事件&#xff0c;从而进入到详情界面 原本的代码&am…