首页 >Unity3D频道 >【UGUI研究院】 > UGUI研究院之Text文本渐变（十一）
2015
05-08

UGUI研究院之Text文本渐变（十一）

这是我无意间逛国外论坛发现的，感觉还可以就分享给大家。原文 http://pastebin.com/dJabCfWn

Snip20150508_1

如下图所示，用法和UGUI自带的outline和shadow一样，可以同时使用。

Snip20150508_2

代码在这里了。我加了个判断，它原来的有越界的隐患。

using UnityEngine;
using System.Collections;
using System.Collections.Generic;
using UnityEngine.UI;

[AddComponentMenu("UI/Effects/Gradient")]
public class Gradient : BaseVertexEffect {
	[SerializeField]
	private Color32 topColor = Color.white;
	[SerializeField]
	private Color32 bottomColor = Color.black;
	
	public override void ModifyVertices(List<UIVertex> vertexList) {
		if (!IsActive()) {
			return;
		}

		int count = vertexList.Count;
		if(count>0){
			float bottomY = vertexList[0].position.y;
			float topY = vertexList[0].position.y;
			
			for (int i = 1; i < count; i++) {
				float y = vertexList[i].position.y;
				if (y > topY) {
					topY = y;
				}
				else if (y < bottomY) {
					bottomY = y;
				}
			}
			
			float uiElementHeight = topY - bottomY;
			
			for (int i = 0; i < count; i++) {
				UIVertex uiVertex = vertexList[i];
				uiVertex.color = Color32.Lerp(bottomColor, topColor, (uiVertex.position.y - bottomY) / uiElementHeight);
				vertexList[i] = uiVertex;
			}
		}
	}
}

我也在测试中，欢迎大家提意见。

如果你的项目升级到了5.2 请使用下面的代码，感谢代码的提供者。@獨立遊戲開發熊

using UnityEngine;
using System.Collections;
using System.Collections.Generic;
using UnityEngine.UI;

[AddComponentMenu("UI/Effects/Gradient")]
public class Gradient :  BaseMeshEffect
{
	[SerializeField]
	private Color32
		topColor = Color.white;
	[SerializeField]
	private Color32
		bottomColor = Color.black;
	
	public override void ModifyMesh (Mesh mesh)
	{
		if (!IsActive ()) {
			return;
		}

		Vector3[] vertexList = mesh.vertices;
		int count = mesh.vertexCount;
		if (count > 0) {
			float bottomY = vertexList [0].y;
			float topY = vertexList [0].y;
            
			for (int i = 1; i < count; i++) {
				float y = vertexList [i].y;
				if (y > topY) {
					topY = y;
				} else if (y < bottomY) {
					bottomY = y;
				}
			}
			List<Color32> colors = new List<Color32> ();
			float uiElementHeight = topY - bottomY;
			for (int i = 0; i < count; i++) {
				colors.Add (Color32.Lerp (bottomColor, topColor, (vertexList [i].y - bottomY) / uiElementHeight));
			}
			mesh.SetColors (colors);
		}
	}
}

 

最后编辑：
作者：雨松MOMO
专注移动互联网，Unity3D游戏开发
站内专栏 QQ交谈 腾讯微博 新浪微博
捐 赠写博客不易，如果您想请我喝一杯星巴克的话？就进来看吧!

您可能还会对这些文章感兴趣！

《UGUI研究院之Text文本渐变（十一）》有 61 条评论

