unity游戏开发之NGUI的UISprite染色

      游戏的UI开发中常常会遇到染色问题。比如button失效变灰的效果，同一个道具通过策划表配的颜色值染上红绿蓝紫等颜色，效果例如以下

       最笨最挫的方法当然是让美术多出几个资源图。这种一个缺点是浪费资源，在手游上资源的大小显得尤为重要。并且不好维护和复用。改动一个资源须要同一时候改动其它颜色的多个同类资源。一种比較好的解决方式是通过更换渲染的材质，用染色材质取代原来的材质。然后把原来材质的主纹理和透明纹理赋值给新的材质。这样就能够实现用程序动态切换颜色。并且仅仅须要一个基础资源。节省资源大小。easy维护。

以下给出这个解决方式的流程图。例如以下图所看到的

       以下写一个样例，通过按r键，g键。b键。y键来动态切换染红色，染绿色。染蓝色，灰化效果。项目的GameObject图例如以下

染色普通颜色的材质相应的shader例如以下

Shader "Winter/ChangeColor" {
    Properties {
        _MainTex ("Base (RGB)", 2D) = "white" {}
        _Color ("Main Color", Color) = (1,1,1,1)

    }
    SubShader {
        Tags { "Queue" = "Transparent+10" }
        LOD 200
         Pass
         {
         ZWrite On
         ZTest Off


            Blend SrcAlpha OneMinusSrcAlpha
            Lighting Off
            //Cull Off
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            sampler2D _MainTex;
            fixed4 _Color;
            float _ColorCtrl;

            struct v2f
            {
                float4  pos : SV_POSITION;
                float2  uv : TEXCOORD0;
            };

            float4 _MainTex_ST;

            v2f vert (appdata_base v)
            {
                v2f o;
                o.pos = mul (UNITY_MATRIX_MVP, v.vertex);
                o.uv = TRANSFORM_TEX (v.texcoord, _MainTex);
                return o;
            }

            fixed4 frag (v2f i) : COLOR
            {
                fixed4 texcol = tex2D (_MainTex, i.uv);
                result = texcol * _Color;
                result.a = texcol.a;

                return result;
            }
            ENDCG
         }
    }
}

       不同颜色要创建不同的材质，而且设置其颜色值，例如以下

   

灰化效果比較特殊，颜色值不能弄成(0,0,0,1)或者(1,1,1,1)。

须要用到灰化函数

终于颜色的r = (原图r+原图g+原图b)*0.33

终于颜色的g = (原图r+原图g+原图b)*0.33 

终于颜色的b = (原图r+原图g+原图b)*0.33

终于颜色的透明值 = 原图的透明值

依据上面。有以下的灰化shader

Shader "Winter/Gray"
{
    Properties
    {
         _MainTex ("Base (RGB)", 2D) = "white" { }
    }
    SubShader
    {

         Tags
         {
            "Queue" = "Transparent+10"
         }
         Pass
         {
            Lighting Off
            ZTest Off
            Cull Off
            Blend SrcAlpha OneMinusSrcAlpha
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            sampler2D _MainTex;
            sampler2D _AlphaTex;
            half4 _Color;

            struct v2f
            {
                float4  pos : SV_POSITION;
                float2  uv : TEXCOORD0;
            };

            half4 _MainTex_ST;
            half4 _AlphaTex_ST;

            v2f vert (appdata_base v)
            {
                v2f o;
                o.pos = mul (UNITY_MATRIX_MVP, v.vertex);
                o.uv = TRANSFORM_TEX (v.texcoord, _MainTex);
                return o;
            }

            half4 frag (v2f i) : COLOR
            {
                half4 texcol = tex2D (_MainTex, i.uv);
                half4 result = half4((texcol.r + texcol.g + texcol.b) * 0.33f,(texcol.r + texcol.g + texcol.b) * 0.33f,(texcol.r + texcol.g + texcol.b) * 0.33f,texcol.a);
                return result;
            }
            ENDCG
         }
    }
}

       接着就是要改动Ngui的UISprite源代码。加入一个渲染的材质WinterMaterial, 在读取material值的时候。假设有自己定义的渲染材质，则须要读取自己定义渲染材质

