前言
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 元素都保持相同的物理大小。(这个模式几乎不用)文章来源:https://www.toymoban.com/news/detail-404738.html
该组件与RectTransform组件的共同作用
可以直接翻看这篇文章,讲的相当不错:https://www.jianshu.com/p/dbefa746e50d
看完上面这篇文章完全就可以使用代码来进行UI适配了。。。。。。
在详细点可以查看unity的官方手册:https://docs.unity3d.com/cn/2021.3/Manual/script-CanvasScaler.html文章来源地址https://www.toymoban.com/news/detail-404738.html
到了这里,关于【Unity基础】ugui画布篇(个人学习)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!