Circular Mask

Unity Engine
1

I’m feeling real stupid right now, for something I thought would be super easy…

So i’m trying to make a circle cutout in a rectangular shape. But i’m struggling for some reason.

I was using a mask, but I can’t seem to get it working with a mask.
my heirachy:
UIImage → source: circle

  • Mask Attached
  • UIImage (child) → source: rectangle shape.

Any ideas what i’m doing wrong?

Cheers.

2

Are you trying to make only a circular portion of the rectangle shape show? Or are you trying to hide the circular part of the rectangle? If the first one, the setup you have above should work as far as I know. The second, would require a different mask shape or just an overlay.

3

i’m trying to do a screen transition, so there’s a black image / panel that is always scaled to the size of the screen. And then there’s a circle that scales in and out, this circle should cutout the black image.

I’ve attached a couple mockup images to show you what I mean.

so the circle should cut a hole in the back background

4

So in your previous hierarchy that you referenced, am I right to assume the rectangle shape is the black rectangle and you’re trying to basically cut a hole out of it so the beach scene shows through? If so you’ll have to re-organize things a bit.

What the mask should allow you to do is have only the circle image (mask) portion of the beach scene be shown, while the black area is the background.

So the hierarchy would be:

  • Canvas
    – UI Image (black background) or it could just be your skybox or background color or whatever.
    – UI Image + mask (this holds the circle image)
    – UI Image (child of the mask image, holds the beach scene image)
5

:frowning: no still not there… so the issue is that i’m not trying to mask the beach image, its not a image, it’s a scene… so I need to cutout a transparent hole in the black image. Hope that makes sense?

thanks for your help.

6

seems like it could/should be easier? i guess discard is bad? idk? seems to work… i think/hope they are fixing it up in the 2d alpha

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
        }
    }
}

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
        }
    }
}
1 Like
7

Using ProBuilder, you can create a Sprite or Plane, then Open ProBuilder, and Subdivide Faces. Select faces that you don’t need from the middle and remove them. Then edit vertexes and edges to make the middle part in a circular shape.