Unity引擎UGUI上特效处理重叠和裁剪问题的多种解决办法

  大家好，我是阿赵。
  使用Unity引擎开发项目，使用UGUI做界面，经常会遇到需要把特效放在UI上，但UI本身和特效又需要有遮挡关系和裁剪效果。
  之前我介绍了一下使用MaskableGraphic的方式把粒子特效渲染在UI上，把粒子特效当Image用。实际上解决类似的问题，是有很多手段的，这些手段各有优缺点，实现的难度也各有不同，这篇文章不会很详细的列举代码，但可以从思路上分享一下。

一、 RenderTexture

  这是最直观的方法，把特效放在一个远离主场景的地方，然后单独打一个摄像机，设置一个RenderTexture作为摄像机的TargetTexture。这样摄像机会把特效渲染到这张RenderTexture上面，然后我们就可以把这种RenderTexture用作RawImage的贴图，正常重叠和裁剪了。
  这个方法从操作上来说比较简单实现，但实际上有很多缺点：
1、 为每一个特效都打一个摄像机，看着就很傻
2、 生成多张RenderTexture，严重占用内存。而由于每个特效的大小都不一样，需要使用多大的RenderTexture也是一个问题。
3、 对于特效本身是半透明渲染的，在RenderTexture上透明通道会出现问题。因为比如是AlphaBlend这种叠加方式，实际上是需要把半透明颜色叠加在背景色才能显示出正常的效果。但由于我们单独打了一个摄像机看这个特效，并没有合理的背景色作为叠加，所以渲染出来的图片透明通道是不正确的。解决办法当然也有，先把摄像机背景色调成纯黑，渲染一张，再把摄像机背景色调成纯白，再渲染一张，把两张图通过计算可以得到正确的透明通道和颜色。不过这样做，感觉就更麻烦了。

二、 修改渲染的顺序

  这个方法我觉得可能是最多人用的。
  首先我们要知道，UGUI的Canvas上面有一个Order in Layer的参数。这个参数实际上是这一张Canvas在渲染时候的渲染顺序。

  一套UI系统里面，可以有多个Canvas层，order大的Canvas会盖住order小的Canvas。
  然后我们需要知道，在Mesh渲染器或者粒子渲染器里面，也有一个渲染order：

  这个Order in Layer和Canvas里面那个Order In Layer是同一回事。不过有个问题是，在Canvas里面的UI元素，比如一张Image，如果自身没有单独的Canvas，那么它的Order会和父级的Canvas一样。而同一个父级下的多个Image，排序是按照sibling index来排的，也就是作为子物体的顺序。但如果一个粒子特效和一个Image，他们的Order In Layer一样，却并不会按照sibling index来排序，粒子特效会盖住Image。
  知道了这个规则之后，问题就比较简单处理了。如果特效要叠加在UI上面，那么把特效的Order设置到和UI的父级Canvas一样就行。
  再举一个复杂点的例子，假如父级Canvas下面有一张Image1，然后有一个粒子特效fx要盖住Image1，然后还有一张Image2要盖住fx。比如父级Canvas的order是100，那么fx的order也设置成100，fx就自然盖住Image1了。接下来，在Image2身上加一个Canvas，把Override Sortting勾上，然后order填101，这是，Image就会把Image1和fx都盖住了。
  如果用代码实现，其实就很简单了，写一个C#脚本，挂在需要改变order的对象上，然后提供一个方法，设置一个添加order的数量。调用方法是，找自身的父级，一直找到父级有Canvas为止，得到父级Canvas的order，比如是100，然后加上传入参数，比如传入了1，那么得到的自己的order就是101了。然后先Get自身的Component，看看有没有renderer，如果有，则renderer.sortingOrder来设置renderer的order。如果没有renderer，则应该是UI元素，就给自己AddComponent一个Canvas，把order设置一下就行了。
  我之前说这个方法最多人用，是因为实现简单，也比较的合理，不过这个方法也不是完全没有缺点的。
1、 由于在Canvas下面的子物体又添加了Canvas，会导致原本可以合并渲染的UI元件变得不能合并渲染
2、 如果只是简单的叠一层特效到UI上，问题不大。但如果UI和特效互相叠加的层级多起来之后，维护order会变得复杂，比较容易出错。
3、 Order In Layer只会解决层叠问题，不会提供裁剪效果的，所以如果需要用Mask裁剪，还需要对特效使用的shader做处理，一般的处理方式是在特效上面挂一个C#脚本，不停的获取父级Mask的Rect，然后转换成世界坐标传入给特效使用的材质球的Shader，在Shader上面判断在一定世界坐标范围外的片元就舍弃掉，把Alpha变成0，再Clip掉。

三、 MaskableGraphic

  上一篇文章介绍了怎样在MaskableGraphic上面用UIVertex绘制顶点，模拟粒子的网格渲染。
  实际上MaskableGraphic可以理解成是一个可以渲染任意Mesh网格的图层，除了用UIVertex来逐个粒子计算和绘制，还可以通过BakeMesh，把特效的网格Bake出来，再传到MaskableGraphic里面渲染。
  由于方法太自由，反而很难具体的说明。可以当做Unity提供了一个绘制顶点和三角面的渲染API，自己想画什么就画什么。

四、 用其他方式替代粒子

  这个可以归结为其他方法了。核心思想就是不用粒子系统做特效。
  最常见的是用序列帧替代一些复杂的效果。不过序列帧不适合做面积较大还有细节太多的动画，不然由于帧数太多和单帧太大，会导致容量很大。
  另外一种常见的，是用Animation的方式通过K帧实现。结合部分序列帧，可以实现大部分效果。不过像大面积数量很多的粒子扩散效果，就比较难实现。
  还有比较常见的，是用Spine之类的2D骨骼动画来做特效。这类2D动画插件，一般除了控制骨骼运动以外，还会带有序列帧和流光等常用的功能，可以做出很多动画效果。而Spine是有Unity的UGUI接口的，所以可以正常当Image使用。
  或者是用Shader直接做各种动画效果。这个就比较多样化，通过在Image上面挂一个材质球，然后通过Shader实现过载效果，常用的比如UV动画、用噪声图或者法线图模拟扭曲或者叠加的效果，用黑白模拟闪烁效果，等等，完全可以发挥自己的想象力。包括大量粒子扩散的效果，我也用Shader模拟过。
  以上的这些方法，由于没有使用UI以外的渲染方式，层叠和裁剪一般都不会有问题。但由于不同的效果需要使用的方法不一样，甚至是一个特效要K好多动画和写好几种shader，所以一般的特效师是很难做到的。不过我自己的确是这样做特效的，所以也不妨提出来，算是一种解决的办法。