1、灰化的需求

很多時候，我們做游戲會遇到一種情況。比如一個技能圖標，可以點的時候是正常的顏色，不能點的時候是灰色的。又比如一個功能，開放的時候是正常顏色，沒開放的時候是灰色的。更常見的就是，比如你的QQ好友，不在線頭像也會變成灰色的。

那么，上述種種情況就出現了一種需求，把一個圖片變成灰色的。

2、說說灰化與灰度

首先，你不能說讓美術出兩套圖，一套彩色一套灰色的吧。這樣會增加資源占用。

那么我們只能想辦法通過程序來處理。

那么我們要先搞清楚，灰色的圖片是怎樣的。

（彩色）

（灰化后）

看到“戰隊升級”那幾個字和他們的背景，就是灰色的啦。

那怎樣把一張圖片變成灰色的，首先，顏色由RGB組成（你想說由CMYK、HSB、甚至索引色，我不會跟你爭這個，畢竟，我是個有素養的人），我們看到的所謂灰色。就是R、G、B這三個值都一樣。也就是說，我們要把圖片原RGB值計算成一個新的RGB，這個新的顏色他的R=G=B。

那好，那RGB怎么計算成一個灰度值呢？

這里涉及到一個灰化的公式，這公式是一個經驗公式，也就是說，這個公式是不固定的。只要你算出來之后，效果是灰色的，那就可以了。

比如，最簡單的，你可以用公式：

k = (r + g + b) / 3

這樣是對RGB取平均值。

還有個心理學公式：

k = r*.222 + g*.707 + b*.071;

這個公式是什么意思呢？大家可以發現，0.222+0.707+0.071 = 1

其實這個公式的意思就是覺得RGB所占比重不同，比如R占0.222。那么他把RGB值分別乘以對應的比重，就得到一個新的值。而公式1，其實也就認為RGB所占比重是一樣的。

這些公式最后得到的都是灰色圖片（因為你R=G=B=k），只不過看起來視覺效果不同。你也可以自己試試其他的比重。

3、NGUI灰化實踐

說那么多，不如動手來擼幾行代碼。

思路就是修改NGUI的Transparent Colored這個shader。我們通過丟失一個顏色來處理。把（0，0，0）作為啟用灰度的開關。

Transparent Colored代碼如下：

