- Home /
UI Text 2 Color Horizontal Fill With Sliding Dividing Line
I have a UI text object where I would like the following things to happen:
Apply a 2 color fill to the text, where the left side of the phrase will be one color, and the right side of the phrase will be another.
Make the dividing line between the two colors adjustable, so that I can position the color transition anywhere in the phrase, even in the middle of a character.
Animate this dividing line so that the color of the text transitions from one to the other by sliding the transition from left to right.
Scouring the internet, I was able to to find the code below that will generate a gradient across a UI text object, however, it is a smooth gradient, whereas I need a sharp transition. I spent a few hours trying to find ways to modify it to what I need, but I not experienced enough in Unity and Vertices to do so.
If anyone can point me in the correct direction, that would be appreciated. If there is another, or easier way of accomplishing the 3 points above, I would love to know that too.
Thanks!
using UnityEngine;
using System.Collections.Generic;
using UnityEngine.UI;
[AddComponentMenu("UI/Effects/Gradient")]
public class Gradient: BaseMeshEffect
{
public enum Type
{
Vertical,
Horizontal
}
[SerializeField]
public Type GradientType = Type.Vertical;
[SerializeField]
[Range(-1.5f, 1.5f)]
public float Offset = 0f;
[SerializeField]
private Color32 StartColor = Color.white;
[SerializeField]
private Color32 EndColor = Color.black;
public override void ModifyMesh(VertexHelper helper)
{
if (!IsActive() || helper.currentVertCount == 0)
return;
List<UIVertex> _vertexList = new List<UIVertex>();
helper.GetUIVertexStream(_vertexList);
int nCount = _vertexList.Count;
switch (GradientType)
{
case Type.Vertical:
{
float fBottomY = _vertexList[0].position.y;
float fTopY = _vertexList[0].position.y;
float fYPos = 0f;
for (int i = nCount - 1; i >= 1; --i)
{
fYPos = _vertexList[i].position.y;
if (fYPos > fTopY)
fTopY = fYPos;
else if (fYPos < fBottomY)
fBottomY = fYPos;
}
float fUIElementHeight = 1f / (fTopY - fBottomY);
UIVertex v = new UIVertex();
for (int i = 0; i < helper.currentVertCount; i++)
{
helper.PopulateUIVertex(ref v, i);
v.color = Color32.Lerp(EndColor, StartColor, (v.position.y - fBottomY) * fUIElementHeight - Offset);
helper.SetUIVertex(v, i);
}
}
break;
case Type.Horizontal:
{
float fLeftX = _vertexList[0].position.x;
float fRightX = _vertexList[0].position.x;
float fXPos = 0f;
for (int i = nCount - 1; i >= 1; --i)
{
fXPos = _vertexList[i].position.x;
if (fXPos > fRightX)
fRightX = fXPos;
else if (fXPos < fLeftX)
fLeftX = fXPos;
}
float fUIElementWidth = 1f / (fRightX - fLeftX);
UIVertex v = new UIVertex();
for (int i = 0; i < helper.currentVertCount; i++)
{
helper.PopulateUIVertex(ref v, i);
v.color = Color32.Lerp(EndColor, StartColor, (v.position.x - fLeftX) * fUIElementWidth - Offset);
helper.SetUIVertex(v, i);
}
}
break;
default:
break;
}
}
}
I spent some more time trying to figure this out, and still can't get it resolved. Every solution seems to work around the vertices already applied to the text. It might require adding or modifying the vertices, which I don't know how to do.
I appreciate any help.
Thanks!
Your answer
Follow this Question
Related Questions
Gradient Text in Unity 5.2.2 "BaseVertexEffect is obsolete use BaseMeshEffect instead" 3 Answers
Color.white not so much white... 3 Answers
changing text color in GUI.Label 3 Answers
Vertex colour based on distance from transform center 2 Answers
How can I create a gradient color background for my game, without using skybox? 2 Answers