Question by $$anonymous$$ · Oct 11, 2018 at 01:52 PM · ui shader material cg

Tint a UI sprite with a gradient

I have a 9 patch UI image that I want to tint with a gradient. Fully opaque at the top of the image and semi transparent at the bottom. I was using a shader for this which worked well for a while. It looked like this:

 Shader "Thrive/SpriteGradient" 
 {
      Properties
      {
          [PerRendererData] _MainTex("Sprite Texture", 2D) = "white" {}
          _Color("Left Color", Color) = (1,1,1,1)
          _Color2("Right Color", 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
          // see for example
          // http://answers.unity3d.com/questions/980924/ui-mask-with-shader.html
      }
  
      SubShader
      {
         Tags
         { 
             "Queue" = "Transparent"
             "IgnoreProjector" = "True"
             "RenderType" = "Transparent"
             "PreviewType" = "Plane"
             "CanUseSpriteAtlas" = "True" 
             "DisableBatching" = "True"
         }
  
 
         Stencil
         {
             Ref[_Stencil]
             Comp[_StencilComp]
             Pass[_StencilOp]
             ReadMask[_StencilReadMask]
             WriteMask[_StencilWriteMask]
         }
  
         Cull Off
         Lighting Off
         ZWrite Off
         ZTest[unity_GUIZTestMode]
         Fog{ Mode Off }
         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;
             fixed4 _Color2;
  
             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.rgb = lerp(_Color,_Color2, IN.texcoord.y);
                 OUT.color.a = lerp(_Color.a, _Color2.a, IN.texcoord.y) * IN.color.a;         
                 return OUT;
             }
             
             sampler2D _MainTex;
             
             fixed4 frag(v2f i) : COLOR
             {
                 fixed4 c = tex2D(_MainTex, i.texcoord) * i.color;
                 clip(c.a - 0.01);        
                 return c;
             }
             ENDCG
         }
     }
 }

This broke however once I started using texture atlases for the UI as the UV's on an image are no longer 0-1. Can anyone recommend a fix?

Add comment