【Unity3D-UGUI原理篇】（一）Canvas 渲染模式

原创

恬静的小魔龙 2022-01-23 14:25:59 ©著作权

©著作权归作者所有：来自51CTO博客作者恬静的小魔龙的原创作品，请联系作者获取转载授权，否则将追究法律责任

大家好，我是佛系工程师☆恬静的小魔龙☆，不定时更新Unity开发技巧，觉得有用记得一键三连哦。

一、前言

这个系列文章，是为了记录分析UGUI的各种原理：

这是本系列文章的第一篇：

【Unity3D-UGUI原理篇】（一）Canvas 渲染模式

【Unity3D-UGUI原理篇】（二）Canvas Scaler 缩放原理

【Unity3D-UGUI原理篇】（三）RectTransform 组件详解

【Unity3D-UGUI原理篇】（四）Event System Manager 事件与触发

【Unity3D-UGUI原理篇】（五）Auto Layout 自动布局

【Unity3D-UGUI原理篇】（六）使用 UnityEngine.Events 让程序更灵活、稳定

首先我们在Unity的Hierarchy面板，选择"Create→UI→Canvas"，新建一个画布来详细的看一下属性：

【Unity3D-UGUI原理篇】（一）Canvas 渲染模式_原力计划

Canvas 渲染模式有三种：Screen Space-Overlay、Screen Space-Camera、World Space

下面就分别进行进行解析：

【Unity3D-UGUI原理篇】（一）Canvas 渲染模式_原力计划

属性	功能
Pixel Perfect	使UI元素像素对应，效果就是边缘清晰不模糊
Sort Order	多个Canvas时，数值越大越后渲染。值大的画布，会挡住值小的
Target Display	目标显示器，如果有多个屏幕的话可以选择
Addtional Shader Channels	附加着色通道，决定Shader可以读取哪些相关数据，比如法线、切线等数据。

这个屏幕空间覆盖模式渲染模式，就是表示不管有没有相机去渲染场景，Canvas下的所有UI永远位于屏幕的前面，覆盖掉渲染场景显示的元素。

【Unity3D-UGUI原理篇】（一）Canvas 渲染模式_原力计划_03

属性	功能
Pixel Perfect	使UI元素像素对应，效果就是边缘清晰不模糊
Render Camera	渲染的相机
Plane Distance	Canvas与相机之间的距离
Sorting Layer	Canvas属于的排序层，在 Edit->Project Setting->Tags and Layers->Sorting Layers 进行新增，越下方的层显示越前面
Order In Layer	Canvas属于的排序层下的顺序，该值越高显示越前面

这种渲染模式适用于场景模型太多太大，在调整UI的时候挡住UI，让UI和渲染的相机移动到比较远的位置，就可以避免遮挡。并且Canvas 和摄像机之间有一定的距离 , 可以在摄像机和 Canvas之间放置一些模型或粒子特效。

【Unity3D-UGUI原理篇】（一）Canvas 渲染模式_原力计划_04

属性	功能
Event Camera	响应事件的相机
Sorting Layer	画布的深度,指定了相机的渲染顺序
Order in Layer	值越大，该UI越显示在前面
Addtional Shader Channels	附加着色通道，决定Shader可以读取哪些相关数据，比如法线、切线等数据。