devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Unity中实现UI渐变_unity ui渐变色

作者：2023面试高手 | 2024-02-18 10:09:18

赞

踩

unity ui渐变色

一：效果演示

二：使用


GradientDir：渐变方向
ColorArray：颜色数组

三：实现原理

通过添加顶点并设置顶点数据实现渐变，注意颜色数组数量越多顶点和三角形数量也会增加
UGUI源码解析——BaseMeshEffect

四：代码实现

  1. using System.Collections.Generic;
  2. using UnityEngine;
  3. using UnityEngine.UI;
  4.  
  5. /*
  6.     Text顶点索引顺序
  7.     5-0 ---- 1
  8.     | \    |
  9.     |  \   |
  10.     |   \  |
  11.     |    \ |
  12.     4-----3-2
  13. */
  14. /// <summary>
  15. /// 渐变
  16. /// </summary>
  17. [DisallowMultipleComponent]
  18. [AddComponentMenu("LFramework/UI/Effects/Gradient", 1)]
  19. public class Gradient : BaseMeshEffect
  20. {
  21.     protected Gradient()
  22.     {
  23.  
  24.     }
  25.  
  26.     /// <summary>
  27.     /// 渐变方向
  28.     /// </summary>
  29.     public enum EGradientDir
  30.     {
  31.         TopToBottom,
  32.         BottomToTop,
  33.         LeftToRight,
  34.         RightToLeft,
  35.     }
  36.  
  37.     /// <summary>
  38.     /// 渐变方向
  39.     /// </summary>
  40.     [SerializeField]
  41.     EGradientDir m_GradientDir = EGradientDir.TopToBottom;
  42.     public EGradientDir GradientDir
  43.     {
  44.         get
  45.         {
  46.             return m_GradientDir;
  47.         }
  48.         set
  49.         {
  50.             m_GradientDir = value;
  51.             graphic.SetVerticesDirty();
  52.         }
  53.     }
  54.  
  55.     //颜色数组
  56.     [SerializeField]
  57.     Color32[] m_ColorArray = new Color32[2] { Color.black, Color.white };
  58.     public Color32[] ColorArray
  59.     {
  60.         get
  61.         {
  62.             return m_ColorArray;
  63.         }
  64.         set
  65.         {
  66.             m_ColorArray = value;
  67.             graphic.SetVerticesDirty();
  68.         }
  69.     }
  70.  
  71.     //顶点缓存
  72.     List<UIVertex> m_VertexCache = new List<UIVertex>();
  73.     //绘制使用的顶点列表
  74.     List<UIVertex> m_VertexList = new List<UIVertex>();
  75.  
  76.     public override void ModifyMesh(VertexHelper vh)
  77.     {
  78.         if (!IsActive())
  79.         {
  80.             return;
  81.         }
  82.  
  83.         vh.GetUIVertexStream(m_VertexCache);
  84.  
  85.         switch (m_GradientDir)
  86.         {
  87.             case EGradientDir.TopToBottom:
  88.                 ApplyGradient_TopToBottom(m_VertexCache);
  89.                 break;
  90.             case EGradientDir.BottomToTop:
  91.                 ApplyGradient_BottomToTop(m_VertexCache);
  92.                 break;
  93.             case EGradientDir.LeftToRight:
  94.                 ApplyGradient_LeftToRight(m_VertexCache);
  95.                 break;
  96.             case EGradientDir.RightToLeft:
  97.                 ApplyGradient_RightToLeft(m_VertexCache);
  98.                 break;
  99.             default:
  100.                 break;
  101.         }
  102.  
  103.         vh.Clear();
  104.         vh.AddUIVertexTriangleStream(m_VertexList);
  105.         m_VertexCache.Clear();
  106.         m_VertexList.Clear();
  107.     }
  108.  
  109.     void ApplyGradient_TopToBottom(List<UIVertex> vertexCache)
  110.     {
  111.         if (vertexCache.Count == 0)
  112.         {
  113.             return;
  114.         }
  115.         if (m_ColorArray.Length < 2)
  116.         {
  117.             return;
  118.         }
  119.  
  120.         int vertexCountPer = 6;//每一个文字的顶点数
  121.         int vertexCount = vertexCache.Count;
  122.         int colorCount = m_ColorArray.Length;
  123.         for (int n = 0; n < vertexCount / 6; n++)
  124.         {
  125.             UIVertex lastVertexLB = new UIVertex();
  126.             UIVertex lastVertexRB = new UIVertex();
  127.             for (int i = 0; i < colorCount - 1; i++)
  128.             {
  129.                 UIVertex vertexRT;
  130.                 UIVertex vertexLT;
  131.                 UIVertex vertexRB;
  132.                 UIVertex vertexLB;
  133.  
  134.                 //左上角和右上角
  135.                 if (i == 0)
  136.                 {
  137.                     vertexLT = CalcVertex(vertexCache[n * vertexCountPer + 0], m_ColorArray[i]);
  138.                     vertexRT = CalcVertex(vertexCache[n * vertexCountPer + 1], m_ColorArray[i]);
  139.                 }
  140.                 else
  141.                 {
  142.                     vertexLT = lastVertexLB;
  143.                     vertexRT = lastVertexRB;
  144.                 }
  145.  
  146.                 //左下角和右下角
  147.                 if (i == colorCount - 2)
  148.                 {
  149.                     vertexLB = CalcVertex(vertexCache[n * vertexCountPer + 4], m_ColorArray[i + 1]);
  150.                     vertexRB = CalcVertex(vertexCache[n * vertexCountPer + 2], m_ColorArray[i + 1]);
  151.                 }
  152.                 else
  153.                 {
  154.                     vertexLB = CalcVertex(vertexCache[n * vertexCountPer + 4], vertexCache[n * vertexCountPer + 0],
  155.                         (colorCount - i - 2) * 1f / (colorCount - 1), m_ColorArray[i + 1]);
  156.                     vertexRB = CalcVertex(vertexCache[n * vertexCountPer + 2], vertexCache[n * vertexCountPer + 1],
  157.                         (colorCount - i - 2) * 1f / (colorCount - 1), m_ColorArray[i + 1]);
  158.                 }
  159.  
  160.                 lastVertexLB = vertexLB;
  161.                 lastVertexRB = vertexRB;
  162.  
  163.                 m_VertexList.Add(vertexLT);
  164.                 m_VertexList.Add(vertexRT);
  165.                 m_VertexList.Add(vertexRB);
  166.                 m_VertexList.Add(vertexRB);
  167.                 m_VertexList.Add(vertexLB);
  168.                 m_VertexList.Add(vertexLT);
  169.             }
  170.         }
  171.     }
  172.  
  173.     void ApplyGradient_BottomToTop(List<UIVertex> vertexCache)
  174.     {
  175.         if (vertexCache.Count == 0)
  176.         {
  177.             return;
  178.         }
  179.         if (m_ColorArray.Length < 2)
  180.         {
  181.             return;
  182.         }
  183.  
  184.         int vertexCountPer = 6;//每一个文字的顶点数
  185.         int vertexCount = vertexCache.Count;
  186.         int colorCount = m_ColorArray.Length;
  187.         for (int n = 0; n < vertexCount / 6; n++)
  188.         {
  189.             UIVertex lastVertexLT = new UIVertex();
  190.             UIVertex lastVertexRT = new UIVertex();
  191.             for (int i = 0; i < colorCount - 1; i++)
  192.             {
  193.                 UIVertex vertexRT;
  194.                 UIVertex vertexLT;
  195.                 UIVertex vertexRB;
  196.                 UIVertex vertexLB;
  197.  
  198.                 //左下角和右下角
  199.                 if (i == 0)
  200.                 {
  201.                     vertexLB = CalcVertex(vertexCache[n * vertexCountPer + 4], m_ColorArray[i]);
  202.                     vertexRB = CalcVertex(vertexCache[n * vertexCountPer + 2], m_ColorArray[i]);
  203.                 }
  204.                 else
  205.                 {
  206.                     vertexLB = lastVertexLT;
  207.                     vertexRB = lastVertexRT;
  208.                 }
  209.  
  210.                 //左上角和右上角
  211.                 if (i == colorCount - 2)
  212.                 {
  213.                     vertexLT = CalcVertex(vertexCache[n * vertexCountPer + 0], m_ColorArray[i + 1]);
  214.                     vertexRT = CalcVertex(vertexCache[n * vertexCountPer + 1], m_ColorArray[i + 1]);
  215.                 }
  216.                 else
  217.                 {
  218.                     vertexLT = CalcVertex(vertexCache[n * vertexCountPer + 0], vertexCache[n * vertexCountPer + 4],
  219.                         (colorCount - i - 2) * 1f / (colorCount - 1), m_ColorArray[i + 1]);
  220.                     vertexRT = CalcVertex(vertexCache[n * vertexCountPer + 1], vertexCache[n * vertexCountPer + 2],
  221.                         (colorCount - i - 2) * 1f / (colorCount - 1), m_ColorArray[i + 1]);
  222.                 }
  223.  
  224.                 lastVertexLT = vertexLT;
  225.                 lastVertexRT = vertexRT;
  226.  
  227.                 m_VertexList.Add(vertexLT);
  228.                 m_VertexList.Add(vertexRT);
  229.                 m_VertexList.Add(vertexRB);
  230.                 m_VertexList.Add(vertexRB);
  231.                 m_VertexList.Add(vertexLB);
  232.                 m_VertexList.Add(vertexLT);
  233.             }
  234.         }
  235.     }
  236.  
  237.     void ApplyGradient_LeftToRight(List<UIVertex> vertexCache)
  238.     {
  239.         if (vertexCache.Count == 0)
  240.         {
  241.             return;
  242.         }
  243.         if (m_ColorArray.Length < 2)
  244.         {
  245.             return;
  246.         }
  247.  
  248.         int vertexCountPer = 6;//每一个文字的顶点数
  249.         int vertexCount = vertexCache.Count;
  250.         int colorCount = m_ColorArray.Length;
  251.         for (int n = 0; n < vertexCount / 6; n++)
  252.         {
  253.             UIVertex lastVertexRT = new UIVertex();
  254.             UIVertex lastVertexRB = new UIVertex();
  255.             for (int i = 0; i < colorCount - 1; i++)
  256.             {
  257.                 UIVertex vertexRT;
  258.                 UIVertex vertexLT;
  259.                 UIVertex vertexRB;
  260.                 UIVertex vertexLB;
  261.  
  262.                 //左上角和左下角
  263.                 if (i == 0)
  264.                 {
  265.                     vertexLT = CalcVertex(vertexCache[n * vertexCountPer + 0], m_ColorArray[i]);
  266.                     vertexLB = CalcVertex(vertexCache[n * vertexCountPer + 4], m_ColorArray[i]);
  267.                 }
  268.                 else
  269.                 {
  270.                     vertexLT = lastVertexRT;
  271.                     vertexLB = lastVertexRB;
  272.                 }
  273.  
  274.                 //右上角和右下角
  275.                 if (i == colorCount - 2)
  276.                 {
  277.                     vertexRT = CalcVertex(vertexCache[n * vertexCountPer + 1], m_ColorArray[i + 1]);
  278.                     vertexRB = CalcVertex(vertexCache[n * vertexCountPer + 2], m_ColorArray[i + 1]);
  279.                 }
  280.                 else
  281.                 {
  282.                     vertexRT = CalcVertex(vertexCache[n * vertexCountPer + 1], vertexCache[n * vertexCountPer + 0],
  283.                         (colorCount - i - 2) * 1f / (colorCount - 1), m_ColorArray[i + 1]);
  284.                     vertexRB = CalcVertex(vertexCache[n * vertexCountPer + 2], vertexCache[n * vertexCountPer + 4],
  285.                         (colorCount - i - 2) * 1f / (colorCount - 1), m_ColorArray[i + 1]);
  286.                 }
  287.  
  288.                 lastVertexRT = vertexRT;
  289.                 lastVertexRB = vertexRB;
  290.  
  291.                 m_VertexList.Add(vertexLT);
  292.                 m_VertexList.Add(vertexRT);
  293.                 m_VertexList.Add(vertexRB);
  294.                 m_VertexList.Add(vertexRB);
  295.                 m_VertexList.Add(vertexLB);
  296.                 m_VertexList.Add(vertexLT);
  297.             }
  298.         }
  299.     }
  300.  
  301.     void ApplyGradient_RightToLeft(List<UIVertex> vertexCache)
  302.     {
  303.         if (vertexCache.Count == 0)
  304.         {
  305.             return;
  306.         }
  307.         if (m_ColorArray.Length < 2)
  308.         {
  309.             return;
  310.         }
  311.  
  312.         int vertexCountPer = 6;//每一个文字的顶点数
  313.         int vertexCount = vertexCache.Count;
  314.         int colorCount = m_ColorArray.Length;
  315.         for (int n = 0; n < vertexCount / 6; n++)
  316.         {
  317.             UIVertex lastVertexLT = new UIVertex();
  318.             UIVertex lastVertexLB = new UIVertex();
  319.             for (int i = 0; i < colorCount - 1; i++)
  320.             {
  321.                 UIVertex vertexRT;
  322.                 UIVertex vertexLT;
  323.                 UIVertex vertexRB;
  324.                 UIVertex vertexLB;
  325.  
  326.                 //右上角和右下角
  327.                 if (i == 0)
  328.                 {
  329.                     vertexRT = CalcVertex(vertexCache[n * vertexCountPer + 1], m_ColorArray[i]);
  330.                     vertexRB = CalcVertex(vertexCache[n * vertexCountPer + 2], m_ColorArray[i]);
  331.                 }
  332.                 else
  333.                 {
  334.                     vertexRT = lastVertexLT;
  335.                     vertexRB = lastVertexLB;
  336.                 }
  337.  
  338.                 //左上角和左下角
  339.                 if (i == colorCount - 2)
  340.                 {
  341.                     vertexLT = CalcVertex(vertexCache[n * vertexCountPer + 0], m_ColorArray[i + 1]);
  342.                     vertexLB = CalcVertex(vertexCache[n * vertexCountPer + 4], m_ColorArray[i + 1]);
  343.                 }
  344.                 else
  345.                 {
  346.                     vertexLT = CalcVertex(vertexCache[n * vertexCountPer + 0], vertexCache[n * vertexCountPer + 1],
  347.                         (colorCount - i - 2) * 1f / (colorCount - 1), m_ColorArray[i + 1]);
  348.                     vertexLB = CalcVertex(vertexCache[n * vertexCountPer + 4], vertexCache[n * vertexCountPer + 2],
  349.                         (colorCount - i - 2) * 1f / (colorCount - 1), m_ColorArray[i + 1]);
  350.                 }
  351.  
  352.                 lastVertexLT = vertexLT;
  353.                 lastVertexLB = vertexLB;
  354.  
  355.                 m_VertexList.Add(vertexLT);
  356.                 m_VertexList.Add(vertexRT);
  357.                 m_VertexList.Add(vertexRB);
  358.                 m_VertexList.Add(vertexRB);
  359.                 m_VertexList.Add(vertexLB);
  360.                 m_VertexList.Add(vertexLT);
  361.             }
  362.         }
  363.     }
  364.  
  365.     /// <summary>
  366.     /// 计算顶点数据(只计算颜色)
  367.     /// </summary>
  368.     UIVertex CalcVertex(UIVertex vertex, Color32 color)
  369.     {
  370.         vertex.color = color;
  371.         return vertex;
  372.     }
  373.  
  374.     /// <summary>
  375.     /// 计算顶点数据
  376.     /// </summary>
  377.     UIVertex CalcVertex(UIVertex vertexA, UIVertex vertexB, float ratio, Color32 color)
  378.     {
  379.         UIVertex vertexTemp = new UIVertex();
  380.         vertexTemp.position = (vertexB.position - vertexA.position) * ratio + vertexA.position;
  381.         vertexTemp.color = color;
  382.         vertexTemp.normal = (vertexB.normal - vertexA.normal) * ratio + vertexA.normal;
  383.         vertexTemp.tangent = (vertexB.tangent - vertexA.tangent) * ratio + vertexA.tangent;
  384.         vertexTemp.uv0 = (vertexB.uv0 - vertexA.uv0) * ratio + vertexA.uv0;
  385.         vertexTemp.uv1 = (vertexB.uv1 - vertexA.uv1) * ratio + vertexA.uv1;
  386.         return vertexTemp;
  387.     }
  388. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/107203
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号