Skip to content

Instantly share code, notes, and snippets.

@LuizMoratelli
Created August 15, 2024 10:16
Show Gist options
  • Save LuizMoratelli/f3f644ac86217e7dff71e38d29f1e3e3 to your computer and use it in GitHub Desktop.
Save LuizMoratelli/f3f644ac86217e7dff71e38d29f1e3e3 to your computer and use it in GitHub Desktop.

The Problem

When you have sprites/images overlapping and you apply alpha (via CanvasGroup or direct) it allows the color/image behind to mix with the transparent one, displaying this annoying stuff when you have borders, lines, etc.

image

The Solution

1. Create a new Shader

Shader "Custom/CanvasImageMask"
{
    Properties
    {
        [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
        _Color ("Tint", Color) = (1,1,1,1)
        [MaterialToggle(DO_NOT_DRAW)]
        _DoNotDraw ("Do not draw", Float) = 0
    }

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

        Stencil
        {
            Ref 1
            Comp Greater
            Pass Replace
        }

        Cull Off
        Lighting Off
        ZWrite Off
        ZTest [unity_GUIZTestMode]
        Blend SrcAlpha OneMinusSrcAlpha
        ColorMask RGBA

        Pass
        {
        CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma shader_feature DO_NOT_DRAW
            #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 = UnityObjectToClipPos(IN.vertex);
                OUT.texcoord = IN.texcoord;
#ifdef UNITY_HALF_TEXEL_OFFSET
                OUT.vertex.xy += (_ScreenParams.zw-1.0)*float2(-1,1);
#endif
                OUT.color = IN.color * _Color;
                return OUT;
            }

            sampler2D _MainTex;

            fixed4 frag(v2f IN) : SV_Target
            {
                half4 color = tex2D(_MainTex, IN.texcoord) * IN.color;
                clip (color.a - 0.01);
                #ifdef DO_NOT_DRAW
                    color.a = 0;
                #endif
                return color;
            }
        ENDCG
        }
    }
}

2. Create a Material from this shader

image

3. Rearrange sprites so the top ones are placed before in hierarchy

Before: image

After: image

4. Set the new material for top stuff, like the Icon

image

Result

image

Improvements Need (hard to notice on zoom out/gameplay)

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment