1. We've introduced thread tags, search within a thread and similar thread search. Read more here.
    Dismiss Notice
  2. Learn how you'll soon be able to publish your games to China in four simple steps with Xiaomi. Sign up now for early access.
    Dismiss Notice
  3. Get further faster with the Unity Plus Accelerator Pack, free for new Unity Plus subscribers for a limited time. Click here for more details.
    Dismiss Notice
  4. We've released our first Timeline Experimental Preview, our new tool for creating cutscenes and more! To check it out click here.
    Dismiss Notice
  5. Unity 5.5 is now released.
    Dismiss Notice
  6. Check out all the fixes for 5.5 in patch releases 1 & 2.
    Dismiss Notice
  7. Unity 5.6 beta is now available for download.
    Dismiss Notice

Using mask to cut a hole in an image?

Discussion in 'Unity UI' started by andrew-fray, Dec 19, 2014.

  1. andrew-fray

    andrew-fray

    Joined:
    Jul 19, 2012
    Posts:
    90
    For my game's tutorial, I'd like to put a dark semi-transparent overlay across the whole screen, except for a hole around the UI element I'm currently talking about.

    I could do this using several semi-transparent rectangular images and a "hole" image arranged such that it looked like one overlay with a hole cut in it.

    |_____|
    |_|O|_|
    |_____|


    (forgive my programmer art)

    However, is it possible to reverse the Mask component somehow, so that I have a single rectangular overlay, and an inverted hole image that's used to cut out a hole? That would be a lot easier to reposition as I move around the UI.
     
    rganeyev and rakkarage like this.
  2. andrew-fray

    andrew-fray

    Joined:
    Jul 19, 2012
    Posts:
    90
    I ended up anchoring very large flaps to each side of my central hole image. Now I can reposition easily, but it's not as neat having a single full-screen graphic will a hole cut out!
     
  3. ibyte

    ibyte

    Joined:
    Aug 14, 2009
    Posts:
    764
    Andrew, can you just not invert your mask image? I tried it and I think that should do what you want. Make sure show mask graphic is checked.
     
    Last edited: Dec 19, 2014
  4. Senshi

    Senshi

    Joined:
    Oct 3, 2010
    Posts:
    499
    There is a sprite clipping script here that I personally use to achieve a "mask by children" effect. However, perhaps you could refit it for your purposes by changing which pixels to discard? I.e.: Change mask.cs, line 76 to:

    Code (csharp):
    1. if (c.a>0.1) discard; //or c.a>0.5 for smoother edges
     
    rakkarage likes this.
  5. PoL231

    PoL231

    Joined:
    Jun 27, 2014
    Posts:
    128
    Simplexws likes this.
  6. rakkarage

    rakkarage

    Joined:
    Feb 3, 2014
    Posts:
    502


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

    hophoppoppop

    Joined:
    Dec 27, 2014
    Posts:
    12
    I know this is really too late. But, really thank you very much. This very helpfull to my other project in future.