Search Unity

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

Discussion in 'Assets and Asset Store' started by DominoOne, Feb 16, 2015.

  1. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    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!) :)
     
  2. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    671
    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). ;)
     
    DominoOne likes this.
  3. andrew_pearce_

    andrew_pearce_

    Joined:
    Nov 5, 2018
    Posts:
    50
    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
     
  4. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    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.
     
  5. andrew_pearce_

    andrew_pearce_

    Joined:
    Nov 5, 2018
    Posts:
    50
    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
     
  6. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    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!
     
    andrew_pearce_ likes this.
  7. andrew_pearce_

    andrew_pearce_

    Joined:
    Nov 5, 2018
    Posts:
    50
    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
     
  8. Betzalel

    Betzalel

    Joined:
    Dec 3, 2017
    Posts:
    15
    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?
     

    Attached Files:

  9. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    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.
     
  10. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    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.
     
  11. Betzalel

    Betzalel

    Joined:
    Dec 3, 2017
    Posts:
    15
    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!
     
  12. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    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.
     
  13. andrew_pearce_

    andrew_pearce_

    Joined:
    Nov 5, 2018
    Posts:
    50
    @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
     
  14. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    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.
     
  15. sevensails

    sevensails

    Joined:
    Aug 22, 2013
    Posts:
    483
    @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?
     
  16. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    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.
     
  17. andrew_pearce_

    andrew_pearce_

    Joined:
    Nov 5, 2018
    Posts:
    50
    @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)
     
  18. feelgoodru

    feelgoodru

    Joined:
    Jan 28, 2019
    Posts:
    2
    Hello!
    Please Help, how i can mask group of sprites with tilemap?

    Thank you!

    Screenshot:
     
    Last edited: Feb 8, 2019
  19. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    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 :)
     
  20. feelgoodru

    feelgoodru

    Joined:
    Jan 28, 2019
    Posts:
    2
    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.
     
  21. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    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.
     
  22. zilapos

    zilapos

    Joined:
    May 11, 2015
    Posts:
    3
    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.  
     
  23. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    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.
     
    zilapos likes this.
  24. zilapos

    zilapos

    Joined:
    May 11, 2015
    Posts:
    3
    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.  
     
  25. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    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.
     
    zilapos likes this.
  26. zilapos

    zilapos

    Joined:
    May 11, 2015
    Posts:
    3
    Hi, I've started a conversation to you , will it do ? or what should I do to send a private message?
     
  27. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    Yes, I'll send you the package when it's ready :) Thanks!
     
  28. ganquan109

    ganquan109

    Joined:
    Jan 20, 2015
    Posts:
    11

    How to make it with mask?
     
  29. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    Could you elaborate a bit? :) The sample described in the cited post uses our Alpha Mask, so please let me know what you mean.
     
  30. ganquan109

    ganquan109

    Joined:
    Jan 20, 2015
    Posts:
    11
    I need 1~2 holes in ugui image, use for tutorial background, and with soft edge.
     

    Attached Files:

  31. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    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 :)
     
  32. Nananaaa

    Nananaaa

    Joined:
    Jul 24, 2016
    Posts:
    20
    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.
     
  33. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    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 :)
     
  34. Nananaaa

    Nananaaa

    Joined:
    Jul 24, 2016
    Posts:
    20
    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.
     
  35. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    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?
     
  36. Nananaaa

    Nananaaa

    Joined:
    Jul 24, 2016
    Posts:
    20
    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.
     
    DominoOne likes this.
  37. ysleungrockman

    ysleungrockman

    Joined:
    Mar 16, 2014
    Posts:
    16
    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...
     
  38. DominoOne

    DominoOne

    Joined:
    Apr 22, 2010
    Posts:
    413
    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.