Unity UI/字体颜色渐变效果实现

最新推荐文章于 2024-09-03 20:21:00 发布
最新推荐文章于 2024-09-03 20:21:00 发布
阅读量191 收藏 1
点赞数 3
文章标签： unity ui 游戏引擎
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51481499/article/details/140824069
版权 
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;


/// <summary>
/// 渐变
/// </summary>
[DisallowMultipleComponent]
[AddComponentMenu("UI/Effects/UIGradient")]
public class UIGradient : BaseMeshEffect
{
    protected UIGradient()
    {

    }

    /// <summary>
    /// 渐变方向
    /// </summary>
    public enum EGradientDir
    {
        TopToBottom,
        BottomToTop,
        LeftToRight,
        RightToLeft,
    }

    /// <summary>
    /// 渐变方向
    /// </summary>
    [SerializeField]
    EGradientDir m_GradientDir = EGradientDir.TopToBottom;
    public EGradientDir GradientDir
    {
        get
        {
            return m_GradientDir;
        }
        set
        {
            m_GradientDir = value;
            graphic.SetVerticesDirty();
        }
    }

    //颜色数组
    [SerializeField]
    Color32[] m_ColorArray = new Color32[2] { Color.black, Color.white };
    public Color32[] ColorArray
    {
        get
        {
            return m_ColorArray;
        }
        set
        {
            m_ColorArray = value;
            graphic.SetVerticesDirty();
        }
    }

    //顶点缓存
    List<UIVertex> m_VertexCache = new List<UIVertex>();
    //绘制使用的顶点列表
    List<UIVertex> m_VertexList = new List<UIVertex>();

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

        vh.GetUIVertexStream(m_VertexCache);

        switch (m_GradientDir)
        {
            case EGradientDir.TopToBottom:
                ApplyGradient_TopToBottom(m_VertexCache);
                break;
            case EGradientDir.BottomToTop:
                ApplyGradient_BottomToTop(m_VertexCache);
                break;
            case EGradientDir.LeftToRight:
                ApplyGradient_LeftToRight(m_VertexCache);
                break;
            case EGradientDir.RightToLeft:
                ApplyGradient_RightToLeft(m_VertexCache);
                break;
            default:
                break;
        }

