為了做出更酷炫的的UI效果,通常要在UI中加入粒子效果。但與純2D的UI動畫或Spine不同,粒子在場景中制作,會存在與UI的穿插問題。本文探討如何更改特效或UI的SortingOrder避免穿插。
前提條件
首先,Canvas的類型是一切的基礎,我使用的Canvas是
Screen-Space,所有UI通過一個正交攝像機照出來。制作UI通常使用這種模式,本文不討論其他情況。
核心原理
通過更改渲染的順序來改變遮擋關系。一方面UGUI會根據
Hierarchy中的控件順序進行排序。因此對於Animation或Spine制作的UI動畫,只要順序正確,就可以保證遮擋關系正確。對於使用
Particlesystem制作的特效,它是使用
Render進行渲染,因此需要找到一個能夠同時影響Render和UI控件渲染層次的方法。這個方法就是更改SortLayer或SortingOrder。這兩種方法原理一樣,先排序,再渲染。這個排序通過SortingOrder更改,而排序和排序之前可以通過SortLayer來分隔。以我目前的經驗,使用SortingOrder足夠,還沒有用到SortLayer。
案例
為了說的更清楚我制作了個簡單的例子,效果如下圖所示:
它在
Hierarchy中的層級關系如下:
不難看出,界面層級關系很簡單。大體上分為左區域、右區域、標題三部分,每部分中都包含底圖。左右區域分別有兩個按鈕。最終效果是左側的區域完全被特效覆蓋,右側區域底圖被特效覆蓋,按鈕在特效上層,標題區域所有內容顯示在特效上。其中所有UI使用標準UGUI材質,粒子特效使用系統自帶
Particles/Additive。
詳解
如第二節核心原理所述,我需要規劃出
SortingOrder。為了達到這個效果,左側區域使用默認的SortingOrder,也就是0。粒子使用1,即SortingOrder+1。右側區域Button和整個Title使用SortingOrder+2。
粒子設置
在
ParticleSystem中,找到Render更改它的SortingOrder為1:
UI設置
UGUI中
SortingOrder變量定義在Canvas中,因此需要是該類或其子類才能實現設置。這裏需要為Button1和Title添加一個Canvas。因為Canvas也會附帶更改它子節點的層級,所以Title下面的
SortingOrder都會被改好。另外,如果要傳遞點擊事件記得加入
GraphicRaycaster。
以上就是所有設置,播放粒子是效果圖的效果了。
警告
即使
SortingOrder相同也無法將不同Canvas的DarwCall合並,所以要盡可能的減少Canvas。盡量不要在加入特效時通過動態添加Canvas,來更改UI的
SortingOrder。這樣做會使UI中的Canvas不可控,不利於後期DrawCall優化。最好根據自己項目提前做好UI分層,從設計上處理好
SortingOrder。
關註我的微信公眾號,獲取更多優質內容
Tags:
文章來源: