UGUI粒子遮罩（UI Mask 遮挡粒子）

在Unity中UGUI的Mask遮罩无法对Partice System（粒子）起到直接的作用，于是这里我们使用Shader来实现UI Mask对粒子的遮罩效果。关于粒子显示在同一层两个不同UI之间叠加的问题：

实现方案

首先使用一张image图片，添加mask遮罩，这张图片默认使用的是UI/Default的shader，这里我们替换成UI/MaskDefault的shader，这里贴出源码：

// Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)'Shader "UI/MaskDefault"
{Properties{[PerRendererData] _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[Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0}SubShader{Tags{ "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" "PreviewType"="Plane""CanUseSpriteAtlas"="True"}Cull OffLighting OffZWrite OffZTest [unity_GUIZTestMode]Blend SrcAlpha OneMinusSrcAlphaColorMask 0Stencil{Ref 1Comp AlwaysPass Replace}Pass{CGPROGRAM#pragma vertex vert#pragma fragment frag#include "UnityCG.cginc"#include "UnityUI.cginc"#pragma multi_compile __ UNITY_UI_ALPHACLIPstruct 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;fixed4 _TextureSampleAdd;float4 _ClipRect;v2f vert(appdata_t IN){v2f OUT;OUT.worldPosition = IN.vertex;OUT.vertex = UnityObjectToClipPos(OUT.worldPosition);OUT.texcoord = IN.texcoord;#ifdef UNITY_HALF_TEXEL_OFFSETOUT.vertex.xy += (_ScreenParams.zw-1.0)*float2(-1,1);#endifOUT.color = IN.color * _Color;return OUT;}sampler2D _MainTex;fixed4 frag(v2f IN) : SV_Target{half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);#ifdef UNITY_UI_ALPHACLIPclip (color.a - 0.001);#endifreturn color;}ENDCG}}
}

而对于粒子这方面我们将离子的shader替换成Particles/MaskAdditive，这里给出shader源码：

// Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)'Shader "Particles/MaskAdditive" {Properties {_TintColor ("Tint Color", Color) = (0.5,0.5,0.5,0.5)_MainTex ("Particle Texture", 2D) = "white" {}_InvFade ("Soft Particles Factor", Range(0.01,3.0)) = 1.0
}Category {Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" }Blend SrcAlpha OneColorMask RGBCull Off Lighting Off ZWrite OffSubShader {Stencil {Ref 1Comp equal}Pass {CGPROGRAM#pragma vertex vert#pragma fragment frag#pragma multi_compile_particles#pragma multi_compile_fog#include "UnityCG.cginc"sampler2D _MainTex;fixed4 _TintColor;struct appdata_t {float4 vertex : POSITION;fixed4 color : COLOR;float2 texcoord : TEXCOORD0;};struct v2f {float4 vertex : SV_POSITION;fixed4 color : COLOR;float2 texcoord : TEXCOORD0;UNITY_FOG_COORDS(1)#ifdef SOFTPARTICLES_ONfloat4 projPos : TEXCOORD2;#endif};float4 _MainTex_ST;v2f vert (appdata_t v){v2f o;o.vertex = UnityObjectToClipPos(v.vertex);#ifdef SOFTPARTICLES_ONo.projPos = ComputeScreenPos (o.vertex);COMPUTE_EYEDEPTH(o.projPos.z);#endifo.color = v.color;o.texcoord = TRANSFORM_TEX(v.texcoord,_MainTex);UNITY_TRANSFER_FOG(o,o.vertex);return o;}sampler2D_float _CameraDepthTexture;float _InvFade;fixed4 frag (v2f i) : SV_Target{#ifdef SOFTPARTICLES_ONfloat sceneZ = LinearEyeDepth (SAMPLE_DEPTH_TEXTURE_PROJ(_CameraDepthTexture, UNITY_PROJ_COORD(i.projPos)));float partZ = i.projPos.z;float fade = saturate (_InvFade * (sceneZ-partZ));i.color.a *= fade;#endiffixed4 col = 2.0f * i.color * _TintColor * tex2D(_MainTex, i.texcoord);UNITY_APPLY_FOG_COLOR(i.fogCoord, col, fixed4(0,0,0,0)); // fog towards black due to our blend modereturn col;}ENDCG }}
}
}

我们将粒子放在mask下则可以实现遮罩的效果

案例

我们创建一个ScrollView，ViewPort上的Image的shader替换成上面的MaskDefault，这里不知道怎么替换的直接找到MaskDefault这个shader，右键直接创建个材质球然后赋值给Image就可以了

而对于我们所使用的粒子替换成MaskAdditive即可

参考文章

https://www.jianshu.com/p/7867b69f2dea

UGUI粒子遮罩（UI Mask 遮挡粒子）相关推荐

Unity3d:UGUI，UI与特效粒子层级，2018.2以上版本BakeMesh，粒子在两个Image之间且在ScrollView
ui上面展示粒子一般来说有两种方案 1.通过rendertexture渲染,可以完美处理层级问题,不过性能不好,多个摄像机 2.直接放到ui界面调整特效sort in layer,不过如果ui特效穿插 ...
14.Unity2D 横版粒子系统特效飙血粒子+高处落地粒子+对象池管理所有粒子
主目录https://blog.csdn.net/qq_54263076/category_11900070.html?spm=1001.2014.3001.5482 粒子系统常用属性介绍开始 1. ...
粒子文字特效css,CSS3 粒子效果
css3粒子效果 #topcanvas{position:absolute;background:#fff;z-index:-7;width:300px;height:300px;} function ...
java粒子群优化算法_粒子群优化算法的JAVA实现
说明:算法为了演示功能,所以没有优化,没有异常处理等,仅作演示用. /* * To change this template, choose Tools | Templates * and open ...
Blender雕刻模块：2.81新功能遮罩提取(Mask Extract)
Blender 2.81Alpha 从2.80开始很多雕刻的插件都开始支持通过遮罩进行挤出的功能了,最近的Blender2.81每日版也增加了这个功能,并且结合着重构网格(Remesh)以及锐化遮罩( ...
c语言计算极值范围用粒子最优算法,智能优化算法——粒子群算法小实践
实验六粒子群算法一.实验目的与要求: 目的:通过本次实验,学生可以掌握粒子群算法基本原理.基本粒子群算法流程和关键参数的设置. 要求:上机仿真,调试通过. 二. 实验设备: 计算机.Matlab软 ...
android 矢量粒子动画,iOS CAEmitterLayer实现粒子发射动画效果
iOS实现粒子发射动画效果图动画效果用 CAEmitterLayer 实现.CAEmitterLayer 显示粒子发射动画,具体的粒子由 CAEmitterCell 封装.代码示例是展示 CAEmi ...
Unity3d UGUI 实现底部UI自适应的功能（含工程）
Unity3d UGUI 实现底部UI自适应的功能(含工程) 前言 UI的自适应常常在项目中使用到,特别手游中,不同比例屏幕的手机,如果能考一套UI自适应显示,能省去不少的开发工作量.这里只是浅浅的讨 ...
粒子群算法(8)---混合粒子群算法的实现
混合粒子群算法将全局粒子群算法与局部粒子群算法结合,其速度更新采用公式其中G(k+1)是全局版本的速度更新公式,而L(k+1)是局部版本的速度更新公式,混合粒子群算法采用H(k+1)的公式. 位置更 ...

UGUI粒子遮罩（UI Mask 遮挡粒子）

实现方案

案例

参考文章

UGUI粒子遮罩（UI Mask 遮挡粒子）相关推荐

最新文章

热门文章