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中的层级关系如下:

170303_111057
不难看出,界面层级关系很简单。大体上分为左区域、右区域、标题三部分,每部分中都包含底图。左右区域分别有两个按钮。最终效果是左侧的区域完全被特效覆盖,右侧区域底图被特效覆盖,按钮在特效上层,标题区域所有内容显示在特效上。其中所有UI使用标准UGUI材质,粒子特效使用系统自带Particles/Additive

详解

如第二节核心原理所述,我需要规划出SortingOrder。为了达到这个效果,左侧区域使用默认的SortingOrder,也就是0。粒子使用1,即SortingOrder+1。右侧区域Button和整个Title使用SortingOrder+2。

粒子设置

ParticleSystem中,找到Render更改它的SortingOrder为1:

170303_114511

UI设置

UGUI中SortingOrder变量定义在Canvas中,因此需要是该类或其子类才能实现设置。这里需要为Button1和Title添加一个Canvas。因为Canvas也会附带更改它子节点的层级,所以Title下面的SortingOrder都会被改好。另外,如果要传递点击事件记得加入GraphicRaycaster

170303_115335

以上就是所有设置,播放粒子是效果图的效果了。

警告

即使SortingOrder相同也无法将不同Canvas的DarwCall合并,所以要尽可能的减少Canvas。尽量不要在加入特效时通过动态添加Canvas,来更改UI的SortingOrder。这样做会使UI中的Canvas不可控,不利于后期DrawCall优化。最好根据自己项目提前做好UI分层,从设计上处理好SortingOrder

本文出自 松阳论道 转载必须注明出处

http://blog.songyang.net/333.html

说点什么吧...

电子邮件地址不会被公开。 必填项已用*标注