        vh.Clear();
        vh.AddUIVertexTriangleStream(m_VertexList);
        m_VertexCache.Clear();
        m_VertexList.Clear();
    }

    void ApplyGradient_TopToBottom(List<UIVertex> vertexCache)
    {
        if (vertexCache.Count == 0)
        {
            return;
        }
        if (m_ColorArray.Length < 2)
        {
            return;
        }

        int vertexCountPer = 6;//每一个文字的顶点数
        int vertexCount = vertexCache.Count;
        int colorCount = m_ColorArray.Length;
        for (int n = 0; n < vertexCount / 6; n++)
        {
            UIVertex lastVertexLB = new UIVertex();
            UIVertex lastVertexRB = new UIVertex();
            for (int i = 0; i < colorCount - 1; i++)
            {
                UIVertex vertexRT;
                UIVertex vertexLT;
                UIVertex vertexRB;
                UIVertex vertexLB;

                //左上角和右上角
                if (i == 0)
                {
                    vertexLT = CalcVertex(vertexCache[n * vertexCountPer + 0], m_ColorArray[i]);
                    vertexRT = CalcVertex(vertexCache[n * vertexCountPer + 1], m_ColorArray[i]);
                }
                else
                {
                    vertexLT = lastVertexLB;
                    vertexRT = lastVertexRB;
                }

                //左下角和右下角
                if (i == colorCount - 2)
                {
                    vertexLB = CalcVertex(vertexCache[n * vertexCountPer + 4], m_ColorArray[i + 1]);
                    vertexRB = CalcVertex(vertexCache[n * vertexCountPer + 2], m_ColorArray[i + 1]);
                }
                else
                {
                    vertexLB = CalcVertex(vertexCache[n * vertexCountPer + 4], vertexCache[n * vertexCountPer + 0],
                        (colorCount - i - 2) * 1f / (colorCount - 1), m_ColorArray[i + 1]);
                    vertexRB = CalcVertex(vertexCache[n * vertexCountPer + 2], vertexCache[n * vertexCountPer + 1],
                        (colorCount - i - 2) * 1f / (colorCount - 1), m_ColorArray[i + 1]);
                }

                lastVertexLB = vertexLB;
                lastVertexRB = vertexRB;

                m_VertexList.Add(vertexLT);
                m_VertexList.Add(vertexRT);
                m_VertexList.Add(vertexRB);
                m_VertexList.Add(vertexRB);
                m_VertexList.Add(vertexLB);
                m_VertexList.Add(vertexLT);
            }
        }
    }

    void ApplyGradient_BottomToTop(List<UIVertex> vertexCache)
    {
        if (vertexCache.Count == 0)
        {
            return;
        }
        if (m_ColorArray.Length < 2)
        {
            return;
        }

        int vertexCountPer = 6;//每一个文字的顶点数
        int vertexCount = vertexCache.Count;
        int colorCount = m_ColorArray.Length;
        for (int n = 0; n < vertexCount / 6; n++)
        {
            UIVertex lastVertexLT = new UIVertex();
            UIVertex lastVertexRT = new UIVertex();
            for (int i = 0; i < colorCount - 1; i++)
            {
                UIVertex vertexRT;
                UIVertex vertexLT;
                UIVertex vertexRB;
                UIVertex vertexLB;

                //左下角和右下角
                if (i == 0)
                {
                    vertexLB = CalcVertex(vertexCache[n * vertexCountPer + 4], m_ColorArray[i]);
                    vertexRB = CalcVertex(vertexCache[n * vertexCountPer + 2], m_ColorArray[i]);
                }
                else
                {
                    vertexLB = lastVertexLT;
                    vertexRB = lastVertexRT;
                }

                //左上角和右上角
                if (i == colorCount - 2)
                {
                    vertexLT = CalcVertex(vertexCache[n * vertexCountPer + 0], m_ColorArray[i + 1]);
                    vertexRT = CalcVertex(vertexCache[n * vertexCountPer + 1], m_ColorArray[i + 1]);
                }
                else
                {
                    vertexLT = CalcVertex(vertexCache[n * vertexCountPer + 0], vertexCache[n * vertexCountPer + 4],
                        (colorCount - i - 2) * 1f / (colorCount - 1), m_ColorArray[i + 1]);
                    vertexRT = CalcVertex(vertexCache[n * vertexCountPer + 1], vertexCache[n * vertexCountPer + 2],
                        (colorCount - i - 2) * 1f / (colorCount - 1), m_ColorArray[i + 1]);
                }

                lastVertexLT = vertexLT;
                lastVertexRT = vertexRT;

                m_VertexList.Add(vertexLT);
                m_VertexList.Add(vertexRT);
                m_VertexList.Add(vertexRB);
                m_VertexList.Add(vertexRB);
                m_VertexList.Add(vertexLB);
                m_VertexList.Add(vertexLT);
            }
        }
    }

    void ApplyGradient_LeftToRight(List<UIVertex> vertexCache)
    {
        if (vertexCache.Count == 0)
        {
            return;
        }
        if (m_ColorArray.Length < 2)
        {
            return;
        }

        int vertexCountPer = 6;//每一个文字的顶点数
        int vertexCount = vertexCache.Count;
        int colorCount = m_ColorArray.Length;
        for (int n = 0; n < vertexCount / 6; n++)
        {
            UIVertex lastVertexRT = new UIVertex();
            UIVertex lastVertexRB = new UIVertex();
            for (int i = 0; i < colorCount - 1; i++)
            {
                UIVertex vertexRT;
                UIVertex vertexLT;
                UIVertex vertexRB;
                UIVertex vertexLB;

                //左上角和左下角
                if (i == 0)
                {
                    vertexLT = CalcVertex(vertexCache[n * vertexCountPer + 0], m_ColorArray[i]);
                    vertexLB = CalcVertex(vertexCache[n * vertexCountPer + 4], m_ColorArray[i]);
                }
                else
                {
                    vertexLT = lastVertexRT;
                    vertexLB = lastVertexRB;
                }

                //右上角和右下角
                if (i == colorCount - 2)
                {
                    vertexRT = CalcVertex(vertexCache[n * vertexCountPer + 1], m_ColorArray[i + 1]);
                    vertexRB = CalcVertex(vertexCache[n * vertexCountPer + 2], m_ColorArray[i + 1]);
                }
                else
                {
                    vertexRT = CalcVertex(vertexCache[n * vertexCountPer + 1], vertexCache[n * vertexCountPer + 0],
                        (colorCount - i - 2) * 1f / (colorCount - 1), m_ColorArray[i + 1]);
                    vertexRB = CalcVertex(vertexCache[n * vertexCountPer + 2], vertexCache[n * vertexCountPer + 4],
                        (colorCount - i - 2) * 1f / (colorCount - 1), m_ColorArray[i + 1]);
                }

                lastVertexRT = vertexRT;
                lastVertexRB = vertexRB;

                m_VertexList.Add(vertexLT);
                m_VertexList.Add(vertexRT);
                m_VertexList.Add(vertexRB);
                m_VertexList.Add(vertexRB);
                m_VertexList.Add(vertexLB);
                m_VertexList.Add(vertexLT);
            }
        }
    }

    void ApplyGradient_RightToLeft(List<UIVertex> vertexCache)
    {
        if (vertexCache.Count == 0)
        {
            return;
        }
        if (m_ColorArray.Length < 2)
        {
            return;
        }

        int vertexCountPer = 6;//每一个文字的顶点数
        int vertexCount = vertexCache.Count;
        int colorCount = m_ColorArray.Length;
        for (int n = 0; n < vertexCount / 6; n++)
        {
            UIVertex lastVertexLT = new UIVertex();
            UIVertex lastVertexLB = new UIVertex();
            for (int i = 0; i < colorCount - 1; i++)
            {
                UIVertex vertexRT;
                UIVertex vertexLT;
                UIVertex vertexRB;
                UIVertex vertexLB;

                //右上角和右下角
                if (i == 0)
                {
                    vertexRT = CalcVertex(vertexCache[n * vertexCountPer + 1], m_ColorArray[i]);
                    vertexRB = CalcVertex(vertexCache[n * vertexCountPer + 2], m_ColorArray[i]);
                }
                else
                {
                    vertexRT = lastVertexLT;
                    vertexRB = lastVertexLB;
                }

                //左上角和左下角
                if (i == colorCount - 2)
                {
                    vertexLT = CalcVertex(vertexCache[n * vertexCountPer + 0], m_ColorArray[i + 1]);
                    vertexLB = CalcVertex(vertexCache[n * vertexCountPer + 4], m_ColorArray[i + 1]);
                }
                else
                {
                    vertexLT = CalcVertex(vertexCache[n * vertexCountPer + 0], vertexCache[n * vertexCountPer + 1],
                        (colorCount - i - 2) * 1f / (colorCount - 1), m_ColorArray[i + 1]);
                    vertexLB = CalcVertex(vertexCache[n * vertexCountPer + 4], vertexCache[n * vertexCountPer + 2],
                        (colorCount - i - 2) * 1f / (colorCount - 1), m_ColorArray[i + 1]);
                }

                lastVertexLT = vertexLT;
                lastVertexLB = vertexLB;

                m_VertexList.Add(vertexLT);
                m_VertexList.Add(vertexRT);
                m_VertexList.Add(vertexRB);
                m_VertexList.Add(vertexRB);
                m_VertexList.Add(vertexLB);
                m_VertexList.Add(vertexLT);
            }
        }
    }

    /// <summary>
    /// 计算顶点数据(只计算颜色)
    /// </summary>
    UIVertex CalcVertex(UIVertex vertex, Color32 color)
    {
        vertex.color = color;
        return vertex;
    }

    /// <summary>
    /// 计算顶点数据
    /// </summary>
    UIVertex CalcVertex(UIVertex vertexA, UIVertex vertexB, float ratio, Color32 color)
    {
        UIVertex vertexTemp = new UIVertex();
        vertexTemp.position = (vertexB.position - vertexA.position) * ratio + vertexA.position;
        vertexTemp.color = color;
        vertexTemp.normal = (vertexB.normal - vertexA.normal) * ratio + vertexA.normal;
        vertexTemp.tangent = (vertexB.tangent - vertexA.tangent) * ratio + vertexA.tangent;
        vertexTemp.uv0 = (vertexB.uv0 - vertexA.uv0) * ratio + vertexA.uv0;
        vertexTemp.uv1 = (vertexB.uv1 - vertexA.uv1) * ratio + vertexA.uv1;
        return vertexTemp;
    }

}

