整理Unity3d UGUI使用流程

?

記錄UI界面層級多并使用大量動(dòng)畫和特效系統(tǒng)情況下,使用中遇到的一些問題和處理方法

?

Unity3d 版本為2018.4.4f1

. 基本設(shè)置

UI部分使用單獨(dú)的攝像機(jī)來渲染

(以下稱”Main Camera”為"主相機(jī)", “UI Camera”為"UI相機(jī)")

?

UI相機(jī)設(shè)置

1.設(shè)置Culling Mask只勾選UI ,保證只渲染到Layer設(shè)為UI的層級

2.Projection 設(shè)置成正交Orthographic ,避免可能調(diào)整Z軸的時(shí)候出現(xiàn)大小變化

3.Size 可以用默認(rèn)值, 注意設(shè)置以后就不要再更改了,后期修改會影響到粒子系統(tǒng)特效尺寸

(設(shè)置粒子系統(tǒng)的縮放模式為Hierarchy就不會受Size影響了,后面做動(dòng)畫需要縮放帶特效的UI也需要設(shè)置為Hierarchy)

4.Depth設(shè)置比主相機(jī)高就行,讓其渲染在主相機(jī)畫面上層

5.Occlusion Culling建議不勾, 勾選會導(dǎo)致使用Occlusion Culling剔除場景時(shí)如果UI相機(jī)在其中會被剔除部分UI顯示. 或者將UI相機(jī)移出到Occlusion Culling的構(gòu)建范圍外,以免出現(xiàn)部分UI突然消失的問題

主相機(jī)取消UI的勾選, 以免UI被渲染兩次,影響性能

?

Canvas我常用的設(shè)置(左),使用粒子系統(tǒng)的設(shè)置(右)

1.Canvas Scaler 設(shè)置如圖, 主要是做適配

2.Reference Resolution 設(shè)置一個(gè)基準(zhǔn)值,根據(jù)需要來設(shè)置. 跟橫豎屏有關(guān)

?3.Match是根據(jù)寬高適配的比例. 看游戲是做橫屏還是豎屏. 0或1

?4.或者代碼動(dòng)態(tài)調(diào)整橫豎屏切換. ?好像很少會有人去做橫豎屏來回切換的游戲吧

?

一.Sorting Layers

Sorting Layers屬于整體控制

1.設(shè)置Sorting Layers能大大避免前中后各層級UI界面之間的穿插問題. 層不夠用的時(shí)候,分層的添加和修改都很方便?

2.Sorting Layers 分得不宜太多. 層與層之間的UI不會進(jìn)行合批渲染. 主要以背景層, 中間層, 最前面彈窗層為主, 中間層可以適當(dāng)根據(jù)需要增加. 3-5個(gè)層級完全是夠用的

3.也可以不使用Sorting Layers分層管理,只是為了管理方便

默認(rèn)Default層, 只使用Order in Layer來排序也是可以的. 只是要留夠足夠的空間,0-30留給背景和特效,31-100留給中間和特效,100以上留給彈窗和特效. (為什么留這么多層,因?yàn)橹绊?xiàng)目上使用unity官方的2D插件做人物動(dòng)態(tài)動(dòng)畫,2D動(dòng)畫分層是使用Order in Layer排序的,角色分件太細(xì)會導(dǎo)致排序?qū)硬粔蛴?..) 使用Sorting Layers分層可以輕松解決這種問題

4.進(jìn)行一個(gè)簡單的Sorting Layers分層

給Canvas_Back,_Medium,_Front各加上個(gè)Canvas選擇對應(yīng)Sorting Layer,設(shè)置如下圖

這樣三層之間可以做到互不干擾

二.?Particle System粒子系統(tǒng)使用

?假如要給背景層加特效, 設(shè)置粒子Renderer的Sorting Layer 為Back, 用Order in Layer控制層級

?粒子特效只在Back層內(nèi)排序,不會影響到其他Sorting層級

給Canvas_Medium中間層小部件添加特效

一般這種小部件是復(fù)數(shù)的,作為單獨(dú)的Prefab來動(dòng)態(tài)加載,留個(gè)空掛點(diǎn)位置即可