Shader "Unlit/Transparent Colored" {Properties{_MainTex ("Base (RGB), Alpha (A)", 2D) = "black" {}}SubShader{LOD 100Tags{"Queue" = "Transparent""IgnoreProjector" = "True""RenderType" = "Transparent"}Cull OffLighting OffZWrite OffFog { Mode Off }Offset -1, -1Blend SrcAlpha OneMinusSrcAlphaPass{CGPROGRAM#pragma vertex vert#pragma fragment frag#include "UnityCG.cginc"struct appdata_t{float4 vertex : POSITION;float2 texcoord : TEXCOORD0;fixed4 color : COLOR;};struct v2f{float4 vertex : SV_POSITION;half2 texcoord : TEXCOORD0;fixed4 color : COLOR;fixed gray : TEXCOORD1; };sampler2D _MainTex;float4 _MainTex_ST;v2f vert (appdata_t v){v2f o;o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);o.texcoord = v.texcoord;o.color = v.color;o.gray = dot(v.color, fixed4(1,1,1,0));return o;}fixed4 frag (v2f i) : COLOR{fixed4 col;col = tex2D(_MainTex, i.texcoord);if(i.gray == 0){float grey = dot(col.rgb, float3(0.299, 0.587, 0.114));col.rgb = float3(grey, grey, grey);}else{col = col * i.color;}return col;}ENDCG}}SubShader{LOD 100Tags{"Queue" = "Transparent""IgnoreProjector" = "True""RenderType" = "Transparent"}Pass{Cull OffLighting OffZWrite OffFog { Mode Off }Offset -1, -1ColorMask RGBAlphaTest Greater .01Blend SrcAlpha OneMinusSrcAlphaColorMaterial AmbientAndDiffuseSetTexture [_MainTex]{Combine Texture * Primary}}} } 我們在vert中計算設置的顏色（下面那個圖為設置的地方）是否全為0

如果全為0，則在frag中應用灰化公式。

就這樣完成了修改了。

4、支持softclip

為了對softclip起做用，請一起修改

Transparent Colored 1.shader、Transparent Colored 2.shader、Transparent Colored 3.shader為如下代碼：

網上可能很多文章沒說到上面3個shader的修改，導致很多開發者在softclip中使用灰化的時候不起效果。

Shader "HIDDEN/Unlit/Transparent Colored 1" {Properties{_MainTex ("Base (RGB), Alpha (A)", 2D) = "black" {}}SubShader{LOD 200Tags{"Queue" = "Transparent""IgnoreProjector" = "True""RenderType" = "Transparent"}Pass{Cull OffLighting OffZWrite OffOffset -1, -1Fog { Mode Off }ColorMask RGBAlphaTest Greater .01Blend SrcAlpha OneMinusSrcAlphaCGPROGRAM#pragma vertex vert#pragma fragment frag#include "UnityCG.cginc"sampler2D _MainTex;float4 _ClipRange0 = float4(0.0, 0.0, 1.0, 1.0);float2 _ClipArgs0 = float2(1000.0, 1000.0);struct appdata_t{float4 vertex : POSITION;half4 color : COLOR;float2 texcoord : TEXCOORD0;};struct v2f{float4 vertex : POSITION;half4 color : COLOR;float2 texcoord : TEXCOORD0;float2 worldPos : TEXCOORD1;};v2f vert (appdata_t v){v2f o;o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);o.color = v.color;o.texcoord = v.texcoord;o.worldPos = v.vertex.xy * _ClipRange0.zw + _ClipRange0.xy;return o;}half4 frag (v2f IN) : COLOR{// Softness factorfloat2 factor = (float2(1.0, 1.0) - abs(IN.worldPos)) * _ClipArgs0;// Sample the texturehalf4 col = tex2D(_MainTex, IN.texcoord);if (dot(IN.color, fixed4(1,1,1,0)) == 0){col = tex2D(_MainTex, IN.texcoord);col.rgb = dot(col.rgb, fixed3(.222,.707,.071));}else{col = col * IN.color;}col.a *= clamp( min(factor.x, factor.y), 0.0, 1.0);return col;}ENDCG}}SubShader{LOD 100Tags{"Queue" = "Transparent""IgnoreProjector" = "True""RenderType" = "Transparent"}Pass{Cull OffLighting OffZWrite OffFog { Mode Off }ColorMask RGBAlphaTest Greater .01Blend SrcAlpha OneMinusSrcAlphaColorMaterial AmbientAndDiffuseSetTexture [_MainTex]{Combine Texture * Primary}}} }
Shader "HIDDEN/Unlit/Transparent Colored 2" {Properties{_MainTex ("Base (RGB), Alpha (A)", 2D) = "black" {}}SubShader{LOD 200Tags{"Queue" = "Transparent""IgnoreProjector" = "True""RenderType" = "Transparent"}Pass{Cull OffLighting OffZWrite OffOffset -1, -1Fog { Mode Off }ColorMask RGBAlphaTest Greater .01Blend SrcAlpha OneMinusSrcAlphaCGPROGRAM#pragma vertex vert#pragma fragment frag#include "UnityCG.cginc"sampler2D _MainTex;float4 _ClipRange0 = float4(0.0, 0.0, 1.0, 1.0);float4 _ClipArgs0 = float4(1000.0, 1000.0, 0.0, 1.0);float4 _ClipRange1 = float4(0.0, 0.0, 1.0, 1.0);float4 _ClipArgs1 = float4(1000.0, 1000.0, 0.0, 1.0);struct appdata_t{float4 vertex : POSITION;half4 color : COLOR;float2 texcoord : TEXCOORD0;};struct v2f{float4 vertex : POSITION;half4 color : COLOR;float2 texcoord : TEXCOORD0;float4 worldPos : TEXCOORD1;};float2 Rotate (float2 v, float2 rot){float2 ret;ret.x = v.x * rot.y - v.y * rot.x;ret.y = v.x * rot.x + v.y * rot.y;return ret;}v2f vert (appdata_t v){v2f o;o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);o.color = v.color;o.texcoord = v.texcoord;o.worldPos.xy = v.vertex.xy * _ClipRange0.zw + _ClipRange0.xy;o.worldPos.zw = Rotate(v.vertex.xy, _ClipArgs1.zw) * _ClipRange1.zw + _ClipRange1.xy;return o;}half4 frag (v2f IN) : COLOR{// First clip regionfloat2 factor = (float2(1.0, 1.0) - abs(IN.worldPos.xy)) * _ClipArgs0.xy;float f = min(factor.x, factor.y);// Second clip regionfactor = (float2(1.0, 1.0) - abs(IN.worldPos.zw)) * _ClipArgs1.xy;f = min(f, min(factor.x, factor.y));half4 col;col = tex2D(_MainTex, IN.texcoord);if (dot(IN.color, fixed4(1,1,1,0)) == 0){col.rgb = dot(col.rgb, fixed3(.222,.707,.071));}else{col = col * IN.color;}col.a *= clamp(f, 0.0, 1.0);return col;}ENDCG}}SubShader{LOD 100Tags{"Queue" = "Transparent""IgnoreProjector" = "True""RenderType" = "Transparent"}Pass{Cull OffLighting OffZWrite OffFog { Mode Off }ColorMask RGBAlphaTest Greater .01Blend SrcAlpha OneMinusSrcAlphaColorMaterial AmbientAndDiffuseSetTexture [_MainTex]{Combine Texture * Primary}}} } Shader "HIDDEN/Unlit/Transparent Colored 3" {Properties{_MainTex ("Base (RGB), Alpha (A)", 2D) = "black" {}}SubShader{LOD 200Tags{"Queue" = "Transparent""IgnoreProjector" = "True""RenderType" = "Transparent"}Pass{Cull OffLighting OffZWrite OffOffset -1, -1Fog { Mode Off }ColorMask RGBAlphaTest Greater .01Blend SrcAlpha OneMinusSrcAlphaCGPROGRAM#pragma vertex vert#pragma fragment frag#include "UnityCG.cginc"sampler2D _MainTex;float4 _ClipRange0 = float4(0.0, 0.0, 1.0, 1.0);float4 _ClipArgs0 = float4(1000.0, 1000.0, 0.0, 1.0);float4 _ClipRange1 = float4(0.0, 0.0, 1.0, 1.0);float4 _ClipArgs1 = float4(1000.0, 1000.0, 0.0, 1.0);float4 _ClipRange2 = float4(0.0, 0.0, 1.0, 1.0);float4 _ClipArgs2 = float4(1000.0, 1000.0, 0.0, 1.0);struct appdata_t{float4 vertex : POSITION;half4 color : COLOR;float2 texcoord : TEXCOORD0;};struct v2f{float4 vertex : POSITION;half4 color : COLOR;float2 texcoord : TEXCOORD0;float4 worldPos : TEXCOORD1;float2 worldPos2 : TEXCOORD2;};float2 Rotate (float2 v, float2 rot){float2 ret;ret.x = v.x * rot.y - v.y * rot.x;ret.y = v.x * rot.x + v.y * rot.y;return ret;}v2f vert (appdata_t v){v2f o;o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);o.color = v.color;o.texcoord = v.texcoord;o.worldPos.xy = v.vertex.xy * _ClipRange0.zw + _ClipRange0.xy;o.worldPos.zw = Rotate(v.vertex.xy, _ClipArgs1.zw) * _ClipRange1.zw + _ClipRange1.xy;o.worldPos2 = Rotate(v.vertex.xy, _ClipArgs2.zw) * _ClipRange2.zw + _ClipRange2.xy;return o;}half4 frag (v2f IN) : COLOR{// First clip regionfloat2 factor = (float2(1.0, 1.0) - abs(IN.worldPos.xy)) * _ClipArgs0.xy;float f = min(factor.x, factor.y);// Second clip regionfactor = (float2(1.0, 1.0) - abs(IN.worldPos.zw)) * _ClipArgs1.xy;f = min(f, min(factor.x, factor.y));// Third clip regionfactor = (float2(1.0, 1.0) - abs(IN.worldPos2)) * _ClipArgs2.xy;f = min(f, min(factor.x, factor.y));// Sample the texturehalf4 col = tex2D(_MainTex, IN.texcoord);if (dot(IN.color, fixed4(1,1,1,0)) == 0){col.rgb = dot(col.rgb, fixed3(.222,.707,.071));}else{col = col * IN.color;}col.a *= clamp(f, 0.0, 1.0);return col;}ENDCG}}SubShader{LOD 100Tags{"Queue" = "Transparent""IgnoreProjector" = "True""RenderType" = "Transparent"}Pass{Cull OffLighting OffZWrite OffFog { Mode Off }ColorMask RGBAlphaTest Greater .01Blend SrcAlpha OneMinusSrcAlphaColorMaterial AmbientAndDiffuseSetTexture [_MainTex]{Combine Texture * Primary}}} }
好，改完了。測試工程稍后上傳。

總結

以上是生活随笔為你收集整理的[Shader]NGUI与灰化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。