首页 > 代码库 > unity游戏开发之NGUI的UISprite染色

unity游戏开发之NGUI的UISprite染色

2024-07-29 23:44:44   219人阅读

 欢迎来到unity学习、unity培训、unity企业培训教育专区，这里有很多U3D资源、U3D培训视频、U3D教程、U3D常见问题、U3D项目源码，我们致力于打造业内unity3d培训、学习第一品牌。


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



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

下面给出这个解决方案的流程图，如下图所示



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


染色普通颜色的材质对应的shader如下

[plain]
  1. Shader "Winter/ChangeColor" {  
  2.     Properties {  
  3.         _MainTex ("Base (RGB)", 2D) = "white" {}  
  4.         _Color ("Main Color", Color) = (1,1,1,1)  
  5.           
  6.     }  
  7.     SubShader {  
  8.         Tags { "Queue" = "Transparent+10" }  
  9.         LOD 200  
  10.          Pass  
  11.          {  
  12.          ZWrite On  
  13.          ZTest Off  
  14.   
  15.   
  16.             Blend SrcAlpha OneMinusSrcAlpha  
  17.             Lighting Off  
  18.             //Cull Off  
  19.             CGPROGRAM  
  20.             #pragma vertex vert  
  21.             #pragma fragment frag  
  22.   
  23.             #include "UnityCG.cginc"  
  24.   
  25.             sampler2D _MainTex;  
  26.             fixed4 _Color;  
  27.             float _ColorCtrl;  
  28.   
  29.             struct v2f   
  30.             {  
  31.                 float4  pos : SV_POSITION;  
  32.                 float2  uv : TEXCOORD0;  
  33.             };  
  34.   
  35.             float4 _MainTex_ST;  
  36.   
  37.             v2f vert (appdata_base v)  
  38.             {  
  39.                 v2f o;  
  40.                 o.pos = mul (UNITY_MATRIX_MVP, v.vertex);  
  41.                 o.uv = TRANSFORM_TEX (v.texcoord, _MainTex);  
  42.                 return o;  
  43.             }  
  44.   
  45.             fixed4 frag (v2f i) : COLOR  
  46.             {  
  47.                 fixed4 texcol = tex2D (_MainTex, i.uv);  
  48.                 result = texcol * _Color;  
  49.                 result.a = texcol.a;  
  50.   
  51.                 return result;  
  52.             }  
  53.             ENDCG  
  54.          }  
  55.     }   
  56. }  

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

   

灰化效果比较特殊，颜色值不能弄成(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

[plain]
  1. Shader "Winter/Gray"   
  2. {  
  3.     Properties   
  4.     {  
  5.          _MainTex ("Base (RGB)", 2D) = "white" { }  
  6.     }  
  7.     SubShader  
  8.     {  
  9.   
  10.          Tags  
  11.          {  
  12.             "Queue" = "Transparent+10"  
  13.          }  
  14.          Pass  
  15.          {  
  16.             Lighting Off  
  17.             ZTest Off  
  18.             Cull Off  
  19.             Blend SrcAlpha OneMinusSrcAlpha  
  20.             CGPROGRAM  
  21.             #pragma vertex vert  
  22.             #pragma fragment frag  
  23.   
  24.             #include "UnityCG.cginc"  
  25.   
  26.             sampler2D _MainTex;  
  27.             sampler2D _AlphaTex;  
  28.             half4 _Color;  
  29.           
  30.             struct v2f   
  31.             {  
  32.                 float4  pos : SV_POSITION;  
  33.                 float2  uv : TEXCOORD0;  
  34.             };  
  35.   
  36.             half4 _MainTex_ST;  
  37.             half4 _AlphaTex_ST;  
  38.   
  39.             v2f vert (appdata_base v)  
  40.             {  
  41.                 v2f o;  
  42.                 o.pos = mul (UNITY_MATRIX_MVP, v.vertex);  
  43.                 o.uv = TRANSFORM_TEX (v.texcoord, _MainTex);  
  44.                 return o;  
  45.             }  
  46.   
  47.             half4 frag (v2f i) : COLOR  
  48.             {  
  49.                 half4 texcol = tex2D (_MainTex, i.uv);  
  50.                 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);  
  51.                 return result;  
  52.             }  
  53.             ENDCG  
  54.          }  
  55.     }  
  56. }   

       接着就是要修改Ngui的UISprite源码，添加一个渲染的材质WinterMaterial, 在读取material值的时候，如果有自定义的渲染材质，则需要读取自定义渲染材质

[csharp]
  1. public override Material material  
  2.     {  
  3.         get  
  4.         {  
  5.             Material mat = base.material;  
  6.   
  7.             if (mat == null)  
  8.             {  
  9.                 mat = (mAtlas != null) ? mAtlas.spriteMaterial : null;  
  10.                 mSprite = null;  
  11.                 material = mat;  
  12.                 if (mat != null) UpdateUVs(true);  
  13.             }  
  14.               
  15.             if (WinterMaterial!=null)  
  16.             {  
  17.                 return WinterMaterial;  
  18.             }  
  19.             else  
  20.             {  
  21.                 return mat;  
  22.             }  
  23.         }  
  24.     }  

然后，添加以下几个染色函数