Particle System的Renderer 設(shè)置Order in Layer來排列渲染順序

出現(xiàn)夾在中間的Image時(shí), 需要加個(gè)Canvas給圖片排序,打斷合批渲染

注意排序. 沒有設(shè)置Order in Layer的都是以最上面的父級的層級設(shè)置為順序

?在任何Sorting Layer都可以使用這種方式排序Particle System, 不會影響到其他Sorting層級

?

Canvas_Front層一般作為彈窗提示類UI層級

可以使用中層同樣的方式添加特效

?除了使用粒子系統(tǒng)添加特效外, 還可以寫Shader來實(shí)現(xiàn)一些特殊效果. Shader可以使用UI默認(rèn)的正常排序,不用為了排序搞得那么復(fù)雜, 可以結(jié)合著用

注意使用Canvas排序會打斷UI的合批渲染,造成draw call的增加

?

三.?Animator控制UI動(dòng)畫

優(yōu)點(diǎn):

分工明確,程序控制簡單,只用在交互的時(shí)候調(diào)用動(dòng)畫,美術(shù)制作方便,制作的時(shí)候運(yùn)行動(dòng)畫就能方便預(yù)覽效果,不用等程序?qū)懲甏a提交才能看

?

簡單拿窗口來說,把Animator添加到Canvas_Front上,下層建個(gè)空的AnimControl做為動(dòng)畫控制的空掛點(diǎn). 空掛點(diǎn)下是動(dòng)態(tài)加載的Prefab窗口

?Prefab里還能加Animator控制窗口內(nèi)的細(xì)節(jié)

建議使用空掛點(diǎn),方便通用動(dòng)畫控制組件和動(dòng)畫. 動(dòng)畫不要直接操作UI元素,減少反復(fù)做同類動(dòng)畫

?創(chuàng)建2個(gè)動(dòng)畫和一個(gè)空節(jié)點(diǎn)Null , 添加Int參數(shù),通過傳值來驅(qū)動(dòng)動(dòng)畫

動(dòng)畫的一些設(shè)置.如下圖

因?yàn)閯?dòng)畫控制的是AnimControl這個(gè)空掛點(diǎn),所以下方Prefab窗口是可以任意更換的.

?

縮放UI時(shí)特效大小不跟著變, 粒子系統(tǒng)縮放模式要設(shè)置為Hirerarchy, 制作特效的時(shí)候就應(yīng)該修改好縮放模式

簡單的帶縮放的開關(guān)窗口就做好了,實(shí)際可以通過動(dòng)畫做很多節(jié)奏復(fù)雜的UI進(jìn)場效果

?

四.?使用中遇到的問題

1.?UGUI添加canvas組件調(diào)整UI渲染層級后需要點(diǎn)擊交互的控件失效

在添加canvas組件后還要添加一個(gè)raycaster組件，這樣才能觸發(fā)對應(yīng)的射線檢測事件

?

2.?粒子系統(tǒng)不受mask組件遮罩

?

在控件的Viewport下新建一個(gè)空層添加上SpriteMask組件

?

Sprite 添加一張需要遮罩區(qū)域的形狀圖,調(diào)整Transform Z軸高于UI面板,調(diào)整Scale得到合適的尺寸

?Custom Range控制遮罩的層級范圍,這里粒子的Order 是6, 設(shè)置front為6 ,back為5即可, 多個(gè)粒子有排序的話,可以設(shè)置區(qū)間

?Particle System的Renderer下Masking 要設(shè)置成Visable Inside Mask

?這樣粒子就獲得了遮罩

這樣做有個(gè)缺點(diǎn),就是SpriteMask層級的尺寸是由Scale控制,不會隨著自適應(yīng)一起變大,固定大小的窗口沒有問題

?

網(wǎng)上還有其他方法 ?

1.通過獲取Mask的裁切范圍傳給修改過的特效shader來獲得遮罩

2.通過修改粒子系統(tǒng)Renderer模塊,將粒子渲染到UI上等

?

?

3.還有一些其他問題, 忘記了,以后遇到了再補(bǔ)充進(jìn)來