Unity UI - Applying mask to individual sprites instead of entire texture
<p>I am trying to apply mask to sprites cut out from a large texture (sprite mode "multiple") that are to be used in the UnityEngine.UI.Image component and so far the results are unsatisfactory.</p>

<p>Here is the shader that I am using, which I copied it off <a href="http://answers.unity3d.com/questions/942614/aliasing-when-using-ui-mask.html" rel="nofollow noreferrer">here</a>. </p>

<pre><code>Shader "UI/Mask"
{
    Properties
    {
        [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
        _MaskTex ("Mask Texture", 2D) = "white" {}
        _Color ("Tint", Color) = (1,1,1,1)

        _StencilComp ("Stencil Comparison", Float) = 8
        _Stencil ("Stencil ID", Float) = 0
        _StencilOp ("Stencil Operation", Float) = 0
        _StencilWriteMask ("Stencil Write Mask", Float) = 255
        _StencilReadMask ("Stencil Read Mask", Float) = 255

        _ColorMask ("Color Mask", Float) = 15
    }

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

        Stencil
        {
            Ref [_Stencil]
            Comp [_StencilComp]
            Pass [_StencilOp] 
            ReadMask [_StencilReadMask]
            WriteMask [_StencilWriteMask]
        }

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

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #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;
                #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;
            sampler2D _MaskTex;

            fixed4 frag(v2f IN) : SV_Target
            {
                half4 color = tex2D(_MainTex, IN.texcoord) * IN.color;
                half4 mask = tex2D(_MaskTex, IN.texcoord);

                color.a *= mask.r;
                clip (color.a - 0.01);
                return color;
            }
            ENDCG
        }
    }
}
</code></pre>

<p>I have a strip of texture, which I cut into individual sprites. The following image shows the first two icons, stored in the same PNG.</p>

<p><a href="https://i.stack.imgur.com/SzMbQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SzMbQ.png" alt="Icons put inside a main texture"></a></p>

<p>And next, I follow the instructions on the answer of the <a href="http://answers.unity3d.com/questions/942614/aliasing-when-using-ui-mask.html" rel="nofollow noreferrer">link</a> and prepared a mask PNG, which is simply a black bordered circle with 128 pixels in radius.</p>

<p><a href="https://i.stack.imgur.com/dod0f.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dod0f.png" alt="circle-256.png"></a></p>

<p>The material is then prepared...</p>

<p><a href="https://i.stack.imgur.com/QggaH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QggaH.png" alt="Material prepared"></a></p>

<p>and applied.</p>

<p><a href="https://i.stack.imgur.com/q4WFL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q4WFL.png" alt="Material applied"></a></p>

<p>And here is what I've got:</p>

<p><a href="https://i.stack.imgur.com/ANHh5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ANHh5.png" alt="enter image description here"></a></p>

<p>I regret that I have no knowledge about shaders so I don't know if I'm describing the problem properly... but apparently, the circle mask is squashed/stretched and applied to the long strip of texture, rather than applied to the individual icons that are cut out.</p>

<p>In other words, the full strip looks like this:</p>

<p><a href="https://i.stack.imgur.com/WiifC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WiifC.png" alt="Full strip"></a></p>

<p>But Unity is doing this:</p>

<p><a href="https://i.stack.imgur.com/yop1k.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yop1k.png" alt="Imaginary effect of what Unity&#39;s doing"></a></p>

<p>And then it cuts out each icon from the incorrectly masked texture for me to use.</p>

<p>What can be done to the shader to make it mask properly? So I should be seeing something like this:</p>

<p><a href="https://i.stack.imgur.com/Bx5kF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Bx5kF.png" alt="Desired effect"></a></p>

<p>Or there is no simple way as this is how materials are supposed to work so I have to give Unity separate textures instead of storing all icons in one long strip?</p>