Unity3d開發（十九）調整SortingOrder解決UGUI中粒子層級問題

為了做出更酷炫的的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

。

關注我的微信公衆号,擷取更多優質内容