Horizontally gradient on image UI element

[julkue]

Hello,

I’ve created a material with a gradient texture. The gradient texture looks like the following:

This are my settings for the texture.

Now I create a material with this textura and “Bumbed diffuse” shader. Unfortunately if I assign this material to a “UI → Image” element it will not be shown on it. Instead, the defined color will be shown.

How can I get the gradient to be shown instead of the color? Do I need a specific shader? If so, why since it is a normal texture assigned to the material!?

[Max-Bot]

It’s easy, my friend.
Assign your sprite directly to sprite property of Image component, if you don’t want to modify it at run time.
Else, for more flexibility, you can use gradient shader in your material.

Create shader, call him SpriteGradient and replace code by this:

Shader "Custom/SpriteGradient" {
Properties {
	[PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
    _Color ("Left Color", Color) = (1,1,1,1)
    _Color2 ("Right Color", Color) = (1,1,1,1)
    _Scale ("Scale", Float) = 1
    
// these six unused properties are required when a shader
// is used in the UI system, or you get a warning.
// look to UI-Default.shader to see these.
_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"="Background"  "IgnoreProjector"="True"}
    LOD 100
 
    ZWrite On
 
    Pass {
        CGPROGRAM
        #pragma vertex vert  
        #pragma fragment frag
        #include "UnityCG.cginc"
 
        fixed4 _Color;
        fixed4 _Color2;
        fixed  _Scale;
 
        struct v2f {
            float4 pos : SV_POSITION;
            fixed4 col : COLOR;
        };
 
        v2f vert (appdata_full v)
        {
            v2f o;
            o.pos = mul (UNITY_MATRIX_MVP, v.vertex);
            o.col = lerp(_Color,_Color2, v.texcoord.x );
//            o.col = half4( v.vertex.y, 0, 0, 1);
            return o;
        }
       
 
        float4 frag (v2f i) : COLOR {
            float4 c = i.col;
            c.a = 1;
            return c;
        }
            ENDCG
        }
    }
}

Set up colors:

Tweak them from code:

using UnityEngine;
using System.Collections;

public class GradientTest : MonoBehaviour {

	public Material yourGradientMaterial;
 
	void Start () {
		yourGradientMaterial.SetColor("_Color", Color.black); // the left color
		yourGradientMaterial.SetColor("_Color2", Color.white); // the right color
	}
}

[Josh_He]

Hey, this is too late to be a helpful answer for the original author. But for everyone else looking for a way to use gradients on their UI, it might be useful.
Unity’s UI components use vertex colors to color the graphics. This saves draw calls because all elements can use the same material. One can easily use vertex colors to create a gradient. It is best implemented using the BaseMeshEffect class where you can simply set the vertex colors of the image. (Unity - Scripting API: BaseMeshEffect)

I have implemented a gradient component based on this. You can animate the colors or change them via a script, which is a bonus compared to using a texture. Here is the store link: UI Gradient | GUI Tools | Unity Asset Store

[julkue]

Instead of creating a material with the texture assigned, assign the gradient texture to “Source image” of the element itself. This has solved the problem for me.

[aybeone]

I’ve made shader for UI that uses UnityEngine.Gradient:

See the thread with code at:

https://forum.unity.com/threads/wiki-drawing-an-ui-element-using-unityengine-gradient.658120/