日更28/100（UGUI解决特效和UI层级的关系，以及Mask裁切）

YorkYoung · 简书 · · 2018-08-27 23:56

特效和UI的层级关系

特效和UI是在同一个Camera下，同一个SortingLayer下显示的，

但是，UI是在Canvas下统一管理渲染的，特效不是。
从其组件的父类继承关系也可看出来：

Canvas : Behaviour : Component，需要RectTransform组件

UI组件都继承自Graphic，属于UnityEngine.UI命名空间

特效ParticleSystem继承自Component，Component继承自Object

特效ParticleSystem必然带有MeshRenderer组件

SpriteRenderer 继承自Render，Render继承自Component

MeshRenderer 继承自Render

只要是Render，就有SortingLayer和OrderInLayer属性

同一个Canvas下渲染层级是一样的，所以特效是无法插入到两UI之间的

可以在需要显示在特效上的UI加一个Canvas，重载OrderInLayer属性，使其大于特效的OrderInLayer。

如果这个UI上又要显示新的特效，则新特效层级OrderInLayer需要比这个UI的高才行。

所以需要设计一套框架，实现以下效果

1、可以在任意层级添加特效，弹出的新UI会覆盖在特效之上

2、特效要支持mask裁切

3、拓展一下，其他Render也可以显示在UI层级之间；并且支持mask裁切

Mask裁切

要支持Mask裁切应该涉及到shader

1、UI自带的Mask裁切原理(可以看浅谈Unity uGUI Mask组件实现原理)

Masking is implemented using the stencil buffer of the GPU.

要让自带的Mask支持特效裁切，在特效的shader里加入如下代码即可。

_StencilComp ("Stencil Comparison", Float) = 8
_Stencil ("Stencil ID", Float) = 0
_StencilOp ("Stencil Operation", Float) = 0
_StencilWriteMask ("Stencil Write Mask", Float) = 255
_StencilReadMask ("Stencil Read Mask", Float) = 255

Stencil
{
    Ref [_Stencil]
    Comp [_StencilComp]
    Pass [_StencilOp] 
    ReadMask [_StencilReadMask]
    WriteMask [_StencilWriteMask]
}

2、自定义的UIMask裁切原理

雨松的方案

原理就是把Mask的裁切区域传给粒子特效Shader，当超出这个区域那么直接让它完全透明即可。粒子特效的源生shader大家可以去unity官网下载，我在这里把需要修改的地方标注给大家。

另一个方案（未测试）

拜读大神博客久矣。一直仰慕！在下有一个方法可以更便捷的解决以上问题，也是我偶然翻查国外论坛找到的。创建两个Shader，一个给粒子用，一个给UI Mask 用,两个Shader的内容均采用Build-in Shader的Particle-Additive 和 UI-Default。利用Shader 的 Stencil 功能，分别对两个Shader加入以下内容：//UI Mask Stencil { Ref 1 Comp Always Pass Replace }//Paritcle Stencil { Ref 1 Comp equal }之后分别创建相应材质球，将其赋予UIImage 和想被遮罩的 Particle 即可。如果看不见效果，调整一下Particle的位置。亲测可用。

我们项目中的方案
我们自己使用了一套Shader，UI-Default-Optimized.shader、UI-Default-Gray.shader等，然后要使用我们自己的UIMask，与系统的Mask不兼容。

系统的方案是使用Stencil，我们的方案是根据MaskRect区域改透明度

据说使用Stencil比较耗性能

我们的UIMask不支持不规则图形的裁切，只是用来裁切ScrollView滚动视界的区域

原文地址：访问原文地址
快照地址：访问文章快照

分享到微博