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

2015
05-08

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

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

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

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

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);

}

本文固定链接: https://www.xuanyusong.com/archives/3471
转载请注明: 雨松MOMO 2015年05月08日于雨松MOMO程序研究院发表

最后编辑：2016-05-03

作者：雨松MOMO

专注移动互联网，Unity3D游戏开发

站内专栏 QQ交谈腾讯微博新浪微博

捐赠写博客不易，如果您想请我喝一杯星巴克的话？就进来看吧!

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

斯樵说：

2017 年 3 月 3 日上午 11:53

参考雨松的脚步，写了一个可以自定义任意颜色和位置的文本变色组件，使用Gradient来自定义也颜色设置。详情查看：http://blog.sqstudio.com/?p=1270

回复
hj 说：

2016 年 10 月 27 日上午 11:13

BaseMeshEffect是怎么来的？

回复
葃兲啲眀兲说：

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 .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 ; var color = Color32.Lerp(bottomColor, topColor, (vertex.position.y – bottomY) / height); vertex.color = color; vh.SetUIVertex(vertex, i); } }}

回复
葃兲啲眀兲说：

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 .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 ; var color = Color32.Lerp(bottomColor, topColor, (vertex.position.y – bottomY) / height); vertex.color = color; vh.SetUIVertex(vertex, i); } }}

回复
XGODX 说：

2016 年 6 月 14 日下午 6:19

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

回复
- 小虫子说：
  
  2016 年 6 月 23 日上午 8:43
  
  我也出现这个问题了
  
  回复
  - 小虫子说：
    
    2016 年 6 月 23 日上午 8:43
    
    我的是5.3.4的
    
    回复
    - caroseraph125 说：
      
      2016 年 6 月 27 日下午 6:12
      
      检查一下参数类型，ModifyMesh 里面是VertexHelper 不是Mesh
      
      回复
- 林良劲说：
  
  2016 年 12 月 25 日下午 4:15
  
  因为BaseMeshEffect里面声明了ModifyMesh(VertexHelper)抽象类，继承BaseMeshEffect的Gradient类要实现那个抽象类
  
  回复
LoftShawn 说：

2016 年 5 月 4 日下午 2:23

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

回复
- 雨松MOMO 说：
  
  2016 年 5 月 4 日下午 3:48
  
  我们是自己写的。。
  
  回复
一线天说：

2016 年 3 月 12 日下午 1:28

松哥，求UGUI插件下载地址

回复
- 雨松MOMO 说：
  
  2016 年 3 月 12 日下午 2:33
  
  不用下载unity4.6以后都自带。。
  
  回复
bee20041212 说：

2016 年 1 月 12 日下午 4:12

https://github.com/WestHillApps/uGUI-Effect-Tool

回复
阿尼薇__ 说：

2016 年 1 月 12 日下午 3:23

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

回复
阿尼薇__ 说：

2016 年 1 月 12 日上午 10:30

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

回复
- wxx0136 说：
  
  2016 年 1 月 12 日上午 11:11
  
  UGUI自带吗？没找到啊？
  
  回复
  - 阿尼薇__ 说：
    
    2016 年 1 月 12 日下午 3:15
    
    喔。。我看错了。。。
    
    回复
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;
}

回复
huhu 说：

2015 年 12 月 26 日下午 2:02

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

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

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

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

回复

奥的灰烬说：

2015 年 8 月 28 日上午 12:31

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

回复
chaos 说：

2015 年 8 月 27 日下午 5:43

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

回复
- 雨松MOMO 说：
  
  2015 年 8 月 27 日下午 5:45
  
  https://github.com/nicoplv/underlined-text-unity-ui
  
  回复
莫名说：

2015 年 7 月 7 日下午 2:43

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

回复
雪焰说：

2015 年 7 月 1 日下午 1:57

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

回复
- 雨松MOMO 说：
  
  2015 年 7 月 1 日下午 5:10
  
  自己写图文混排工具代替一切！！
  
  回复
yx 说：

2015 年 6 月 24 日上午 12:38

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

回复
- 雨松MOMO 说：
  
  2015 年 6 月 24 日上午 7:10
  
  不是一个图集。。重叠产生draw call 很正常啊。。
  
  回复
  - yx 说：
    
    2015 年 6 月 24 日下午 2:20
    
    同一个图片中的切片啊。
    
    回复
    - 侯说：
      
      2016 年 1 月 7 日下午 3:38
      
      把所有text放一个canvas下就是一个DC
      
      回复
织博说：

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
  
  大神，用你修改的测试了下，怎么没有效果啊，还是只能单行渐变。行数多了就不行了，是不是我代码修改地方错了
  
  回复
织博说：

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;}

回复
- 雨松MOMO 说：
  
  2015 年 6 月 2 日下午 5:55
  
  赞～
  
  回复
- 雪焰说：
  
  2015 年 7 月 1 日下午 1:57
  
  这个很实用！
  
  回复
- 雪焰说：
  
  2015 年 7 月 1 日下午 2:03
  
  冒昧地更正一下，那个ChangeColor的第一个参数类型应该是List，不是List
  
  回复
- 雪焰说：
  
  2015 年 7 月 1 日下午 2:05
  
  冒昧地更正一下，那个ChangeColor的第一个参数类型应该是List(左尖括号)UIVertex（右尖括号），不是List。不是你的手误，是被html吃掉了
  
  回复
- 王凯说：
  
  2015 年 11 月 18 日下午 6:36
  
  Unity5.2.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;
  }
  
  回复
伊克西说：

2015 年 5 月 20 日下午 2:34

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

回复
- 雨松MOMO 说：
  
  2015 年 5 月 20 日下午 2:51
  
  所以要自己写工具啊。。
  
  回复
  - 伊克西说：
    
    2015 年 8 月 18 日下午 6:06
    
    完全木有思路，看了半天。。。
    
    回复
- 低级工程师烧猪说：
  
  2015 年 11 月 12 日下午 4:19
  
  http://forum.unity3d.com/threads/adjustable-character-spacing-free-script.288277/
  
  回复
lojne 说：

2015 年 5 月 19 日下午 3:18

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

回复
- 雨松MOMO 说：
  
  2015 年 5 月 19 日下午 5:51
  
  调整一下Gradient组件的顺序放在最上面就好了。
  
  回复
lojne 说：

2015 年 5 月 19 日下午 3:01

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

回复
- 雨松MOMO 说：
  
  2015 年 5 月 19 日下午 5:52
  
  好吧我明白了。。我项目封装了图文混排工具是一行一行的绘制的。所以没这个问题。。
  
  回复
黄宝欢说：

2015 年 5 月 10 日上午 12:08

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

回复
- 雨松MOMO 说：
  
  2015 年 5 月 10 日下午 12:07
  
  是C#
  
  回复
az 说：

2015 年 5 月 9 日下午 9:34

是哪个国外论坛？最近在学习u3d，麻烦雨松推荐几个Unity3D的论坛和网站

回复
- 雨松MOMO 说：
  
  2015 年 5 月 9 日下午 10:52
  
  也没有特定的，就是找问题的时候用英文在谷歌里找不用中文找。
  
  回复
KKD 说：

2015 年 5 月 8 日下午 9:38

赞好厉害

回复

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

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

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

留下一个回复取消回复

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

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

留下一个回复 取消回复

留下一个回复取消回复