Alpha Mask: UI, Sprites, Tilemaps, Particles, 3D

Cool, thanks. Do I understand correctly that everything works as intended now? Did you make this post just to let us know how to improve the plugin? (Which is highly appreciated!)

 

Yes.

Yes. I made this post for people facing the same problem and for you, so that you can fix it in the next release (And I don't have to patch again when I update).

 

HI, I am planing to buy your plugin but I would like to ask. will none transparent Image sections prevent mouse click from passing down or is there any way to implement it with your plugin? Basically I need an UI image overlay with transparent squire/circle and user should be able to click only on those objects above which overlay image is fully transparent. Thanks

 

Thanks for your interest in our plugin! I think you can achieve your goal with the default Unity UI Mask. The elements that use this mask catch clicks where it's not fully transparent and lets them through where it is transparent. If you also need semi-transparency, you can mix our plugin (for visuals) with Unity's Mask (for clicks) by applying them both.

 

Thanks for your reply and suggestion. The default mask has limitation of mask placement (I need a random sized nice sliced hole at random place). If found solution for this - two stencil shaders. So now I can use sprite with your plugin to cover ugly hole, am I right? Or may be I can do it straight with your plugin?

Is there a way to check pixel's alpha where pointer was clicked? If that's way complicated then how can I catch input and pass/interrupt it from my code? That should be possible as images for example, have raycast target property.

Thanks in advance and waiting for your reply

 

I think the workflow you described should work well for you (the stencil shaders and our mask for visuals).

I don't think Unity has a mechanism to check the pixel color for a UI click, and I don't think it would be a simple feature to implement yourself So, I'd suggest to just use the stencil masks for raycast masking and our mask for visual masking. I hope it'll be a good solution for your situation!

 

Thanks, I implemented pixel based input interruption. So now it's time for smooth edges =) Here are my final questions:

1) Can I move and resize sprite which is used as a mask?

Just imagine a membrane with a circle hole in it. I want an ability to resize that circle and move it around =)

2) Can I use Slice mode for sprite which is used as a mask?

Ideally, I want to use re-sizable rounded rectangle as a mask =) The rounded rectangle can be done with Sliced mode.

Thanks for your time

 

Hi there! me again. so ive tried for about a month to figure it out and cant. im an artist not a coder.i feel like it must be something either super simple im missing or too complex im not learning. ive atatched my image again of what im trying to accomplish this time animated to get the point across better. in a 2d side scroll "think megaman" i want, as you progress, some areas to be able to go transparent. meaning multiple masks in one scene but for some reason it only ever works on one area. by the time i get to the second mask area the mask has move so far away! almost like its moving at the wrong proportion as the character. any suggestions?

 

Great!

1) Yes. You can watch the video on the Asset Store and you should see how it works You can actually freely move and rotate it anywhere in the 3D space and you would with a regular object.

2) The Alpha Mask is not a Sprite, so "yes" and "no". You won't be able to just use a sliced sprite out of the box, BUT what you can do is make a white sliced sprite and render it into a Render Texture with a black background. And then use that Render Texture as the Alpha Mask texture. We suggest this option for multi-mask requests (because you can render multiple sprites into one Render Texture and use it as the Mask), but it would be good for your situation, too. There's a sample with a Render Texture in the package if you buy it – we use it for the fog-of-war kind of sample.

 

I'm sorry that you're having trouble Hm... Do you actually need the Alpha Mask at all? Wouldn't it be enough to just fade-in-out the areas than you want to uncover when your character is near them? From the video it looks like this would be what you're looking for.

 

yes! thats exactly what i want!... lol i guess i didnt know having them fade in and out was an option. i was under the impression using the alpha mas was the only way... i have no idea how to do it but i guess ill have to find out. any chance you could point me in the right direction so i know where and what to start looking for and learning? thank you for your time!

 

It depends on what you're using for your visuals Are you using Sprites? If so, you can change the alpha value of the Color on the SpriteRenderer and then use it for fading (of course, you'll need some kind of a simple script or a tween plug-in for it to work, but I hope it's not a problem ). If you're using other kinds of Renderers, let me know.

 

@DominoOne thanks for your reply, the problem is that I have no idea yet, how to do this

"white sliced sprite and render it into a Render Texture with a black background"

I was hoping that your plugin would help me do this

 

Well, there's a sample of using a Render Texture to generate a custom Alpha Mask texture in the samples of the package. So, to start with, all you'd need to do is replace the current sprites with the sliced sprite. Then you can build on top of that I know it's not an out-of-the-box solution, but it's doable.

 

