IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 游戏开发 -> 【案例设计】UGUI空间 与 世界空间 的联动体系设计 -> 正文阅读

[游戏开发]【案例设计】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坐标方法:

转变方向输出
ScreenPointToLocalPointInRectangleTransform - > RectTransformVector2(RectTrasnform)
ScreenPointToWorldPointInRectangleRectTransform -> TransformVector3(Transform)

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


? 效果展示图
在这里插入图片描述


? 可优化层面

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

小结

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

  游戏开发 最新文章
6、英飞凌-AURIX-TC3XX: PWM实验之使用 GT
泛型自动装箱
CubeMax添加Rtthread操作系统 组件STM32F10
python多线程编程:如何优雅地关闭线程
数据类型隐式转换导致的阻塞
WebAPi实现多文件上传,并附带参数
from origin ‘null‘ has been blocked by
UE4 蓝图调用C++函数(附带项目工程)
Unity学习笔记(一)结构体的简单理解与应用
【Memory As a Programming Concept in C a
上一篇文章      下一篇文章      查看所有文章
加:2022-05-14 10:12:09  更:2022-05-14 10:12:12 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 10:59:02-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码