Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Circular Mask

Discussion in 'UGUI & TextMesh Pro' started by smitchell, Jun 27, 2015.

  1. smitchell

    smitchell

    Joined:
    Mar 12, 2012
    Posts:
    702
    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. OldManAnimal

    OldManAnimal

    Joined:
    Jul 10, 2014
    Posts:
    45
    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. smitchell

    smitchell

    Joined:
    Mar 12, 2012
    Posts:
    702
    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. OldManAnimal

    OldManAnimal

    Joined:
    Jul 10, 2014
    Posts:
    45
    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. smitchell

    smitchell

    Joined:
    Mar 12, 2012
    Posts:
    702

    :( 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. rakkarage

    rakkarage

    Joined:
    Feb 3, 2014
    Posts:
    683
    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



    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.  
    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.  
     
    Rispat-Momit likes this.
  7. kenorbik

    kenorbik

    Joined:
    Jan 9, 2023
    Posts:
    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.