@DominoOne After upgrade to 2018.3 the plugin stopped working. My prefab works in an empty scene, but not the real game scene. Is there anything I can do to give you more information about this?

 

That's weird... Have you tried running the game? What about restarting Unity? I know those are pretty silly questions, but sometimes it's simple as that If that doesn't help, I'll need more info about your scene – or even better, an actual project to test it out in.

 

@sevensails I am not sure if that's the issue in your case but I was using another plugin which also had problem with new prefab system. The issue is that even when you modify something in prefab, system cannot see that changes and since you have activated auto save (by default) it causes issues. I am not sure how plugin of @DominoOne is working but it may relay on that change which is no longer called. Try to disable auto save function, then turn off then on plugin and check if that will help (at least this fixes the issue with saving changes in prefab)

 

Hello!
Please Help, how i can mask group of sprites with tilemap?

Thank you!

Screenshot:

 

Hi! You have to assign a Texture (or anything that inherits from it, eg. RenderTexture), so Tilemaps won't work like that, sorry. However, there are still a few good options for you Firstly, if you only need to mask a rectangular area (as it seems from the screenshot), you can just assign a random quadrangle or rectangle texture as the Mask and then resize it to cover the same area as the Tilemap does. If that's not an option (if the masked area isn't a rectangle in the end), you can create a RenderTexture, render your Tilemap into it in the scene and then use that RenderTexture as the Mask image. There's a sample in the sample scene, which uses a RenderTexture to render multiple Sprites into one image and then applies it as a Mask. It's not a complex setup at all

 

Thanks!
I mean, I didn’t understand the description in the asset store and bought this asset for nothing
I am not experienced in unity, but I think that keeping the entire level in texture is too expensive.

 

Not exactly! You only need the RenderTexture to render the whole screen, not the whole level. Also, it doesn't need to have a full-screen resolution – it can have less pixels than the screen, but still cover the whole screen, and it will still look good enough. And then you can move the camera, which renders into the RenderTexture, along with your main camera.

 

Hi , I'm trying to customize your mask to another shader , I followed the document , but I stuck on step 5 , I can't find “vertex to fragment" in my shader , I know nothing about shader so this might be a dumb question , can you teach me how to do this correctly?

here is the shader I want to change:

Code (CSharp):

1. // Writen by Martin Nerurkar ( www.playful.systems). MIT license (see license.txt)
2. // Based on Unity built-in shader source. Copyright (c) 2016 Unity Technologies. MIT license (see license.txt)
3. // Inspired by HSV Shader for Unity from Gregg Tavares (https://github.com/greggman/hsva-unity). MIT License (see license.txt)
4.  
5. Shader "Sprites/Diffuse-HueShift"
6. {
7.     Properties
8.     {
9.         [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
10.    
11.         [MaterialToggle] PixelSnap ("Pixel snap", Float) = 0
12.         [HideInInspector] _RendererColor ("RendererColor", Color) = (1,1,1,1)
13.         [HideInInspector] _Flip ("Flip", Vector) = (1,1,1,1)
14.         [PerRendererData] _AlphaTex ("External Alpha", 2D) = "white" {}
15.         [PerRendererData] _EnableExternalAlpha ("Enable External Alpha", Float) = 0
16.  
17.         [HideInInspector] _HueRangeMin("Min Hue Range", Range(0, 1)) = 0
18.         [HideInInspector] _HueRangeMax("Max Hue Range", Range(0, 1)) = 1
19.     }
20.  
21.     SubShader
22.     {
23.         Tags
24.         {
25.             "Queue"="Transparent"
26.             "IgnoreProjector"="True"
27.             "RenderType"="Transparent"
28.             "PreviewType"="Plane"
29.             "CanUseSpriteAtlas"="True"
30.         }
31.  
32.         Cull Off
33.         Lighting Off
34.         ZWrite Off
35.         Blend One OneMinusSrcAlpha
36.  
37.         CGPROGRAM
38.         #pragma surface surf Lambert vertex:vert nofog nolightmap nodynlightmap keepalpha noinstancing
39.         #pragma multi_compile _ PIXELSNAP_ON
40.         #pragma multi_compile _ ETC1_EXTERNAL_ALPHA
41.         #pragma multi_compile __ PS_HSV_ALPHAMASK_ON
42.         #pragma multi_compile __ PS_HSV_HUERANGE_ON
43.         #include "UnitySprites.cginc"
44.         #include "HueShift.cginc"
45.  
46.         struct Input
47.         {
48.             float2 uv_MainTex;
49.             fixed4 color;
50.         };
51.  
52.         float _HueRangeMin;
53.         float _HueRangeMax;
54.  
55.         void vert (inout appdata_full v, out Input o)
56.         {
57.             v.vertex.xy *= _Flip.xy;
58.  
59.             #if defined(PIXELSNAP_ON)
60.             v.vertex = UnityPixelSnap (v.vertex);
61.             #endif
62.  
63.             UNITY_INITIALIZE_OUTPUT(Input, o);
64.             o.color = v.color * _RendererColor;
65.         }
66.  
67.         void surf (Input IN, inout SurfaceOutput o)
68.         {
69.             fixed4 c = applyHSV(SampleSpriteTexture (IN.uv_MainTex), IN.color, _HueRangeMin, _HueRangeMax);
70.             o.Albedo = c.rgb * c.a;
71.             o.Alpha = c.a;
72.         }
73.         ENDCG
74.     }
75.  
76.     CustomEditor "HueShiftMaterialInspector"
77.     Fallback "Transparent/VertexLit"
78. }
79.  

 

Hi. Sorry for a late reply, I was away for a few days Firstly, make sure that you're following the "Integration with custom transparent surface shaders" section (not "Integration with custom transparent vertex/fragment shaders"). Also make sure that you don't miss any steps or lines (if you're already at step 5, you seem to have missed a few). And to answer your question, you need "the struct that will be transferred from vertex to surface function", which is "struct Input" in this case (see how the vertex function outputs it "out Input o" and the surface function inputs the same struct "Input IN"). Hope that helps! Let me know if you're still having trouble with the integration.

 

HI , thanks for reply , it seems going well when I followed the "Integration with custom transparent surface shaders" section , but in the end I got a error message "redefinition of '_AlphaTex'" , I tried to find out what it is , I thought it's because 2 "_AlphaTex" in my Properties , but even I delete one or both , error still .

so I'm stuck again with my limited skills , sorry I'm so noob about this , am I doing wrong ?

here is my error message and the shader code I've modified.

error message:
redefinition of '_AlphaTex'
Property (_AlphaTex) already exists. Use SetTexture instead.
Shader error in 'Sprites/Diffuse-HueShift': redefinition of '_AlphaTex' at UnitySprites.cginc(72) (on d3d11)

Code (CSharp):

1. // Writen by Martin Nerurkar ( www.playful.systems). MIT license (see license.txt)
2. // Based on Unity built-in shader source. Copyright (c) 2016 Unity Technologies. MIT license (see license.txt)
3. // Inspired by HSV Shader for Unity from Gregg Tavares (https://github.com/greggman/hsva-unity). MIT License (see license.txt)
4.  
5. Shader "Sprites/Diffuse-HueShift"
6. {
7.     Properties
8.     {
9.         [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
10.    
11.         [MaterialToggle] PixelSnap ("Pixel snap", Float) = 0
12.         [HideInInspector] _RendererColor ("RendererColor", Color) = (1,1,1,1)
13.         [HideInInspector] _Flip ("Flip", Vector) = (1,1,1,1)
14.         [PerRendererData] _AlphaTex ("External Alpha", 2D) = "white" {}
15.         [PerRendererData] _EnableExternalAlpha ("Enable External Alpha", Float) = 0
16.  
17.         [HideInInspector] _HueRangeMin("Min Hue Range", Range(0, 1)) = 0
18.         [HideInInspector] _HueRangeMax("Max Hue Range", Range(0, 1)) = 1
19.  
20.         [HideInInspector][PerRendererData][Toggle] _Enabled("Mask Enabled", Float) = 1
21.         [HideInInspector][PerRendererData][Toggle] _ClampHoriz("Clamp Alpha Horizontally", Float) = 0
22.         [HideInInspector][PerRendererData][Toggle] _ClampVert("Clamp Alpha Vertically", Float) = 0
23.         [HideInInspector][PerRendererData][Toggle] _UseAlphaChannel("Use Mask Alpha Channel (not RGB)", Float) = 0
24.         [HideInInspector][PerRendererData][Toggle] _ScreenSpaceUI ("Is this screen space ui element?", Float) = 0
25.         [HideInInspector][PerRendererData]_AlphaTex("Alpha Mask", 2D) = "white" {}
26.         [HideInInspector][PerRendererData]_ClampBorder("Clamping Border", Float) = 0.01
27.     }
28.  
29.     SubShader
30.     {
31.         Tags
32.         {
33.             "Queue"="Transparent"
34.             "IgnoreProjector"="True"
35.             "RenderType"="Transparent"
36.             "PreviewType"="Plane"
37.             "CanUseSpriteAtlas"="True"
38.             "ToJMasked" = "True"
39.         }
40.  
41.         Cull Off
42.         Lighting Off
43.         ZWrite Off
44.         Blend One OneMinusSrcAlpha
45.  
46.         CGPROGRAM
47.         #pragma surface surf Lambert vertex:vert nofog nolightmap nodynlightmap keepalpha noinstancing
48.         #pragma multi_compile _ PIXELSNAP_ON
49.         #pragma multi_compile _ ETC1_EXTERNAL_ALPHA
50.         #pragma multi_compile __ PS_HSV_ALPHAMASK_ON
51.         #pragma multi_compile __ PS_HSV_HUERANGE_ON
52.         #include "Assets/Alpha Masking/ToJAlphaMasking.cginc"
53.         #include "UnitySprites.cginc"
54.         #include "HueShift.cginc"
55.  
56.         struct Input
57.         {
58.             float2 uv_MainTex;
59.             fixed4 color;
60.             float2 tojAlphaUV;
61.         };
62.  
63.         float _HueRangeMin;
64.         float _HueRangeMax;
65.  
66.         void vert (inout appdata_full v, out Input o)
67.         {
68.             v.vertex.xy *= _Flip.xy;
69.  
70.             #if defined(PIXELSNAP_ON)
71.             v.vertex = UnityPixelSnap (v.vertex);
72.             #endif
73.  
74.             UNITY_INITIALIZE_OUTPUT(Input, o);
75.             o.color = v.color * _RendererColor;
76.             TOJ_TRANSFER_MASK(o, v);
77.         }
78.  
79.         void surf (Input IN, inout SurfaceOutput o)
80.         {
81.             fixed4 c = applyHSV(SampleSpriteTexture (IN.uv_MainTex), IN.color, _HueRangeMin, _HueRangeMax);
82.             o.Albedo = c.rgb * c.a;
83.             o.Alpha = c.a;
84.             TOJ_APPLY_MASK(IN, c.a);
85.         }
86.         ENDCG
87.     }
88.  
89.     CustomEditor "HueShiftMaterialInspector"
90.     Fallback "Transparent/VertexLit"
91. }
92.  

 

That's an interesting issue, which we haven't encountered before. But it's absolutely logical. Since your shader includes "UnitySprites.cginc" and our "ToJAlphaMasking.cginc", they both have _AlphaTex defined as a variable inside (not only the property, but a variable inside the shader, too) :/ I suppose we'll have to fix this on our side. Write me a private message and I'll send you an edited package with the variable name edited. We'll make an update with this change too, but it will require more time before it becomes public.

 

Hi, I've started a conversation to you , will it do ? or what should I do to send a private message?

 

Yes, I'll send you the package when it's ready Thanks!

 

How to make it with mask?

 

Could you elaborate a bit? The sample described in the cited post uses our Alpha Mask, so please let me know what you mean.

 

I need 1~2 holes in ugui image, use for tutorial background, and with soft edge.

 

For 1 hole it's very simple – you could just follow my instructions that you cited yourself in your first post But if you need 2 (or more) holes, there will be a couple additional steps involved. You will need to use a RenderTexture as the Mask image and render your holes into it. There's a sample in the sample scene, which does basically what you're looking for (makes 2 holes in a black overlay):

https://assetstorev1-prd-cdn.unity3...184252-019f-4d55-89bc-8eae4517500d_scaled.jpg

Although, for this to work you'll probably have to use a world space canvas (I'd almost always recommend using it anyway, so it shouldn't be a problem). Let me know if you try to follow the sample and run into trouble during the process

 

Are nested masks supposed to work?
Imagine the following: The UI (UGUI) contains a vertical ScrollRect which contains a horizontal ScrollRect. The vertical ScrollRect should be alpha masked, the horizontal ScrollRect should just be cut off. I.e. both ScrollRects should be masked.
It's working well on the vertical ScrollRect (the outer one) but the embedded horizontal ScrollRect isn't masked. Hence the question if nested masked are supported.

Thanks for your help,
Michael.

 

Our plugin only supports nested masks by using a RenderTexture, rendering those multiple masks into a single one and then applying that aggregated mask to all elements. There's a sample of using a RenderTexture to merge multiple masks in the sample scene.

However, you mentioned that the horizontal ScrollRect should simply cut off, which means that you can use the default Unity (hard edge) Mask for that, and then use our Alpha Mask for the vertical ScrollRect. Our Mask works with the default Unity Mask that way without a problem

 

Thank you for your quick reply!
Unity's default mask stopped working after enabling Alpha Mask, hence the question. (Btw, it happened with Unity 2018.3.9, the default rendering pipeline and both AlphaMask and RectMask2D applied to UI Panels.) I'll take a look at the RenderTexture approach. These are pretty simple to implement.
Again, thank you,
Michael.

 

Ah, that's very interesting. Rect Mask 2D seems to fail (we'll investigate that), but Mask (the other default Unity UI mask) works. Can you use that one instead?

 

I guess that would work. However, I had to remove the alpha map because it didn't fit our UI. Very nice asset anyway. Thanks for providing it.

 

Hi, DominoOne. I am currently finding a UI mask that is better than the official UI mask and stencil buffer. I am currently working for a visual scripting app project in Unity. The blocks in the app will look like a jigsaw piece which there will be jigsaw holes inside the blocks. Since there will be different size of blocks, the holes shouldn't be scalable along with the block. Therefore, I decided to use mask to make the hole so I could scale the block to the right size before I put the hole on it. However, Unity UI mask was so limited that only parent can mask children but not children masking the parent. If I use stencil buffer in default shader, there is a limit of only 8 masks in total, but there can be more than 8 blocks on the screen. If the blocks' materials have the same read and write mask number. The mask on top will just mask through all blocks behind. I hope this asset can overcome those limitations of the Unity default mask, so here are two questions:

1. Are there options to select so the mask from this asset can mask on specific objects (whatever parent, child or other objects outside the relation), and not only children?
2. Is there number of limits of mask like the Unity stencil buffer? I don't want the mask just mask through every masked objects behind like the stencil buffer did...

 

Sorry for the delay in replying! Let me try to answer your questions:

1. Our mask actually masks siblings (and their children). So, it's almost the same as the Unity's mask, except that the mask doesn't need to be a parent, but can be a sibling in the hierarchy. But it wouldn't be that hard for you to edit the script, so that you can have a public array of masked elements instead of it detecting them automatically.
2. Hm... I'm not sure what you mean in this question, sorry Can you rephrase the question? Maybe this answers your question: there is no limit how many alpha masks you can have in the scene, but you can only apply one mask to a visual element.

 

I just clicked "apply mask to siblings in hierarchy" and it screwed up ALL my gameobjects. Now they're all white. How do I fix this?

Also how do I apply this mask to a scroll viewport so it just hides 3d objects outside the viewport?

 

Hi! I've just replied to your e-mail. Let's try to figure this out.

 

Hello, I bought the plugin today.

It didn't work at all on Unity 2018.3, even your sample scene.
Is there a way to fix this ?

 

@sevensails have you done it working ?
Did you solve your problem ?

 

That's not good, we have to solve this It's super strange, though. I just tested it on Unity 2019.1.3, and it works perfectly. Could you send me a sample project, where it doesn't work and write me, which specific version you're using (with all the numbers and letters)? It could possibly be clashing with other plugins. Are you using any?

 

Hello again, I solved this yesterday.
In fact, and I don't know why because since then it works perfectly,the first time I clicked on "apply to all siblings" it didn't change the shader of other game objects.
After comparing your sample scene and mine, I manually changed it.
Moreover, I had a layer problem which is fine now.

Thank you.

 

Oh and another question,
Is it possible to have those siblings being in a shader/diffuse mode for lightning ? It seems that the shader must be "Alpha masked - world coords" but I want that to be sprites/diffuse too...

 

Glad it works now! You can actually integrate the Alpha Masking into any shader. You could grab the sprites/diffuse shader from the Unity's shader package and then follow the instructions in the Alpha Mask documentation to integrate it. I know it might be a little tricky sometimes, but I'm here to help if you run into questions while following the instructions

 

I have a raw image that contains a render texture, a camera renders to that render texture. This is a minimap. I bought your asset so that I could alpha mask the map to look something like this, see the bottom left corner the map is masked but with a faded effect I was using a normal unity mask and masked it but I was asked to make that fade effect. I have bought your asset, I am unclear on how to achieve this. I do hope it's possible.
Raw Image needs to be masked


Thank you

 

I've just replied to your e-mail! It's actually pretty straightforward and there's a sample in the sample scene to show you how this works. More details in the e-mail I've just sent

 

@DominoOne Does this asset works with the Universal Render Pipeline?
I have some MeshRenderer Quad that I want to mask. It has UniversalRenderPipeline/Unlit shader, and SurfaceType: Transparent.

If it does I will buy it.
If it doesn't, I will really appreciate you let me know before buying.
Thanks!
Pablo.

 

Hi @DominoOne

I'm hoping to use this in my project now and I need to know how to set up mask for SpriteRenderer which has other material than Sprite-Default . There is a custom material which has UV animation ( created in Shadero Sprite > unfortunately I can't edit it in Shadero's editor ). Is there a way to combine this custom material with Sprites-Alpha-Mask-WorldCoords ?

Thanks,
Wojciech