Unity实用功能之UGUI的Text实现颜色渐变详解（一）

小温同学的账号
1,272 阅读3分钟

这是我参与8月更文挑战的第15天，活动详情查看：8月更文挑战

概述

在项目开发过程中，经常会用到UIGUI的Text功能显示文字，而Unity中的Text功能有些少，只能简单的进行更改颜色，有时候想要一个渐变的颜色都没有，在项目开发过程中非常的不方便，今天就来扩展下Text组件的功能，为其增加一个颜色渐变的功能，顺带添加一个阴影功能，为Text添加渐变功能将分为两篇文章讲解，详细的请去本人的专栏查看。专栏地址

分析

想要改变Text的颜色为渐变，这里使用的方法是更改每个顶点的颜色，从而达到渐变段的效果，接下来就先看一下UGUI中Text的顶点。

获取顶点

首先我们先获取一下UGUI的顶点看一下其排列顺序，然后才能进行颜色设置。
UGUI中的Text是基本的UI组件，同样是基本组件的还有Image和RawImage，它们都继承自Graphic组件，查看Graphic组件源码可以发现，显示这些UI组件时分为好几个步骤，其中包括了

  • 当组件参数改变时，重新生成顶点列表
  • 获取组件当前节点上继承了IMeshModifier接口的组件，对生成的顶点列表进行修改
  • 使用生成的顶点列表填充网格 UGUI的Shadow和Outline就继承IMeshModifier接口，简单的把UI组件生成的顶点列表复制若干遍再进行位置偏移，以达到阴影或外轮廓的效果 所以要查看UI组件的顶点数，第一步需要继承BaseMeshEffect,然后我们重写下才ModifyMesh,来获取顶点。
    获取顶点我们调取方法GetUIVertexStream，具体方法如下
List<UIVertex> vertexBuffers = new List<UIVertex>();
public override void ModifyMesh(VertexHelper vh)
{
    if (!IsActive())
    {
        return;
    }
    vh.GetUIVertexStream(vertexBuffers);//获取顶点
    Debug.Log(vertexBuffers.Count);
}

光获取到顶点和顶点数还不够，我们没法看到这些这些顶点都在哪里，所以我们要把这些顶点显示出来。下面列出了两种方法

方法一在Scene中显示

我们通过Untiy自带的方法OnDrawGizmos，在Scene中画出我们上面获取到的顶点。具体分为两个步骤

  • 将所有顶点转换为世界坐标
  • 通过Gizmos.DrawSphere画一个点
/// <summary>
/// 在Scene中显示顶点
/// </summary>
void OnDrawGizmos()
{
    Gizmos.color = Color.red;//设置颜色
    for (int i = 0; i < vertexBuffers.Count; i++)
    {
        //把mesh顶点转为世界坐标
        Vector3 targetPosition = transform.TransformPoint(vertexBuffers[i].position);
        Gizmos.DrawSphere(targetPosition, 5f);
    }
}

DrawSphere参数解释：第一个位置（Vector3），第二个是点的半径（float）

方法二在Inspector中显示网格

在Inspector中显示网格的方法可以直接在上面重写的ModifyMesh中实现，在获取到顶点之后可以直接实现。 首先定义一个Mesh

public Mesh mesh = null;

实现Mesh的显示

//在Inspector中显示网格
if (mesh == null)
{
    mesh = new Mesh();
}
vh.FillMesh(mesh);

总结

通过上述两种方法，我们可以发现，Text组价中，一个字符有6个顶点（其中有两个是重叠的）。让我们一起来看一下 方法一效果 image.png 方法二效果 image.png

写在最后

所有分享的内容均为作者在日常开发过程中使用过的各种小功能点，分享出来也变相的回顾一下，如有写的不好的地方还请多多指教。欢迎大家相互学习进步。本片文章就先写到这里，下一篇将继续介绍如何实现Text的颜色渐变，源码也会在下一篇分享

avatar
文章
阅读
粉丝