码迷,mamicode.com
首页 > 编程语言 > 详细

Unity3d开发(十九)调整SortingOrder解决UGUI中粒子层级问题

时间:2017-03-03 19:23:47      阅读:2790      评论:0      收藏:0      [点我收藏+]

标签:顺序   nim   fill   article   改变   覆盖   div   设置   界面   

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

技术分享

关注我的微信公众号,获取更多优质内容

Unity3d开发(十九)调整SortingOrder解决UGUI中粒子层级问题

标签:顺序   nim   fill   article   改变   覆盖   div   设置   界面   

原文地址:http://blog.csdn.net/fansongy/article/details/60140188

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!