Canvas Particles Masking

Hey,
In unity 2017 there is the option to use Sprites to mask particle systems and that is very useful. I need to use this feature with the UI mask component. I got it to work easily yesterday, but for x reason I cannot make it work again today....

What I do:

• Have a Screen Space - Camera canvas
• Create an image
• add a mask component to it
• Disable the show Mask Graphic option
• Create a particle system
• Set it as child of the mask GameObject
• Set the Masking option to Visible Inside Mask

From there, the particles should be visible only inside the mask, but they are not visible at all. Even the gameobject that was working with this system yesterday is not working anymore today, can't find why...

Any clues?
Thanks!

 

I found a way to make it work again, but not very usable. Turns out that when I create the whole thing while in play mode it works, but the same thing created before I hit play doesn't. The system created in play mode stops working if I disable / enable it back though...

 

Ok I filled a bug report for it ( Case 972273 ), also I managed to find a way to make it work not in play mode too, but it stops working as soon as I hit play.

 

Not sure if anyone still has problem trying to achieve this but I managed to have it work and I want to share what I did.
The setup is normal, like YanVerde did at the #1 post, but I assigned a mask material to the UI mask object (for instance I use an image). I think the material did the trick, here is its shader script:

Code (csharp):

1.  
2. Shader "Sprites/SpriteMask"
3. {
4.     Properties
5.     {
6.         [PerRendererData] _MainTex("Sprite Texture", 2D) = "white" {}
7.     _Color("Tint", Color) = (1,1,1,1)
8.         [MaterialToggle] PixelSnap("Pixel snap", Float) = 0
9.     }
10.  
11.         SubShader
12.     {
13.         Tags
14.     {
15.         "Queue" = "Transparent"
16.         "IgnoreProjector" = "True"
17.         "RenderType" = "Transparent"
18.         "PreviewType" = "Plane"
19.         "CanUseSpriteAtlas" = "True"
20.     }
21.  
22.         Cull Off
23.         Lighting Off
24.         ZWrite Off
25.         Fog{ Mode Off }
26.         Blend One OneMinusSrcAlpha
27.  
28.         Pass
29.     {
30.         Stencil{
31.         Ref 2
32.         Comp always
33.         //Pass replace
34.         Pass replace
35.     }
36.  
37.         CGPROGRAM
38. #pragma vertex vert
39. #pragma fragment frag
40. #pragma multi_compile DUMMY PIXELSNAP_ON
41. #include "UnityCG.cginc"
42.  
43.         struct appdata_t
44.     {
45.         float4 vertex   : POSITION;
46.         float4 color    : COLOR;
47.         float2 texcoord : TEXCOORD0;
48.     };
49.  
50.     struct v2f
51.     {
52.         float4 vertex   : SV_POSITION;
53.         fixed4 color : COLOR;
54.         half2 texcoord  : TEXCOORD0;
55.     };
56.  
57.     fixed4 _Color;
58.  
59.     v2f vert(appdata_t IN)
60.     {
61.         v2f OUT;
62.         OUT.vertex = UnityObjectToClipPos(IN.vertex);
63.         OUT.texcoord = IN.texcoord;
64.         OUT.color = IN.color * _Color;
65. #ifdef PIXELSNAP_ON
66.         OUT.vertex = UnityPixelSnap(OUT.vertex);
67. #endif
68.  
69.         return OUT;
70.     }
71.  
72.     sampler2D _MainTex;
73.  
74.     fixed4 frag(v2f IN) : SV_Target
75.     {
76.         fixed4 c = tex2D(_MainTex, IN.texcoord) * IN.color;
77.     c.rgb *= c.a;
78.  
79.     if (c.a < 0.1)
80.         discard;
81.  
82.     return c;
83.     }
84.         ENDCG
85.     }
86.     }
87. }

However the shader is for another purpose (it's from an old project of mine) so if you care to use it, please be aware of any side effects about masking.

 

Have you tried to render mask image in screen space into some kind of texture and reuse it in shader for particles? It works very well and you can use even low res texture to achieve good effects.
I made something similar in my UI Particle System tool and it works very well (check from 49s):

 

any existing way to crop particleSystem sprites like this in 5.6 ?
or do I write my own shader ?

 

I'll need to check if it works for 5.6 in next week (from my knowledge there's nothing special used from 2017, but as I said needs to be checked)

 

I've just checked on Unity 5.6.5p4 and plugin works without any changes or problems.

 

Is there any updates on this? I have a particle I want to render inside a UI image and having a mask component in a image didn't work and adding a sprite mask didn't auto adjust to the same size, any ideas?

 

I need that the mask adapt to different resolutions like the UI does, do you know if with this is possible? and is the performance good enough for mobile?

 

Also I don't understand why the normal mask doesn't work, I assume it writes to the stencil buffer, but I tried to use a custom shader on a particle that compares with ref 1 and didn't work. It will be great if I can just use the UI mask as it is exactly what I need it, or a way to make the image of the SpriteMask to auto adjust to the UI panel it could work too

 

This was perfect! Works like a charm! Normal Mask works perfectly with this plugin, just had to change particle material shader to UI/Additive and that's it.

 

I also have the same problem on unity 2019.3.0f6
If you create the mask for the first time it works properly. But as soon as you hit play or disable and re-enable the mask it won't work anymore.
Is there any workaround except creating mask in runtime to fix this?

 

Maybe try this plugin? https://github.com/mob-sakai/ParticleEffectForUGUI

 

Hi how did you use it ? Instructions on their page are close to non existant. Could you describe your case and how you fixed it.
Thanks!

 

Brilliant , your solution worked for me , many thanks

 

just had to change particle material shader to UI/Additive and that's it.

Thanks !

 

Using a sprite mask that matches the canvas size, you can mask a canvas with a world camera. Scale can be used to fit this and I recommend using a sprite renderer to help visually fit the same size. To match your sprite mask range, set the particle system to mask inside with the correct layer and order values.

With override sorting, you can sort the canvas elements above and below the particle effects by Canvas components.

It's also possible to use custom shaders without using the sprite mask too. For most, this is much easier.

Plugins are not required to achieve what is needed with the above most rely on render textures and this is ideally not used to achieve this result imo.