Using mask to cut a hole in an image?

Unity Engine
1

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.

4 Likes
2

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

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.

4

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:

if (c.a>0.1) discard; //or c.a>0.5 for smoother edges
1 Like
5

Hey there!

If any one is still interested in a “out of the box” solution for sprite masking, than Sprite Mask is just that what you are looking for :).

Asset Store link: http://u3d.as/aYo

More into: [Released] Sprite Mask - masking system for Unity Sprite - Community Showcases - Unity Discussions

1 Like
6

Mask.shader

Shader "Custom/Mask"
{
    Properties
    {
        [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
        _Color ("Tint", Color) = (1,1,1,1)
        [MaterialToggle] PixelSnap ("Pixel snap", Float) = 0
    }

    SubShader
    {
        Tags
        {
            "Queue"="Transparent-1"
            "IgnoreProjector"="True"
            "RenderType"="Transparent"
            "PreviewType"="Plane"
            "CanUseSpriteAtlas"="True"
        }

        Cull Off
        Lighting Off
        ColorMask 0
        ZWrite Off
        Blend One OneMinusSrcAlpha

        Stencil
        {
            Ref 1
            Comp always
            Pass replace
        }

        Pass
        {
        CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma multi_compile _ PIXELSNAP_ON
            #include "UnityCG.cginc"

            struct appdata_t
            {
                float4 vertex   : POSITION;
                float4 color    : COLOR;
                float2 texcoord : TEXCOORD0;
            };

            struct v2f
            {
                float4 vertex   : SV_POSITION;
                fixed4 color    : COLOR;
                half2 texcoord  : TEXCOORD0;
            };

            fixed4 _Color;

            v2f vert(appdata_t IN)
            {
                v2f OUT;
                OUT.vertex = mul(UNITY_MATRIX_MVP, IN.vertex);
                OUT.texcoord = IN.texcoord;
                OUT.color = IN.color * _Color;
                #ifdef PIXELSNAP_ON
                OUT.vertex = UnityPixelSnap (OUT.vertex);
                #endif

                return OUT;
            }

            sampler2D _MainTex;

            fixed4 frag(v2f IN) : SV_Target
            {
                fixed4 c = tex2D(_MainTex, IN.texcoord) * IN.color;
                if (c.a < 0.1) discard;
                c.rgb *= c.a;
                return c;
            }
        ENDCG
        }
    }
}

Masked.shader

Shader "Custom/Masked"
{
    Properties
    {
        [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
        _Color ("Tint", Color) = (1,1,1,1)
        [MaterialToggle] PixelSnap ("Pixel snap", Float) = 0
    }

    SubShader
    {
        Tags
        {
            "Queue"="Transparent"
            "IgnoreProjector"="True"
            "RenderType"="Transparent"
            "PreviewType"="Plane"
            "CanUseSpriteAtlas"="True"
        }

        Cull Off
        Lighting Off
        ZWrite Off
        Blend One OneMinusSrcAlpha

        Stencil
        {
            Ref 1
            Comp notequal
            Pass keep
        }

        Pass
        {
        CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma multi_compile _ PIXELSNAP_ON
            #include "UnityCG.cginc"

            struct appdata_t
            {
                float4 vertex   : POSITION;
                float4 color    : COLOR;
                float2 texcoord : TEXCOORD0;
            };

            struct v2f
            {
                float4 vertex   : SV_POSITION;
                fixed4 color    : COLOR;
                half2 texcoord  : TEXCOORD0;
            };

            fixed4 _Color;

            v2f vert(appdata_t IN)
            {
                v2f OUT;
                OUT.vertex = mul(UNITY_MATRIX_MVP, IN.vertex);
                OUT.texcoord = IN.texcoord;
                OUT.color = IN.color * _Color;
                #ifdef PIXELSNAP_ON
                OUT.vertex = UnityPixelSnap (OUT.vertex);
                #endif

                return OUT;
            }

            sampler2D _MainTex;

            fixed4 frag(v2f IN) : SV_Target
            {
                fixed4 c = tex2D(_MainTex, IN.texcoord) * IN.color;
                c.rgb *= c.a;
                return c;
            }
        ENDCG
        }
    }
}

20 Likes
7

I know this is really too late. But, really thank you very much. This very helpfull to my other project in future.

1 Like
8

Hi @rakkarage ! I tried it, but it is only working in Editor window not in Game window :frowning:

By the way, I’m using it for Android Game

EDIT:

Anyway, It worked. Just placed my Mask Image before Masked Image in Hierarchy! ;):slight_smile:

3 Likes
9

Awesome! It’s worked for me

1 Like
10

Is there a way to allow clicks on the buttons that are inside “mask” and block clicks on the buttons that are outside?

I disabled the raycast target on the “mask”, but the raycast target from “masked” is blocking the button interaction.

11

Did you find a remedy for this? Or an alternative? Thanks

12

I cant use this shader in a Panel in UI, it only works with 3D

1 Like
13

How to block raycast for this mask?

14

I needed this script for work and it helps a lot, but I noticed people may be having trouble with using raycasts with the shaders.

As a possible solution for your future use, I am handling all UI events in script so I can check that the mouse clicked within the “Mask” image and isn’t outside of the bounds of that canvas item.

Hope this helps!

Edit: I also found this useful script on GitHub that could be repurposed to accept all UI events. UnmaskForUGUI/UnmaskRaycastFilter.cs at main · mob-sakai/UnmaskForUGUI · GitHub

1 Like
15

i know th

is very late to reply but u can use shaders on anything