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

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

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

UGUI研究院之Text文本渐变（十一） - 雨松MOMO程序研究院 - 1

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

UGUI研究院之Text文本渐变（十一） - 雨松MOMO程序研究院 - 2

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

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

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

 

雨松MOMO提醒您：亲，如果您觉得本文不错，快快将这篇文章分享出去吧 。另外请点击网站顶部彩色广告或者捐赠支持本站发展，谢谢！

--

最后编辑：
作者：雨松MOMO
专注移动互联网，Unity3D游戏开发
站内专栏 QQ交谈 腾讯微博 新浪微博
捐 赠如果您愿意花20块钱请我喝一杯咖啡的话，请用手机扫描二维码即可通过支付宝直接向我捐款哦。

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

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

  1. 斯樵 说：
    2017 年 3 月 3 日上午 11:53

    UGUI研究院之Text文本渐变（十一） - 雨松MOMO程序研究院 - 1参考雨松的脚步，写了一个可以自定义任意颜色和位置的 文本变色组件，使用Gradient来自定义也颜色设置。详情查看：http://blog.sqstudio.com/?p=1270

    回复
  2. hj 说：
    2016 年 10 月 27 日上午 11:13

    BaseMeshEffect是怎么来的？

    回复
  3. 葃兲啲眀兲 说：
    2016 年 8 月 10 日上午 11:20

    5.3.6可以 5.4的还没试using UnityEngine;using System.Collections;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 vh) { if (!IsActive()) { return; } var count = vh.currentVertCount; if (count == 0) return; var vertexs = new List(); for (var i = 0; i < count; i ) { var vertex = new UIVertex(); vh.PopulateUIVertex(ref vertex, i); vertexs.Add(vertex); } var topY = vertexs[0].position.y; var bottomY = vertexs[0].position.y; for (var i = 1; i < count; i ) { var y = vertexs UGUI研究院之Text文本渐变（十一） - 雨松MOMO程序研究院 - 1 .position.y; if (y > topY) { topY = y; } else if (y < bottomY) { bottomY = y; } } var height = topY – bottomY; for (var i = 0; i < count; i ) { var vertex = vertexs UGUI研究院之Text文本渐变（十一） - 雨松MOMO程序研究院 - 2 ; var color = Color32.Lerp(bottomColor, topColor, (vertex.position.y – bottomY) / height); vertex.color = color; vh.SetUIVertex(vertex, i); } }}

    回复
  4. 葃兲啲眀兲 说：
    2016 年 8 月 10 日上午 11:20

    5.3.6可以 5.4的还没试using UnityEngine;using System.Collections;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 vh) { if (!IsActive()) { return; } var count = vh.currentVertCount; if (count == 0) return; var vertexs = new List(); for (var i = 0; i < count; i++) { var vertex = new UIVertex(); vh.PopulateUIVertex(ref vertex, i); vertexs.Add(vertex); } var topY = vertexs[0].position.y; var bottomY = vertexs[0].position.y; for (var i = 1; i < count; i++) { var y = vertexs UGUI研究院之Text文本渐变（十一） - 雨松MOMO程序研究院 - 1 .position.y; if (y > topY) { topY = y; } else if (y < bottomY) { bottomY = y; } } var height = topY – bottomY; for (var i = 0; i < count; i++) { var vertex = vertexs UGUI研究院之Text文本渐变（十一） - 雨松MOMO程序研究院 - 2 ; var color = Color32.Lerp(bottomColor, topColor, (vertex.position.y – bottomY) / height); vertex.color = color; vh.SetUIVertex(vertex, i); } }}

    回复
  5. XGODX 说：
    2016 年 6 月 14 日下午 6:19

    error CS0534: Gradient' does not implement inherited abstract member UnityEngine.UI.BaseMeshEffect.ModifyMesh(UnityEngine.UI.VertexHelper)’问一下我是5.3 为啥会出这个报错

    回复
  6. LoftShawn 说：
    2016 年 5 月 4 日下午 2:23

    请问博主，ugui 下 bbcode 要怎么搞？

    回复
  7. 一线天 说：
    2016 年 3 月 12 日下午 1:28

    松哥，求UGUI插件下载地址

    回复
  9. 阿尼薇__ 说：
    2016 年 1 月 12 日下午 3:23

    喔。。雨松大大，再请教一个问题吗，你有没有遇到过使用艺术字的时候，mask遮罩不起作用的情况？

    回复
  10. 阿尼薇__ 说：
    2016 年 1 月 12 日上午 10:30

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

    回复
  11. 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;
    }

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

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

    回复
  13. 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);
    }
    }
    }

    回复
  14. 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);
    }
    }
    }

    回复
  15. 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版本

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

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

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

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

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

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

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

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

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

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

    回复
  21. 织博 说：
    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

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

      回复
  22. 织博 说：
    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;}

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

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

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

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

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

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

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

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

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

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

    回复

留下一个回复

你的email不会被公开。