NGUI和粒子特效的层级关系
发表于2016-05-28
为了更丰富的表现UI，我们经常会在UI中添加一些粒子特效。NGUI中的渲染是靠UIPanel组织，通过UIDrawCall渲染的；而粒子特效是通过Particle System中的Renderer进行渲染的。那怎么使复杂的UI，特效组合按正确的层级渲染呢？
适用场景
比如说一个物品列表中，有一个很稀有的物品闪闪发光，这时玩家点击这件物品，我们会弹出一个物品详情的面板。简化这个场景模型就是在两个UI面板之间夹着一个粒子特效。
层级关系如图
我们希望渲染顺序也如此。
分析
NGUI中的渲染是靠UIPanel收集其负责的UIWidget（包括UILabel，UISprite，UITexture）的顶点信息，通过UIDrawCall实例化mesh对象，进行渲染。也就是说，NGUI中最小的一个渲染单元是一个UIDrawCall。
UIPanel的depth是指收集的顶点集合的排序依据，并不是最终渲染时的顺序，渲染的顺序在shader中的tags的Queue字段标记，更多介绍。
而UIPanel的Sort Order就是对应UIDrawCall的material实例的renderQueue。
粒子特效是通过Particle System的Renderer进行渲染的，Renderer中的Order in layer对应material的renderQueue。
所以，要排序UI和粒子特效，要将UIPanel的Sort Order和Particle System的Renderer的Order in Layer排好顺序即可。
解决方案
找到NGUI和粒子特效之间渲染关系，就可以很简单的通过设置层级关系了。
将底层面板的UIPanel的Sort Order设置为0，中间的粒子特效的Order in Layer设置为1，顶层面板的UIPanel的Sort Order设置为2，就可以满足我们上述需求。
效果如图：
