Unity 3D UGUI 游戏界面 Canvas组件

时间:2024-04-06 22:37:40

 Canvas组件是UI的基础画布,所有UI元素都必须放在 Canvas组件下面,并且它支持嵌套。

Unity 3D UGUI 游戏界面 Canvas组件

 Canvas支持3种绘制方式,Overlay(最上层) Camera 和 World Space(3D布局),其中用的最多的是Camera,它可以把正交摄像机投影出来的UI元素绘制在Canvas面板上。

//--自适应屏幕

自适应屏幕需要画布,Canvas的同级需要绑定Canvas Scaler组件。

Unity 3D UGUI 游戏界面 Canvas组件

接着需要确认开发的分辨率,也就是说UI美术人员必须按照这个屏幕尺寸来出图和布局。

主流手机的分辨率比例大多是16:9,不可能把分辨率设置得太高,得考虑兼容低配的手机。(此处1920X1080)。

最后屏幕相对模式设置成Expand。表示Canvas 下的UI始终保持在屏幕内,当屏幕宽窄变窄后,它会整体缩放高度来保持自适应。

Unity 3D UGUI 游戏界面 Canvas组件

 还有两个,Match Width Or Height 表示始终保持宽度或高度来自适应高度或宽度。

Shrink 表示当分辨率变化时,始终保持原始比例,超出屏幕部分会被裁掉。

游戏中至少需要两个摄像机,一个是3D摄像机(主摄像机),另一个就是UI摄像机了。我们需要先渲染3D摄像机,然后再渲染UI摄像机,这样UI就会盖在3D场景的前面。

我们可以设置UICamera里的Depth值。3D相机设置为-1,UI相机设置为0(大于-1)。另外UICamera选择Orthographic正交。

Near clip plane 最小值建议设置为0,不然有时候某些UI会被剔除掉。

Unity 3D UGUI 游戏界面 Canvas组件

//--锚点对其方式

Unity 3D UGUI 游戏界面 Canvas组件

目前,UI的自适应是整体缩放。锚点的对其方式一共9种。由于UI对象是可以多层嵌套的,请记住这里面设置的是相对它的父对象的对其方式。

//--背景图全屏

背景图拉伸分两种,一种是允许图片变形。

Unity 3D UGUI 游戏界面 Canvas组件

另一种就是不允许图片拉伸变形,可以自动裁切。可以给Image添加Aspect Ratio Fitter组件。

Aspect Mode 中选择Envelope Parent 。

Unity 3D UGUI 游戏界面 Canvas组件

//--Canvas 优化

UGUI会自动合并批次,原理是它会把一个Canvas 下的所有元素合并在一个Mesh 里。如果Canvas下的元素很多,任意一个元素发生位置 大小 的改变,就需要重新合并所有元素的Mesh 。如果元素非常多的话,可能就会造成卡顿。

一个比较好的做法就是每个UI界面都设置成一个Canvas 。如果这个界面的元素比较多,可以考虑多套几个Canvas 。尤其是会频繁改变位置大小的元素。这样就可以降低它合并Mesh的开销。

但是Canvas 套的太多也不太好,Mesh合并是降低了,但是DrawCall上去了,因为每个Canvas 都会单独占用一个DrawCall。