调整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。