世界 UI ​

阅读本文大概需要 10 分钟。

本文概述了如何制作世界 UI 并修改属性以实现各种各样的效果。

什么是世界 UI？ ​

世界 UI 的主要作用是提供一个在 3D 环境下的表面，可将正常情况下渲染到屏幕的 UI 组件渲染到该对象上，例如创建商店招牌、游戏提示板的世界类型 UI，角色名称，角色血条的头顶类型 UI。

如何编辑世界UI？ ​

• 在本地资源库-游戏功能对象列表中找到世界UI，将其拖入到场景中，即完成了世界UI的创建
• 然后将工程内容中做好的2DUI拖拽到世界UI属性面板的绑定UI对象内，完成绑定后，世界UI就会显示在主视口内了。
• 如果是头顶类型的世界UI，还需要将世界UI对象挂载在人形对象上，并设置好与角色的相对位置

世界UI有世界/屏幕/头顶三种类型，下面我们分别展开介绍：

1、UI类型 ​

世界类型 ​

• 世界类型世界UI是将UI控件以网格体的形式在世界场景中进行渲染，并且可被遮挡，使得UI不再脱离在场景层之外，而是成为场景层的一部分给玩家带来更强的代入感

屏幕类型 ​

• 屏幕类型世界UI在完全处于世界场景之外的屏幕上渲染控件，控件永远不会被遮挡，且永远面朝摄像机的功能。

头顶类型 ​

• 与屏幕类型相似，UI界面都会永远面朝摄像机，确保是会使用射线检测方法检测玩家和头顶UI之间是否有物体阻挡，从而控制头顶UI的显示/隐藏，同时计算两者之间的距离去缩放头顶UI实现近大远小的效果

本质上，只有世界类型的世界UI是以网格体真正渲染在场景中的，所以它会被场景里的模型遮挡；而屏幕类型和头顶类型与普通UI的渲染方式相同，不同之处是会自动计算大小和位置

2、是否可交互 ​

• 当勾选此属性时，可以与世界UI中的各种UI组件进行交互，此功能会穿透摄像机滑动区；但是无法穿透摇杆，如果场景中有可交互的世界UI，请勿使用范围过大的摇杆

3、头顶类型世界UI的特殊属性 ​

• 是否可以被遮挡：头顶UI是否可以被建筑物等物体遮挡并隐藏，勾选则被遮挡，不勾选则不会被遮挡
• 是否开启近大远小：头顶UI是否有近大远小的效果，勾选则有近大远小的效果，不勾选则始终是一个大小不会变化
• 缩放距离系数：头顶UI距离摄像机每n米单位时，将世界UI的尺寸进行百分比缩放。例如，太空游戏每个星球都有名称，但距离都会很远，这个系数就可以放大一些，每1万米进行UI缩放。正常游戏中，大多数距离较近，这个系数就可以缩小一些，每10米进行UI缩放。
• 是否开启最大可见距离：是否启用头顶UI的最大距离，如果不启用，则无论多远距离都不会隐藏此头顶UI
• 最大可见距离：头顶UI可以看见的最大距离，超过该距离，头顶UI就会被隐藏

如何使用脚本制作动态的世界UI？ ​

示例一：动态创建世界UI，并绑定2DUI ​

• 除了前文中将世界UI拖入场景，手动给世界UI绑定2DUI的用法之外，我们还可以在脚本中编写动态创建世界UI并完成绑定
• 因性能原因，目前世界UI的渲染大小限制为最大512512，所以想用在动态创建世界UI对象中的2DUI的Root的大小请勿超过512512，否则世界UI将无法显示完全

• 编写脚本，动态创建世界UI对象，并且完成与2DUI的绑定

			// 动态创建世界UI
			let worldUI = GameObject.spawn<mw.UIWidget> ("UIWidget") 
			// 设置世界UI的位置
			worldUI.localTransform.position = new Vector(0, 0, 200)
			// 创建2DUI
			let worldui = createUIByName("worldui")
			// 绑定2DUI
			worldUI.setTargetUIWidget(worldui)
			// 设置渲染大小,最大512*512，需要使这个大小和2DUI中Root的大小一致，否则渲染不全
			worldUI.drawSize = new Vector2(500, 500)

			// 动态创建世界UI
			let worldUI = GameObject.spawn<mw.UIWidget> ("UIWidget") 
			// 设置世界UI的位置
			worldUI.localTransform.position = new Vector(0, 0, 200)
			// 创建2DUI
			let worldui = createUIByName("worldui")
			// 绑定2DUI
			worldUI.setTargetUIWidget(worldui)
			// 设置渲染大小,最大512*512，需要使这个大小和2DUI中Root的大小一致，否则渲染不全
			worldUI.drawSize = new Vector2(500, 500)

• 左侧是提前摆放并绑定好2DUI的世界UI，在右侧动态生成一个完全相同的世界UI

• 示例工程： 点击下载