Unity 图片渐变色的实现

最新推荐文章于 2024-09-08 22:57:57 发布

m_dlwlrma

最新推荐文章于 2024-09-08 22:57:57 发布

阅读量4.6k

点赞数 8

文章标签： unity 游戏引擎

本文链接：https://blog.csdn.net/qq_42862278/article/details/123110887

版权

这篇博客详细介绍了如何在Unity中为UI Image组件添加渐变效果。通过创建Gradient组件，调整Color1和Color2属性，以及设置旋转角度，可以实现自定义颜色渐变。代码示例中提供了一个名为Gradient的脚本，该脚本修改顶点颜色以达到图片渐变视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

示例：

在这里插入图片描述

实现方法：

创建一个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;
using UnityEngine.UI;

[AddComponentMenu("UI/Effects/Gradient")]
public class Gradient : BaseMeshEffect
{
    public Color Color1 = Color.white;
    public Color Color2 = Color.white;

    [Range(-180f, 180f)] public float Angle = -90.0f;

    public override void ModifyMesh(VertexHelper vh)
    {
        if (enabled)
        {
            var rect = graphic.rectTransform.rect;
            var dir = RotationDir(Angle);

            var localPositionMatrix = LocalPositionMatrix(rect, dir);

            var vertex = default(UIVertex);
            for (var i = 0; i < vh.currentVertCount; i++)
            {
                vh.PopulateUIVertex(ref vertex, i);
                var localPosition = localPositionMatrix * vertex.position;
                vertex.color *= Color.Lerp(Color2, Color1, localPosition.y);
                vh.SetUIVertex(vertex, i);
            }
        }
    }

    public struct Matrix2x3
    {
        public float m00, m01, m02, m10, m11, m12;

        public Matrix2x3(float m00, float m01, float m02, float m10, float m11, float m12)
        {
            this.m00 = m00;
            this.m01 = m01;
            this.m02 = m02;
            this.m10 = m10;
            this.m11 = m11;
            this.m12 = m12;
        }

        public static Vector2 operator *(Matrix2x3 m, Vector2 v)
        {
            float x = (m.m00 * v.x) - (m.m01 * v.y) + m.m02;
            float y = (m.m10 * v.x) + (m.m11 * v.y) + m.m12;
            return new Vector2(x, y);
        }
    }

    private Matrix2x3 LocalPositionMatrix(Rect rect, Vector2 dir)
    {
        float cos = dir.x;
        float sin = dir.y;
        Vector2 rectMin = rect.min;
        Vector2 rectSize = rect.size;
        float c = 0.5f;
        float ax = rectMin.x / rectSize.x + c;
        float ay = rectMin.y / rectSize.y + c;
        float m00 = cos / rectSize.x;
        float m01 = sin / rectSize.y;
        float m02 = -(ax * cos - ay * sin - c);
        float m10 = sin / rectSize.x;
        float m11 = cos / rectSize.y;
        float m12 = -(ax * sin + ay * cos - c);
        return new Matrix2x3(m00, m01, m02, m10, m11, m12);
    }

    private Vector2 RotationDir(float angle)
    {
        float angleRad = angle * Mathf.Deg2Rad;
        float cos = Mathf.Cos(angleRad);
        float sin = Mathf.Sin(angleRad);
        return new Vector2(cos, sin);
    }
}