NGUI和粒子特效的层级关系

发表于2016-05-28
评论0 5.6k浏览
       为了更丰富的表现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,就可以满足我们上述需求。 
     效果如图:



如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引