可与Shadow组件、Outline组件混合使用，模拟部分艺术字效果

林淵.
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【Unity实战篇 】 | Unity实现UGUI颜色渐变，支持透明渐变
努力前行，总会成为自己心中的那道光
06-04 1万+
在Unity中UGUI的实现图片和文字颜色渐变效果是一个很常见的需求。 下面就来看一下颜色渐变效果是怎样实现的吧。 【Unity实战篇 】 | Unity实现UGUI颜色渐变，支持透明渐变
Unity-UIGradient：Unity的UI渐变效果脚本
02-06
UI渐变 少量脚本，用于向UGUI元素添加渐变效果 UIGradient：简单的两色渐变 UICornersGradient：UI元素的每个角上带有颜色的渐变 UITextGradient：文本的每个字母上的简单两色渐变 UITextCornersGradient：文本的每个字母的每个角上带有颜色的渐变
Unity中实现UI渐变
L的博客
04-26 4856
一：效果演示 二：使用 TopColor：顶部颜色 BottomColor：底部颜色 三：代码实现 using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; [DisallowMultipleComponent] [AddComponentMenu("LFramework/UI/Effects/Gradient", 1)] public class Gradient : BaseMeshEffect
Unity 物体颜色渐变效果（判断逻辑实现）
LCF_CSharp的博客
12-14 7298
通过观察材质球中颜色属性改变过程得出规律并进行判断调整数值，实现了颜色渐变功能。 如图，在我们旋转这个白色圆圈时颜色发生了改变，并且R、G、B值会有相应的变化； 以（0，1，1）的颜色开始向右旋转小白圈，我们会发现R、G、B的变化顺序为 -G、+R、-B、+G、-R、+B 并且每次只对R、G、B中的一个元素进行改变。 通过以上规律和特性，进行流程控制判断递增颜色数值即可得到渐变效果； using UnityEngine; public Transform A;//需要变色的物体 pu
Unity3d Shader篇（十）— 渐变纹理
脚踏实地,实事求是。
03-01 2890
渐变纹理（Gradient Texture）是一种常用的纹理类型，在计算机图形学中广泛应用于实现各种颜色渐变效果。本文将介绍一种使用渐变纹理的Shader效果——Unlit渐变纹理Shader的实现原理和效果展示。Unlity渐变纹理Shader是一种简单的Shader，它不考虑光照效果，只通过渐变纹理来定义物体的颜色。这种Shader通常用于实现一些不需要光照的特效或简单的渲染效果，如UI元素、2D特效等
Unity自定义UI组件(七)渐变工具、渐变色图片、渐变遮罩
SpringD
06-10 1万+
欢迎阅读Unity自定义UI组件(七)渐变工具、渐变色图片、渐变遮罩前言 在Unity中UGUI只为我们提供了最为基础的Image和RawImage两种可展示图片的组件，但是这两种组件要展示一些特殊效果的时候总是会依赖外界资源（PhotoShop资源），比如你想要一个简单的颜色渐变 ，变色的文字 都会比较棘手，但是我们可以利用程序来解决这点小缺陷，我们可以编写自己的高级Image工具来实现。
Unity3D实现渐变颜色效果
12-26
基于unity3D实现渐变颜色的简单脚本，代码很少，就不废话了，直接上代码和效果图。 效果图： using System; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; namespace ...
BMFont工具 (unity使用BMFont制作位图字体)
11-07
3. **自定义效果**：可以设置复杂的文字效果，如描边、阴影、渐变等，增强视觉表现。 **三、使用BMFont的步骤** 1. **下载安装**：首先，从官方网站或其他可信源下载bmfont64.exe并安装。 2. **导入字体**：打开BM...
Unity的基本UI框架
02-27
Unity引擎的用户界面（UI）系统是开发2D和3D游戏、应用及交互式内容的重要组成部分。这个系统，称为Unity UI或Canvas，为开发者提供了丰富的工具和组件，以创建功能丰富的图形用户界面。在“Unity的基本UI框架”中，...
Unity的PSD转Ugui工具
05-24
4. **颜色和渐变**：支持将PSD的颜色和渐变图层转换为Unity的色彩设置，包括颜色调整和渐变效果。 5. **文本和字体**：自动识别文本图层，并将其转换为TextMeshPro或Unity内置的Text组件，同时匹配相应的字体资源。...
科幻UI资源包.zip
11-29
《科幻UI资源包》是一个专为Unity开发设计的资源集合，旨在帮助开发者创建具有未来感和高科技风格的用户界面。这个资源包与"LegacyImageEffects"资源包配合使用，能够进一步提升UI的视觉效果和用户体验。下面将详细...
Unity 图片渐变色的实现
qq_42862278的博客
02-24 3764
示例： 实现方法： 创建一个Image 再Image组件上添加 Gradient 组件 调节Gradient组件中的Color1 和 Color2 即可 Gradient源码: /* *FileName: Gradient.cs *Author: M *Date: 2022/02/23 13:51:26 *UnityVersion: 2020.3.0f1c1 *Description: 图片渐变效果 */ using UnityEngine
Unity渐变色实现
HDarker的博客
09-28 3171
项目场景： 在Unity中实现给物体赋予渐变色。 问题描述： 在Unity中要实现给物体赋予渐变色，实现类似于应力云图分布的效果。 for (int j = 0; j < Num; j++) { float Scale_y = _Heighter[j]; GapInfos[j] = new GapInfo(i, 0, j, _Sphere); GapInfos[j]._Sphere.transform.localPosition = new Vector3(0, 0.5f,
Unity5的uGUI中实现文字渐变效果(Gradient)
langresser的专栏
12-03 1万+
代码如下： using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; [AddComponentMenu("UI/Effects/Gradient")] public class Gradient : BaseMeshEffect { [Ser
Unity实现UI渐变效果（UGUI）
热门推荐
Kiboo的博客
04-19 2万+
在做背包系统时，在提示面板中想实现的更加炫酷点，决定使用渐变效果来提示档次 渐变效果实现采用改变该UI的透明度来控制其显示和隐藏 在UI对象上添加Canvas Group组件 通过控制Alpha改变其透明度来控制显示和隐藏（Alpha=0隐藏；Alpha=1显示）（Blocks Raycasts=true可以交互；Blocks Raycasts=false无法交互） 添加一个脚本...
Unity urp2d ShaderGraph 实现一个黑白转彩色的场景渐变效果 设计思路
m0_51776409的博客
10-29 3870
那只能走走别的方向了，仔细想想，原来的shader也确实不太完美，因为我们要的是整个画面的黑白，而上面的shader则需要给每个场景物品都安装这个shader跑计算的话，无疑是降低了性能和扩展性的。我们可以放弃if节点，改用lerp在两个色域中做插值，就可以优化渐变效果，插值需要一个0-1的参数，我们选择使用“Saturate”节点，这个节点可以将一个浮点值映射到[0,1]的范围内，即输入大于1时=1，输入小于0时等于0，然后将结果连接到Lerp节点就可以了。这样我们这个效果就成功实现了。
Unity实现UGUI空物体颜色渐变的描边方法
他在试图用代码书写这个世界，字里行间温柔尽显。勿忘初心，努力做有价值的技术文章。
05-12 2661
当我们有UI描边需求时，可以考虑使用Unity原生自带两个组件的Outline和Shadow实现对于UI的描边，但是弊端还是很大的，因为这个两组件会造成顶点数和三角面数加倍，导致就是很耗电脑性能！而且挂载到UI空物体上是没有描边效果的。我们只能另寻他法，UGUI为我们提供了一个类MaskableGraphic帮助我们可以自定义重构UI组件,博客将演示如何重写其 OnPopulateMesh方法绘制线框，实现ui空物体的描边，并且可以实现渐变色的UI描边。
项目实战 ---- 商用落地视频搜索系统(5)---service层核心
最新发布
talentyiyy的专栏
09-03 331
之前的 1-5 重点在介绍系统的实现架构，录入数据的组织形式，存储模式，search 方式，以及后期算法等。现在来看，基本的后端实现我们都具备了，当然后期还会带着各位进一步优化，但从数据结构及录入与query的体现架构来看，系统运作经过前期纯后台测试，还是很不错的。这里的设计核心思想与MVC很类似，现在的软件设计概念层出不穷，后来又搞了一个mvvc，其实最基本的核心思想都大同小异，model，view ，controler。而上面还有UI部分的 controler，那是与页面接壤的service 部分。
unity dotween字体颜色渐变
07-11
在Unity中，使用DOTween插件可以实现字体颜色的渐变效果。下面是一个简单的示例代码： ```csharp using UnityEngine; using DG.Tweening; using TMPro; public class TextColorGradient : MonoBehaviour { public TMP_Text text; public Color startColor; public Color endColor; public float duration = 1f; void Start() { // 设置初始颜色 text.color = startColor; // 使用DOTween插件实现颜色渐变动画 text.DOColor(endColor, duration); } } ``` 在上面的示例中，首先需要使用TMP_Text组件来显示文本。你可以将其添加到一个UI元素上，或者创建一个3D对象并将其放置在场景中。 在Start()方法中，我们设置了初始颜色，然后使用`DOColor()`方法来实现颜色渐变动画。`DOColor()`方法接受目标颜色和持续时间作为参数。 你可以根据需要调整代码中的颜色值和持续时间。确保在使用之前导入DOTween插件到Unity项目中。 希望这可以帮助到你！如果有更多问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值