How to: text gradient fill?

I want to make similar effect we had in DF GUI, where text color can be gradient. I'm using custom material with build-in UI/Text shader, changing it to something like this:

half4 frag (v2f i) : COLOR
{
half4 col = i.color;
col.a *= tex2D(_MainTex, i.texcoord).a;
col = col * _Color * tex2D(_MainTex, i.texcoord);
clip (col.a - 0.01);
return col;
}

where in "_MainTex" I assign gradient texture.

I expect color multiply by gradient, but all I get is grey text all the time.

 

Solved: There is component UI->Outline, and also community-written UI->Gradient FIll now for the texts;

 

Where could one find this?

 

there http://pastebin.com/dJabCfWn right?

 

That's beautiful! Thank you.

 

Very nice. Thanks.

 

Vertex Color Gradient & Animation
This video provides a short overview of TextMesh Pro as well as showing the latest implementation of support for Vertex Color Gradients in TextMesh Pro in Unity 4.6 & UI.

Note that you will be able to animate the (4) vertex colors independently of each other using Unity's Animation component.

 

I've made a new version: http://pastebin.com/yirs1Nu1. Fixed an error when the item is shrunk to invisibility.

 

i created extended gradient. see http://forum.unity3d.com/threads/scripts-useful-4-6-scripts-collection.264161/

 

I've just realized that I can't animate color values on this Gradient. Do you have any suggestions for that? I suppose I could create a script "bridge" to animate them...

 

I created the script bridge to animate the color, but I had to do something else too. The UI apparently doesn't update if it doesn't know it has to, so even if you change the value of the gradient colors by script, you still need to sort of "poke" the UI to make them actually change. I did this by setting the text.color to a random value (since it gets overwritten by the Gradient component anyway).

I thought I should post this for anyone else who may encounter the same issue.

 

I found nice solution but honestly i will create PRO (paid) pack of my extension for few $ mainly aiming on animation support (because most of my extension doesnt support animation or support very dirty)....

 

Just to tease a little bit as this is just a first implementation

In this video you can see the Vertex Color Gradient on the text combined with the bevel, soft shadow and the new Animated Overlay FX.


In this short GIF animation you can see how we are combining vertex color gradient, outline, bevel, soft shadows, overlay FX and bump mapping on the face of the TextMesh Pro text object.

The font is Impact SDF with some bevel, soft shadow, gradient vertex color and some bump mapping and of course an Animated Overlay EnvMap.

 

I have problem when update Unity 5.2.0f3 "BaseVertexEffect Change to BaseMeshEffect"

 

I had the same problem. I updated the script from information I found here: http://forum.unity3d.com/threads/basevertexeffect-change-to-basemesheffect.338455/

New script working in 5.2: http://pastebin.com/LR1u9Lz8

 

I had the same issue, which the new script resolves, however I struggled to get a local vertical gradient (for multi line text elements). To fix I used these lines:

Code (CSharp):

1.    case GradientDir.Vertical:
2.                         if(i % 2 == 0)
3.                             uiVertex.color *= (i % 3 == 0 || (i - 0) % 3 == 0) ? vertex1 : vertex2;
4.                         else
5.                             uiVertex.color *= (i % 3 == 0 || (i - 0) % 3 == 0) ? vertex2 : vertex1;
6.                         break;

 

"Assets/Script/UI/Effects/Gradient.cs(7,14): error CS0534: `Gradient' does not implement inherited abstract member `UnityEngine.UI.BaseMeshEffect.ModifyMesh(UnityEngine.UI.VertexHelper)'"

I copied the code from post #15 and get this error. It dosen't seem to register the VertexHelper inside of the function. Or something. Ideas?

 

Looking at their source code diff at: https://bitbucket.org/Unity-Technol...fce0998b25b751c99bd&diff2=2f094af18832&at=5.2

it seems like they added a new abstract method:

Code (CSharp):

1.  
2. public abstract void ModifyMesh(VertexHelper vh);
3.  

However, I'm not sure how to implement it since this bit here:

Code (CSharp):

1.  
2. using (VertexHelpervertexHelper2 = newVertexHelper())
3. {
4. vertexHelper2.AddUIVertexTriangleStream(list);
5. vertexHelper2.FillMesh(mesh);
6. }
7.  

is expecting a mesh. Will spend sometime understanding the systems and trying to fix it!

 

Code (csharp):

