【游戏开发实战】Unity粒子在UI界面中的裁切、蒙版、层级问题的解决（ScrollView裁切、Mask蒙版、UI粒子层级关系）

文章目录

一、前言
二、最终效果
三、使用方法
- 1、引入插件dll
- 2、制作粒子特效
- 3、粒子材质球使用UIAdditive.shader
- 4、将粒子摆放在UI节点下
- 5、挂UIParticle组件
- 6、Mask蒙版
四、运行效果
五、结束语
六、附录：UIAdditive.shader源码

一、前言

点关注不迷路，持续输出Unity干货文章。
嗨，大家好，我是新发。
我们在游戏中，可能需要在UI界面中穿插显示粒子特效。
然而当我们在UI上挂粒子，效果却是这样的：

有好几个问题：
1 粒子的层级有问题，我们希望可以很方便且稳定地设置粒子与UI的层级关系；
2 粒子无法被ScrollView裁切，我们希望粒子可以像UI元素一样被ScrollView裁切；
3 粒子无法使用Mask蒙版，我们希望可以使用Mask蒙版来显示粒子特效。
今天，就统统解决掉。

二、最终效果

本文Demo工程已上传到CodeChina，感兴趣的同学可自行下载学习。
地址：https://codechina.csdn.net/linxinfa/ParticleEffectForUGUI
注：我使用的Unity版本：Unity 2020.1.14f1c1 (64-bit)。
另：本文的效果，需要Unity 2018.2+版本以上才可以。

三、使用方法

1、引入插件dll

本文使用了一个插件：Coffee.UIParticle，只需将其dll放到对应目录中即可：
Coffee.UIParticle.Editor.dll放在Editor目录中；
Coffee.UIParticle.dll放在Plugins目录中；

2、制作粒子特效

根据需求制作你的粒子特效。

3、粒子材质球使用UIAdditive.shader

粒子使用的材质球的shader使用UIAdditive.shader。

UIAdditive.shader源码见文章末尾附录。

4、将粒子摆放在UI节点下

粒子特效作为UI的子节点，如下。
根据UGUI的渲染顺序规则，Front Image (Unity-chan)节点因为在粒子特效的下面，所以Front Image (Unity-chan)会显示在粒子特效的上层。

5、挂UIParticle组件

给粒子的父节点挂上UIParticle组件。

通过UIParticle组件可以调整一些属性：

6、Mask蒙版

如果开启了Maskable，只需要给粒子所在的Image父节点挂上Mask组件即可。

四、运行效果

运行Unity，效果如下，粒子特效的渲染与常规的UI对象规则一致，粒子可以被ScrollView裁切，也支持Mask蒙版过滤。

五、结束语

完毕。
喜欢Unity``的同学，不要忘记点击关注，如果有什么Unity```相关的技术难题，也欢迎留言或私信~

六、附录：UIAdditive.shader源码

Shader "UI/Additive"
{Properties{_MainTex ("Sprite Texture", 2D) = "white" {}_Color ("Tint", Color) = (1,1,1,1)_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_ColorMask ("Color Mask", Float) = 15_ClipRect ("Clip Rect", Vector) = (-32767, -32767, 32767, 32767)}SubShader{Tags{ "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" "PreviewType"="Plane""CanUseSpriteAtlas"="True"}Stencil{Ref [_Stencil]Comp [_StencilComp]Pass [_StencilOp] ReadMask [_StencilReadMask]WriteMask [_StencilWriteMask]}Cull OffLighting OffZWrite OffZTest [unity_GUIZTestMode]Fog { Mode Off }Blend One OneColorMask [_ColorMask]Pass{CGPROGRAM#pragma vertex vert#pragma fragment frag#include "UnityCG.cginc"#include "UnityUI.cginc"struct appdata_t{float4 vertex   : POSITION;float4 color    : COLOR;float2 texcoord : TEXCOORD0;};struct v2f{float4 vertex   : SV_POSITION;fixed4 color : COLOR;half2 texcoord  : TEXCOORD0;float4 worldPosition : TEXCOORD1;};fixed4 _Color;sampler2D _MainTex;float4 _MainTex_ST;float4 _ClipRect;v2f vert(appdata_t IN){v2f OUT;OUT.worldPosition = IN.vertex;OUT.vertex = UnityObjectToClipPos(IN.vertex);OUT.texcoord = TRANSFORM_TEX(IN.texcoord, _MainTex);
#ifdef UNITY_HALF_TEXEL_OFFSETOUT.vertex.xy += (_ScreenParams.zw-1.0)*float2(-1,1);
#endifOUT.color = IN.color * _Color;return OUT;}fixed4 frag(v2f IN) : SV_Target{half4 color = tex2D(_MainTex, IN.texcoord) * IN.color;color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);color.rgb *= color.a;
#ifdef UNITY_UI_ALPHACLIPclip (color.a - 0.01);
#endifreturn color;}ENDCG}}
}