【案例设计】UGUI空间 与 世界空间 的联动体系设计

开发平台：Unity 2020
编程平台：Visual Studio
 

前言

  路径导航标 作为游戏开发中，指引玩家根据策划设计流程依次前往任务点。在工业领域中，指引用户完成指导任务。或在智慧园区、智慧工厂同步监控电位、设备网等中广泛使用。本文着重讲解如何实现这一过程的多种思路方式与知识体系。
 

方案一：建立世界空间的UI体系

  在三维世界中观察二维UI，对稍微了解 Unity GUI（简称UGUI）的初学者是第一实现构思方法。该方法源于 UGUI 提供的 Canvas（画布）组件的 Render Mode 所提供的 World Space（世界空间）。该渲染模式允许 UGUI 元素以 Transform 组件方式存在于3D场景中。

  注意：Transform组件 与 RectTransform组件 是用于表现两种空间维度的组件，其数据信息并不互通用。

---

◼ 设计难点：UGUI需保持转向时刻面朝玩家主摄像机。

---

◼ 解决方案：使用 FixedUpdate 同步UGUI元素 Rotation 数据

  基于 World Space 的 UGUI，可赋予Transform组件 position、rotation、scale 值数据。在三维世界中，保持 UGUI 持续面朝玩家主摄像机，则Rotation数据应时刻变化。

public class AsynTransform : Monobehaviour
{
	public void FixedUpdate()
	{
		transform.rotation = Camera.Main.transform.rotation;
	}
}

• 朝向思路：Camera（注摄像机）与 UGUI 元素 Rotation 数据相同。
• 选择FixedUpdate的理由：固定时间（默认 0.2s）相较于 Update() 差别无异。

---

◼ 效果展示图

---

◼ 问题弊端
  三维空间下，不可避免的存在“近大远小”的问题。即如上图呈现，近处的监控访问图标大，远处的小。这类造成与之绑定的监控画面也跟随出现此类情况。那么这类设计究竟是 为了更好的可视化服务用户？ 还是让服务变的更加糟糕？
 
 

方案二：建立UGUI空间的UI体系

  UGUI空间 可理解为 Canvas 空间。其空间参数与属性均以 RectTransofrm 组件形式存在。（此处 UGUI空间 取名说法或许不标准，请于评论区指正）。不同于方案一将UGUI元素转变为世界空间下的 GameObject 可控对象。该方案将世界空间下的物理信息转换至UGUI数据进行处理。

  注意：Transform组件 与 RectTransform组件 是用于表现两种空间维度的组件，其数据信息并不互通用。

---

◼ 设计难点：将世界空间下物理的Transform信息转换至UGUI空间下的RectTransform信息。

---

◼ 解决方案：数据转置 世界空间 -》 屏幕空间 -》UGUI空间
  UGUI空间 不同于 屏幕空间、世界空间，是Unity中用于描述 Canvas空间的存在。（误区：屏幕空间 = UGUI空间）Unity Technology 提供 RectTransformUtility 助理类帮助开发完成三个空间维度的坐标转换。
  获取UGUI空间下的坐标信息，首先确认世界空间下的物体对象基于屏幕空间上的坐标数据。即WorldToScreenPoint()方法获取物体基于屏幕空间的坐标信息。注意：该方法未被 Unity官方文档 收录。使用Camera.WorldToScreenPoint()具备同样效果。其目的性一样。

private void SyncTransform()
{
	// 三维坐标空间转屏幕空间坐标
	Vector2 screenPoint = RectTransformUtility.WorldToScreenPoint(Camera.main, transform.position);
	// 屏幕空间坐标转UGUI坐标
	if (RectTransformUtility.ScreenPointToLocalPointInRectangle(Element.UICanvasRT, screenPoint, Element.UICamera, out current))
	{
		// 同步GUI空间元素的位置数据
		Element.GetComponent<RectTransform>().anchoredPosition = current;
	}
	
	Debug.Log($"屏幕空间坐标：{screenPoint}  UGUI坐标：{current}");
}

• anchoredPosition：隶属于 RectTransfrom组件的 Position属性。

RectTransformUtility 助理类提供以下两种方法用于实现屏幕坐标转UGUI坐标方法：

	转变方向	输出
ScreenPointToLocalPointInRectangle	Transform - > RectTransform	Vector2（RectTrasnform）
ScreenPointToWorldPointInRectangle	RectTransform -> Transform	Vector3（Transform）

注意：屏幕空间转UGUI空间中对Camera的选择应基于 UGUI Canvas绑定的相机对象。例如 Screen Space - Overlap 模式，未绑定Camera对象，则默认Camera.Main；使用 Screnn Space - Camera 模式，应指明该绑定Camera 对象！

---

◼ 效果展示图

---

◼ 可优化层面

• 建立 Pool 对象池思想，对UGUI元素收纳与取用。
• 建立 显示机制，避免数量繁多情况下的复数重叠的影响体验等行为。
• 更多待发现。
   

小结

  世界空间、屏幕空间、UGUI空间的区别需理解掌握。特别是RectTransformUtility 助理类的了解，有助于开发者提高开发效率。若有问题与错误描述，欢迎指正！