虚幻学习笔记3—UI跟随弹窗
一、前言
本文使用的虚幻引擎5.3.2,继点击场景3D物体的两种处理方式的基础完成对3D物体的点击触发后,我们需要制作一个可以弹窗显示该物体信息的UI面板,同时保证弹窗可以跟随物体。另外还讲了一种UI上的悬浮提示跟随弹窗。
二、实现
2.1、创建一个弹窗UI:创建一个如图2.1.1所示的UI,主要包含一个显示信息的文本和一个处理的

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

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

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

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

能显示在左上角,“蓝色3”即点击目标物体的名字。点击销毁目标可以将3D物体和UI一起销毁。
2.4、让弹窗显示在3D物体所在的位置:在添加到视口后面增加“设置视口的位置“蓝图,如图2.4.1

所示:获取玩家控制器中的”Project world to Screen"方法,将此时物体的位置转换成屏幕位置。
但是此时的弹窗只是在点击时出现在物体位置,镜头转动就不会在物体的位置,我们还需要做到跟随物体的运动而动。
2.5、弹窗跟随3D物体:在点击场景3D物体的两种处理方式的自定义蓝图Actor中新建“控件组件”,如图2.5.1所示,将控件类

设置为“弹窗”,默认的空间为场景,此时在视口或场景中可以看到物体上面都有一个“弹窗”控件绑定在物体上。空间中有两种设置,分别为场景和屏幕。这个概念和Unity的Canvas的3D world和2D 视图有点类似。
1)场景:即固定在场景中,成为3D场景的一部分,摄像机绕到弹窗后面还有可能会看不到弹窗,
如图2.5.2所示,此时的弹窗说是UI,其实更像是一个3D的面板

2)屏幕:这个设置会一直跟随物体的位置并始终显示正面在屏幕上,无论摄像机怎么转,都会显示在物体的位置屏幕处。
2.6、UI弹窗和3D弹窗关联:设置了弹窗后,发现UI上的文本不能显示3D物体的信息。怎么讲信息进行关联并将信息传递给UI弹窗了。如图2.6.1所示,在“自定义蓝图Actor”的开始事件中将此时的

控件转换成“弹窗”并赋值自己给“弹窗”的“目标物体”。这样弹窗中的文本和点击事件才能有效使用。
2.7、增加点击3D物体开关:上面完成的弹窗是一开始就显示在屏幕上,在蓝图中增加开关处理弹窗的可视性,如图2.7.1所示:可实现点击开再点击即关闭的效果。然后将弹窗默认可视性设置为false。

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

绑定一个变量或者其他数值,在鼠标悬浮在该按钮时即可弹窗显示预设的内容。
2)随便选中一个UI控件,在其“高级->工具提示控件”中创建一个提示绑定如图2.8.2所示,在事件

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

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

看到可视性有如下几种类型:
1)可视:顾名思义即可以显示并且也可交互。
2)已折叠和隐藏:不可见也不可交互。
3)非命中测试:可见但是不能交互,并且如果该UI的ZOrder在别的UI前面时,点击该UI可以穿透点击后面的UI组件。
三、总结
3.1、弹窗的空间设置为“场景”和“屏幕”是有区别的,“场景”会成为3D物体的一部分,“屏幕”会一直跟随显示在屏幕上。
3.2、UI的几种可视性交互区别。