[csharp]
  1. public void ShowAsRed()  
  2. {  
  3.     ShowAsColor("file:///D:/u3dAB/WinterRedMat.assetbundle", WinterRedMat);  
  4. }  
  5.   
  6. public void ShowAsGreen()  
  7. {  
  8.     ShowAsColor("file:///D:/u3dAB/WinterGreenMat.assetbundle", WinterGreenMat);  
  9. }  
  10.   
  11. public void ShowAsBlue()  
  12. {  
  13.     ShowAsColor("file:///D:/u3dAB/WinterBlueMat.assetbundle", WinterBlueMat);  
  14. }//需要添加染色值的，则需要添加材质和染色函数  
  15. public void ShowAsGray()  
  16. {  
  17.     StartCoroutine(<span style="font-family: Arial, Helvetica, sans-serif;">//自定义的www函数</span>  
[csharp]
  1.         IzUtils.LoadAB("file:///D:/u3dAB/WinterGrayMat.assetbundle", (w) =>  
  2.         {//assetbundle是打包好的材质  
  3.             Material mat = w.assetBundle.mainAsset as Material;  
  4.             mat.mainTexture = material.mainTexture;  
  5.             WinterMaterial = mat;  
  6.             w.assetBundle.Unload(false);  
  7.             RefreshPanel(gameObject);      
  8.         })  
  9.     );   
  10. }  
  11. private void ShowAsColor(string matName, Material colorMaterial)  
  12. {  
  13.     if (WinterMaterial == null || colorMaterial != WinterMaterial)  
  14.     {  
  15.         if (colorMaterial == null)  
  16.         {  
  17.             StartCoroutine(  
  18.                 IzUtils.LoadAB(matName, (w) =>  
  19.                 {  
  20.                     Material mat = w.assetBundle.mainAsset as Material;  
  21.              mat.mainTexture = material.mainTexture;  
  22.                     colorMaterial = mat;  
  23.                     WinterMaterial = mat;  
  24.                     w.assetBundle.Unload(false);      
  25.                     RefreshPanel(gameObject);  
  26.     })  
  27.             );  
  28.         }  
  29.         else  
  30.         {  
  31.             WinterMaterial = colorMaterial;  
  32.             RefreshPanel(gameObject);  
  33.         }  
  34.     }  
  35. }  
  36. GameObject GetMostClosePanel(Transform rootTrans)  
  37. {  
  38.     if (rootTrans.GetComponent<UIPanel>() != null)  
  39.     {  
  40.         return rootTrans.gameObject;  
  41.     }  
  42.     else if (rootTrans.parent == null)  
  43.     {  
  44.         return null;  
  45.     }  
  46.     else  
  47.     {  
  48.         return GetMostClosePanel(rootTrans.parent);  
  49.     }  
  50. }  
  51.   
  52. GameObject panelObj = null;  
  53. public bool selfRefresh = true;  
  54.   
  55. void RefreshPanel(GameObject go)  
  56. {  
  57.     if (!selfRefresh)  
  58.         return;  
  59.   
  60.     if (panelObj == null)  
  61.     {  
  62.         panelObj = GetMostClosePanel(go.transform);  
  63.     }  
  64.   
  65.     if (panelObj != null)  
  66.     {  
  67.         panelObj.GetComponent<UIPanel>().enabled = false;  
  68.         panelObj.GetComponent<UIPanel>().enabled = true;  
  69.         go.SetActive(false);  
  70.         go.SetActive(true);  
  71.     }  
  72. }  


主程序调用方法

[csharp]
  1. using UnityEngine;  
  2. using System.Collections;  
  3.   
  4. public class ChangeColorExample : MonoBehaviour {  
  5.         private UISprite m_kSprite;  
  6.     void Start ()   
[csharp]
  1.    {  
  2.         GameObject obj = GameObject.Find("Root/Camera/Anchor/Panel/Sprite");  
  3.         m_kSprite = obj.GetComponent<UISprite>();  
  4.   
  5.   
  6. void Update()  
  7. {  
  8.     if (Input.GetKeyUp(KeyCode.R))  
  9.     {  
  10.         m_kSprite.ShowAsRed();  
  11.     }  
  12.     else if (Input.GetKeyUp(KeyCode.G))  
  13.     {  
  14.         m_kSprite.ShowAsGreen();  
  15.     }  
  16.     else if (Input.GetKeyUp(KeyCode.B))  
  17.     {  
  18.         m_kSprite.ShowAsBlue();  
  19.     }  
  20.     else if (Input.GetKeyUp(KeyCode.Y))  
  21.     {  
  22.         m_kSprite.ShowAsGray();  
  23.     }  
  24. }  

核心的代码部分如上图所示，这样就可以通过按键rgby来切换染红绿蓝灰的效果。效果如上面第一幅图所示。

       总结，用程序来实现动态染色可以高度复用资源，节省空间大小。但是资源的划分需要注意的一点是，如果在一个UIPanel里面有两个不同图集需要用同一个材质进行染色，那么会出现其中的一个出现纹理错乱的现象。目前的解决方案是做多一个颜色值相同的材质，不同的图集用不同的染色材质，这样可以解决上面说的纹理错乱现象。另一个方法是设法把不同的图集弄到一块，这样也可以避免这个问题。

更多精彩请点击 http://www.gopedu.com/

unity游戏开发之NGUI的UISprite染色


联系
我们