title: Unity UI - Applying mask to individual sprites instead of entire texture
body: <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>