【Unity基础】ugui画布篇(个人学习)

前言

ui是必学的东西，这里主要学习ugui的常用控件，而学习必须要养成查看源码的好习惯。。。。
知识参考:https://docs.unity3d.com/cn/2021.3/Manual/
提前说明，这是个人学习笔记，不是教程。

一、Canvas是什么？

Canvas故名思意就是UI的画板，主要是控制UI的绘制的。在unity的ugui中，所有UI都必须是Canvas的子物体，而一个Canvas对象必须挂上以下几个组件，Canvas组件、RectTransform组件、CanvasScaler组件、GraphicRaycaster组件。下面分别看看这些组件是干嘛的。顺便附上一张截图

1.Canvas组件

I.RenderMode字段,是控制UI的覆盖方式，主要是三个选项。

选项一，Screen Space - Overlay

  按照选项的英文自己翻译，屏幕空间覆盖，那就是不管三七二十一直接覆盖上屏幕上。就是说把UI层和世界空间层分开渲染，UI永远是最前面的那个。

选项二，Screen Space - Camera

  如果选择这选项，就把把UI成发到摄像机的观察空间了。比如说我们选择好摄像机并且把设置好和摄像机的距离，如图所示:

这里的意思是说，把UI发到摄像机朝向发现距离为100的地方处，但是我们以摄像机朝向距离为10的地方创建一个物体，那么这个物体就会对UI进行遮掩。如下图所示:

，还有一个问题就是，这个UI的显示是依赖于摄像机的投影矩阵的，就是说选择摄像机的正交模式的情况下，UI的所有的近大远小的效果都会失效。

选项三，World Space

  这个选项就是把Canvas放到世界坐标里面，那么这种情况和普通的世界空间的其他物体没上面区别，那么我们可以把Canvas作为某个物体的子物体，就可以实现以下的效果。
这样就可以实现类似怪物头顶血条的效果了。。。。。。。

II.Pixel Perfect的作用

是Canvas组件下的这个东西

它在RenderMode为 World Space的时候无法使用，开启它主要是然UI的边缘更加清晰化，当然，这是要消耗性能为代价的。

III.需要注意的问题

首先先创建一张图片和一个Cube，并且按照上面这种情况，发现UI层就会把游戏物体给挡住，如下图所示：

我们再点开Cube的shader代码，发现如下图说是，Cube的着色器是开启着深度测试的，那么Image把Cube的遮挡部分的像素会因为无法通过深度测试而被剔除掉，所以就不会产生overdraw，这种情况下还可以接受，Cube的stand shader如下：

深度测试的数值通常是无法提前预知的，所以Cube的一些像素是必需要通过片元着色器而通向测试部分的，不过我们倒是可以通过生成一张帧缓存，而提前知道屏幕的该像素点是UI的区域，且还需要判断该UI透不透明，如果满足不透明且是UI的区域而提前把Cube的像素在片元着色器阶段剔除掉。(这里只学习UGUI，超纲了)。

那么当我们创建两个Image并且在scene面板里打开overdraw模式的时候，发现两张image重叠处会有点亮，如下图所示:


再开UI默认的着色器，如下图。

发现UI默认的着色器是把深度测试关上的，这意味着，重叠部分的像素，我们的显卡对它进行了两次渲染，那么在开发UI的过程中需要时时刻刻避免这种情况的发生。比如上层UI打开的时候下层禁用掉。

2.CanvasScaler组件

英文直译，画布缩放器。故名思意就是控制画布的大小被改变时，画布的UI要如何改变，这个组件主要是用于制作UI的自适应。

I.UI Scale Mode的选项

选项一. Constant Pixel Size

该选项是，无论屏幕大小如何改变，UI元素都只保持系统的像素大小。而这个选项。(几乎所有的UI适配都是使用这个选项的)
这个选项下产生的Scale Factor属性，主要用于缩放UI时，需要采用的这个系数再进行缩放操作。

选项二.Scale With Scree Size

这个选项下，屏幕越大，UI元素也跟着越大。并且可以通过如下图红框里三个参数做一些趋势性的操作。比如屏幕变大，由上面的匹配值来判断修改UI的宽度、高度的权重值。(这个模式也很少使用)

选项三.Constant Physical Size

无论屏幕大小和分辨率如何，UI 元素都保持相同的物理大小。(这个模式几乎不用)

该组件与RectTransform组件的共同作用

可以直接翻看这篇文章，讲的相当不错:https://www.jianshu.com/p/dbefa746e50d
看完上面这篇文章完全就可以使用代码来进行UI适配了。。。。。。
在详细点可以查看unity的官方手册：https://docs.unity3d.com/cn/2021.3/Manual/script-CanvasScaler.html