title: Smoothing pixels on Unity's Images component using a customized Default UI shader
body: <p>I'm looking to create a fade in/fade out effect for UI images using a customized shader.</p>
  
  <p>Right now I'm working with this code:</p>
  
  <pre><code>// Unity built-in shader source. Copyright (c) 2016 Unity Technologies. MIT 
  license (see license.txt)
  
  Shader "Custom/FadeShader"
  {
      Properties
      {
      [PerRendererData] _MainTex("Sprite Texture", 2D) = "white" {}
      [PerRendererData] _Cutoff("Cutoff", Range(0, 1)) = 0
      _Color("Tint", Color) = (1,1,1,1)
  
      _TransitionTex("Transition Texture", 2D) = "white" {}
  
      _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
  
      [Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip("Use Alpha Clip", Float) = 0
      }
  
      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
          {
              Name "Default"
          CGPROGRAM
              #pragma vertex vert
              #pragma fragment frag
              #pragma target 2.0
  
              #include "UnityCG.cginc"
              #include "UnityUI.cginc"
  
              #pragma multi_compile_local _ UNITY_UI_CLIP_RECT
              #pragma multi_compile_local _ UNITY_UI_ALPHACLIP
  
              struct appdata_t
              {
                  float4 vertex   : POSITION;
                  float4 color    : COLOR;
                  float2 texcoord : TEXCOORD0;
                  UNITY_VERTEX_INPUT_INSTANCE_ID
              };
  
              struct v2f
              {
                  float4 vertex   : SV_POSITION;
                  fixed4 color : COLOR;
                  float2 texcoord  : TEXCOORD0;
                  float4 worldPosition : TEXCOORD1;
                  UNITY_VERTEX_OUTPUT_STEREO
              };
  
              sampler2D _MainTex;
              fixed4 _Color;
              fixed4 _TextureSampleAdd;
              float4 _ClipRect;
              float4 _MainTex_ST;
  
              sampler2D _TransitionTex;
              float _Cutoff;
  
              v2f vert(appdata_t v)
              {
                  v2f OUT;
                  UNITY_SETUP_INSTANCE_ID(v);
                  UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
                  OUT.worldPosition = v.vertex;
                  OUT.vertex = UnityObjectToClipPos(OUT.worldPosition);
  
                  OUT.texcoord = TRANSFORM_TEX(v.texcoord, _MainTex);
  
                  OUT.color = v.color * _Color;
                  return OUT;
              }
  
              fixed4 frag(v2f IN) : SV_Target
              {
                  fixed4 transit = tex2D(_TransitionTex, IN.texcoord);
  
                  half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;
  
                  #ifdef UNITY_UI_CLIP_RECT
                  color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);
                  #endif
  
                  #ifdef UNITY_UI_ALPHACLIP
                  clip(color.a - 0.001);
                  #endif
  
                  if (transit.b &lt; _Cutoff)
                      color = lerp(0, color, saturate(_Cutoff - transit));
  
                  clip(color.a - _Cutoff+0.1f);
  
                  return color;
              }
          ENDCG
          }
      }
  </code></pre>
  
  <p>}</p>
  
  <p>Which is essentially Unity's default UI shader with added cutoff value and a transition texture which decide how much the Image is faded in or out.</p>
  
  <p>The current version of the shader produces this effect:
  <a href="https://i.stack.imgur.com/jmXX1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jmXX1.png" alt="Result image after using the shader"></a>
  Which is very pixelated on the edges in comparison to the source transition texture:
  <a href="https://i.stack.imgur.com/a4X8x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/a4X8x.png" alt="Source transition texture"></a></p>
  
  <p>I would like the edges to be smoothed out as I'm trying to achieve a hand drawn/comic style.</p>
  
  <p>This <a href="https://answers.unity.com/questions/1121005/smoothing-pixels-via-shader-tree-leaf-shader.html" rel="nofollow noreferrer">thread</a> proposes using modifying the shader to work like the SoftOcclusion shader from Unity, I haven't had much luck with making it work however.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>For reference, I'm looking to create an effect like the one in Hades seen in <a href="https://youtu.be/sZ19bQyrOes?t=972" rel="nofollow noreferrer">this video</a> (timestamped).</p>
  
  <p><a href="https://i.stack.imgur.com/N8lNd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N8lNd.png" alt="Hades reference 1"></a>
  <a href="https://i.stack.imgur.com/KOjKp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KOjKp.png" alt="Hades reference 2"></a></p>