1.  
2.     public override void ModifyMesh( VertexHelper vh )
3.     {
4.         if( !IsActive() )
5.             return;
6.  
7.         List<UIVertex> list = new List<UIVertex>();
8.         vh.GetUIVertexStream( list );
9.  
10.         ModifyVertices( list );
11.  
12.         vh.Clear();
13.         vh.AddUIVertexTriangleStream( list );
14.     }
15.  

Should work, not sure if it's the best way to implement, but currently works for me in 5.3

 

Integrated post #19 and added a basic check to account for situations in which the Text's string is "".

Code (CSharp):

1. using UnityEngine;
2. using System.Collections;
3. using System.Collections.Generic;
4. using UnityEngine.UI;
5. [AddComponentMenu("UI/Effects/Gradient")]
6. public class Gradient : BaseMeshEffect
7. {
8.     public enum Type
9.     {
10.         Vertical,
11.         Horizontal
12.     }
13.     [SerializeField]
14.     public Type GradientType = Type.Vertical;
15.     [SerializeField]
16.     [Range(-1.5f, 1.5f)]
17.     public float Offset = 0f;
18.     [SerializeField]
19.     private Color32 StartColor = Color.white;
20.     [SerializeField]
21.     private Color32 EndColor = Color.black;
22.     public override void ModifyMesh( VertexHelper vh )
23.     {
24.         if( !IsActive() )
25.             return;
26.         List<UIVertex> list = new List<UIVertex>();
27.         vh.GetUIVertexStream( list );
28.         ModifyVertices( list );
29.         vh.Clear();
30.         vh.AddUIVertexTriangleStream( list );
31.     }
32.     public void ModifyVertices(List<UIVertex> _vertexList)
33.     {
34.         if (!IsActive())
35.             return;
36.         int nCount = _vertexList.Count;
37.         switch (GradientType)
38.         {
39.             case Type.Vertical:
40.                 {
41.                     if(_vertexList.Count != 0){
42.                         float fBottomY = _vertexList[0].position.y;
43.                         float fTopY = _vertexList[0].position.y;
44.                         float fYPos = 0f;
45.    
46.                         for (int i = nCount - 1; i >= 1; --i)
47.                         {
48.                             fYPos = _vertexList[i].position.y;
49.                             if (fYPos > fTopY)
50.                                 fTopY = fYPos;
51.                             else if (fYPos < fBottomY)
52.                                 fBottomY = fYPos;
53.                         }
54.    
55.                         float fUIElementHeight = 1f / (fTopY - fBottomY);
56.                         for (int i = nCount - 1; i >= 0; --i)
57.                         {
58.                             UIVertex uiVertex = _vertexList[i];
59.                             uiVertex.color = Color32.Lerp(EndColor, StartColor, (uiVertex.position.y - fBottomY) * fUIElementHeight - Offset);
60.                             _vertexList[i] = uiVertex;
61.                         }
62.                     }
63.                 }
64.                 break;
65.             case Type.Horizontal:
66.                 {
67.                     float fLeftX = _vertexList[0].position.x;
68.                     float fRightX = _vertexList[0].position.x;
69.                     float fXPos = 0f;
70.                     for (int i = nCount - 1; i >= 1; --i)
71.                     {
72.                         fXPos = _vertexList[i].position.x;
73.                         if (fXPos > fRightX)
74.                             fRightX = fXPos;
75.                         else if (fXPos < fLeftX)
76.                             fLeftX = fXPos;
77.                     }
78.                     float fUIElementWidth = 1f / (fRightX - fLeftX);
79.                     for (int i = nCount - 1; i >= 0; --i)
80.                     {
81.                         UIVertex uiVertex = _vertexList[i];
82.                         uiVertex.color = Color32.Lerp(StartColor, EndColor, (uiVertex.position.x - fLeftX) * fUIElementWidth - Offset);
83.                         _vertexList[i] = uiVertex;
84.                     }
85.                 }
86.                 break;
87.             default: break;
88.         }
89.     }
90. }

 

@Stephan_B
Would it be possible to have this effect based on the mesh rather than on each letters in Text Mesh Pro ?
The script shared works perfectly fine, it would be great to be able to use Text Mesh Pro amazing possibilities as well.

 

When I have time, I can certainly look into this.

In the meantime, this is something that users should be able to implement as access to the geometry of the text is available.

See Example 23 - Animating Vertex Attributes and the relate scripts which alters the vertex color of individual characters. As such a similar approach to above could be used to modify the vertex colors to do gradients.