较新评论 →
  1. 阿尼薇__说：
    2016 年 1 月 12 日上午 10:30

    不是有组件能支持文本渐变吗？gradient color 组件。。。

    回复
  2. huhu说：
    2015 年 12 月 26 日下午 4:18

    5.3版本实测已经变成这个了：
    for (int i = 0; i = 6; )
    {
    ChangeColor(ref vertexList, i, topColor);
    ChangeColor(ref vertexList, i 1, topColor);
    ChangeColor(ref vertexList, i 2, bottomColor);
    ChangeColor(ref vertexList, i 3, bottomColor);
    ChangeColor(ref vertexList, i 4, bottomColor);
    ChangeColor(ref vertexList, i 5, topColor);
    i = 6;
    }

    回复
  3. huhu说：
    2015 年 12 月 26 日下午 2:02

    话说这个代码放在什么位置呢？？for (int i = 0; i < vertexList.Count; )

    回复
  4. pan说：
    2015 年 11 月 27 日上午 10:23

    unity5.22版本参考http://answers.unity3d.com/questions/1086415/gradient-text-in-unity-522-basevertexeffect-is-obs.html
    使用正常。代码如下：
    using UnityEngine;
    using System.Collections.Generic;
    using UnityEngine.UI;

    [AddComponentMenu(“UI/Effects/Gradient”)]
    public class Gradient : BaseMeshEffect
    {
    public Color32 topColor = Color.white;
    public Color32 bottomColor = Color.black;

    public override void ModifyMesh(VertexHelper helper)
    {
    if (!IsActive() || helper.currentVertCount == 0)
    return;

    List vertices = new List();
    helper.GetUIVertexStream(vertices);

    float bottomY = vertices[0].position.y;
    float topY = vertices[0].position.y;

    for (int i = 1; i topY)
    {
    topY = y;
    }
    else if (y < bottomY)
    {
    bottomY = y;
    }
    }

    float uiElementHeight = topY – bottomY;

    UIVertex v = new UIVertex();

    for (int i = 0; i < helper.currentVertCount; i )
    {
    helper.PopulateUIVertex(ref v, i);
    v.color = Color32.Lerp(bottomColor, topColor, (v.position.y – bottomY) / uiElementHeight);
    helper.SetUIVertex(v, i);
    }
    }
    }

    回复
  5. pan说：
    2015 年 11 月 27 日上午 10:23

    unity5.22版本参考http://answers.unity3d.com/questions/1086415/gradient-text-in-unity-522-basevertexeffect-is-obs.html
    使用正常。代码如下：
    using UnityEngine;
    using System.Collections.Generic;
    using UnityEngine.UI;

    [AddComponentMenu(“UI/Effects/Gradient”)]
    public class Gradient : BaseMeshEffect
    {
    public Color32 topColor = Color.white;
    public Color32 bottomColor = Color.black;

    public override void ModifyMesh(VertexHelper helper)
    {
    if (!IsActive() || helper.currentVertCount == 0)
    return;

    List vertices = new List();
    helper.GetUIVertexStream(vertices);

    float bottomY = vertices[0].position.y;
    float topY = vertices[0].position.y;

    for (int i = 1; i topY)
    {
    topY = y;
    }
    else if (y < bottomY)
    {
    bottomY = y;
    }
    }

    float uiElementHeight = topY – bottomY;

    UIVertex v = new UIVertex();

    for (int i = 0; i < helper.currentVertCount; i++)
    {
    helper.PopulateUIVertex(ref v, i);
    v.color = Color32.Lerp(bottomColor, topColor, (v.position.y – bottomY) / uiElementHeight);
    helper.SetUIVertex(v, i);
    }
    }
    }

    回复
  6. aq_1000说：
    2015 年 10 月 20 日下午 2:45

    using UnityEngine;
    using System.Collections;
    using System.Collections.Generic;
    using UnityEngine.UI;
    using System;

    [AddComponentMenu(“UI/Effects/Gradient”)]
    public class Gradient : BaseMeshEffect
    {
    [SerializeField]
    private Color32 topColor = Color.white;
    [SerializeField]
    private Color32 bottomColor = Color.black;

    public override void ModifyMesh(VertexHelper vh)
    {
    if (!this.IsActive())
    return;

    List vertexList = new List();
    vh.GetUIVertexStream(vertexList);

    ModifyVertices(vertexList);

    vh.Clear();
    vh.AddUIVertexTriangleStream(vertexList);
    }

    public void ModifyVertices(List vertexList)
    {
    if (!IsActive())
    {
    return;
    }

    int count = vertexList.Count;
    if (count > 0)
    {
    float bottomY = vertexList[0].position.y;
    float topY = vertexList[0].position.y;

    for (int i = 1; i topY)
    {
    topY = y;
    }
    else if (y < bottomY)
    {
    bottomY = y;
    }
    }

    float uiElementHeight = topY – bottomY;

    for (int i = 0; i < count; i )
    {
    UIVertex uiVertex = vertexList[i];
    uiVertex.color = Color32.Lerp(bottomColor, topColor, (uiVertex.position.y – bottomY) / uiElementHeight);
    vertexList[i] = uiVertex;
    }
    }
    }
    }

    Unity5.2.1p4版本

    回复
  7. aq_1000说：
    2015 年 10 月 20 日下午 2:45

    using UnityEngine;
    using System.Collections;
    using System.Collections.Generic;
    using UnityEngine.UI;
    using System;

    [AddComponentMenu(“UI/Effects/Gradient”)]
    public class Gradient : BaseMeshEffect
    {
    [SerializeField]
    private Color32 topColor = Color.white;
    [SerializeField]
    private Color32 bottomColor = Color.black;

    public override void ModifyMesh(VertexHelper vh)
    {
    if (!this.IsActive())
    return;

    List vertexList = new List();
    vh.GetUIVertexStream(vertexList);

    ModifyVertices(vertexList);

    vh.Clear();
    vh.AddUIVertexTriangleStream(vertexList);
    }

    public void ModifyVertices(List vertexList)
    {
    if (!IsActive())
    {
    return;
    }

    int count = vertexList.Count;
    if (count > 0)
    {
    float bottomY = vertexList[0].position.y;
    float topY = vertexList[0].position.y;

    for (int i = 1; i topY)
    {
    topY = y;
    }
    else if (y < bottomY)
    {
    bottomY = y;
    }
    }

    float uiElementHeight = topY – bottomY;

    for (int i = 0; i < count; i++)
    {
    UIVertex uiVertex = vertexList[i];
    uiVertex.color = Color32.Lerp(bottomColor, topColor, (uiVertex.position.y – bottomY) / uiElementHeight);
    vertexList[i] = uiVertex;
    }
    }
    }
    }

    Unity5.2.1p4版本

    回复
  8. 奥的灰烬说：
    2015 年 8 月 28 日上午 12:31

    现在UGUI有这个效果，添加组件-effect 就可以找到

    回复
  9. chaos说：
    2015 年 8 月 27 日下午 5:43

    大神，我想问下UGUI 的Text 文本要加 中划线 怎么弄？？？我查了文档好像只有加粗斜体和颜色。我记得以前用NGUI是可以的。。求解答

    回复
  10. 莫名说：
    2015 年 7 月 7 日下午 2:43

    为什么我按照上面的代码 写了一份，UI/Effects 里面没有出现Gradient 选项啊

    回复
  11. 雪焰说：
    2015 年 7 月 1 日下午 1:57

    可不可以自己写一个描边Outline？感觉现在的不好用，想描粗一点就走样了

    回复
  12. yx说：
    2015 年 6 月 24 日上午 12:38

    Image上面覆盖一层Text，就是button的情况。然后有重叠的时候会产生大量的draw call。不知道要怎么解决啊。

    回复
  13. 织博说：
    2015 年 6 月 2 日下午 2:51

    我修改了下.可以支持多行显示,大家可以测试下.for (int i = 0; i < vertexList.Count; ){ChangeColor( ref vertexList, i, topColor);ChangeColor( ref vertexList, i 1, topColor);ChangeColor( ref vertexList, i 2, bottomColor);ChangeColor( ref vertexList, i 3, bottomColor);i = 4;}private void ChangeColor( ref List verList, int index, Color color){UIVertex temp = verList[index];temp.color = color;verList[index] = temp;}

    回复
    • 方寸山说：
      2017 年 10 月 30 日下午 5:07

      大神，用你修改的测试了下，怎么没有效果啊，还是只能单行渐变。行数多了就不行了，是不是我代码修改地方错了

      回复
  14. 织博说：
    2015 年 6 月 2 日下午 2:51

    我修改了下.可以支持多行显示,大家可以测试下.for (int i = 0; i < vertexList.Count; ){ ChangeColor( ref vertexList, i, topColor); ChangeColor( ref vertexList, i + 1, topColor); ChangeColor( ref vertexList, i + 2, bottomColor); ChangeColor( ref vertexList, i + 3, bottomColor); i += 4;}private void ChangeColor( ref List verList, int index, Color color){ UIVertex temp = verList[index]; temp.color = color; verList[index] = temp;}

    回复
  15. 伊克西说：
    2015 年 5 月 20 日下午 2:34

    发现一个蛋疼的问题。 UGUI的Text 没有字间距这种属性。。。。。。。。。。。。。。

    回复
  16. lojne说：
    2015 年 5 月 19 日下午 3:18

    还有我的outline和shadow的颜色也被同化了 并没有出黑色的阴影和描边效果 调大distance出现的是一个和原来文字效果一样的文字

    回复
  17. lojne说：
    2015 年 5 月 19 日下午 3:01

    这个是对于整个字段总体的一个渐变啊！~如果是一段文字就发现上面一行都是一个颜色 有没有方法让每行文字都有渐变

    回复
  18. 黄宝欢说：
    2015 年 5 月 10 日上午 12:08

    请问脚本是C#么？有一些不是很懂！

    回复
  19. az说：
    2015 年 5 月 9 日下午 9:34

    是哪个国外论坛？最近在学习u3d，麻烦雨松推荐几个Unity3D的论坛和网站 UGUI研究院之Text文本渐变（十一） - 雨松MOMO程序研究院 - 1

    回复
较新评论 →

留下一个回复

你的email不会被公开。 必填项已用 * 标注。