public override Material material
    {
        get
        {
            Material mat = base.material;

            if (mat == null)
            {
                mat = (mAtlas != null) ? mAtlas.spriteMaterial : null;
                mSprite = null;
                material = mat;
                if (mat != null) UpdateUVs(true);
            }

            if (WinterMaterial!=null)
            {
                return WinterMaterial;
            }
            else
            {
                return mat;
            }
        }
    }

然后。加入下面几个染色函数

public void ShowAsRed()
{
    ShowAsColor("file:///D:/u3dAB/WinterRedMat.assetbundle", WinterRedMat);
}

public void ShowAsGreen()
{
    ShowAsColor("file:///D:/u3dAB/WinterGreenMat.assetbundle", WinterGreenMat);
}

public void ShowAsBlue()
{
    ShowAsColor("file:///D:/u3dAB/WinterBlueMat.assetbundle", WinterBlueMat);
}//须要加入染色值的，则须要加入材质和染色函数
public void ShowAsGray()
{
    StartCoroutine(<span style="font-family: Arial, Helvetica, sans-serif;">//自己定义的www函数</span>

        IzUtils.LoadAB("file:///D:/u3dAB/WinterGrayMat.assetbundle", (w) =>
        {//assetbundle是打包好的材质
            Material mat = w.assetBundle.mainAsset as Material;
            mat.mainTexture = material.mainTexture;
            WinterMaterial = mat;
            w.assetBundle.Unload(false);
            RefreshPanel(gameObject);
        })
    );
}
private void ShowAsColor(string matName, Material colorMaterial)
{
    if (WinterMaterial == null || colorMaterial != WinterMaterial)
    {
        if (colorMaterial == null)
        {
            StartCoroutine(
                IzUtils.LoadAB(matName, (w) =>
                {
                    Material mat = w.assetBundle.mainAsset as Material;
             mat.mainTexture = material.mainTexture;
                    colorMaterial = mat;
                    WinterMaterial = mat;
                    w.assetBundle.Unload(false);
                    RefreshPanel(gameObject);
    })
            );
        }
        else
        {
            WinterMaterial = colorMaterial;
            RefreshPanel(gameObject);
        }
    }
}
GameObject GetMostClosePanel(Transform rootTrans)
{
    if (rootTrans.GetComponent<UIPanel>() != null)
    {
        return rootTrans.gameObject;
    }
    else if (rootTrans.parent == null)
    {
        return null;
    }
    else
    {
        return GetMostClosePanel(rootTrans.parent);
    }
}

GameObject panelObj = null;
public bool selfRefresh = true;

void RefreshPanel(GameObject go)
{
    if (!selfRefresh)
        return;

    if (panelObj == null)
    {
        panelObj = GetMostClosePanel(go.transform);
    }

    if (panelObj != null)
    {
        panelObj.GetComponent<UIPanel>().enabled = false;
        panelObj.GetComponent<UIPanel>().enabled = true;
        go.SetActive(false);
        go.SetActive(true);
    }
}

主程序调用方法

using UnityEngine;
using System.Collections;

public class ChangeColorExample : MonoBehaviour {
        private UISprite m_kSprite;
    void Start ()

   {
        GameObject obj = GameObject.Find("Root/Camera/Anchor/Panel/Sprite");
        m_kSprite = obj.GetComponent<UISprite>();


void Update()
{
    if (Input.GetKeyUp(KeyCode.R))
    {
        m_kSprite.ShowAsRed();
    }
    else if (Input.GetKeyUp(KeyCode.G))
    {
        m_kSprite.ShowAsGreen();
    }
    else if (Input.GetKeyUp(KeyCode.B))
    {
        m_kSprite.ShowAsBlue();
    }
    else if (Input.GetKeyUp(KeyCode.Y))
    {
        m_kSprite.ShowAsGray();
    }
}

核心的代码部分如上图所看到的，这样就能够通过按键rgby来切换染红绿蓝灰的效果。

效果如上面第一幅图所看到的。

       总结，用程序来实现动态染色能够高度复用资源，节省空间大小。

可是资源的划分须要注意的一点是，假设在一个UIPanel里面有两个不同图集须要用同一个材质进行染色，那么会出现当中的一个出现纹理错乱的现象。眼下的解决方式是做多一个颜色值同样的材质。不同的图集用不同的染色材质，这样能够解决上面说的纹理错乱现象。

还有一个方法是设法把不同的图集弄到一块。这样也能够避免这个问题。