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 100
Tags
{
"Queue" = "Transparent"
"IgnoreProjector" = "True"
"RenderType" = "Transparent"
}
Cull Off
Lighting Off
ZWrite Off
Fog { Mode Off }
Offset -1, -1
Blend SrcAlpha OneMinusSrcAlpha
Pass
{
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 100
Tags
{
"Queue" = "Transparent"
"IgnoreProjector" = "True"
"RenderType" = "Transparent"
}
Pass
{
Cull Off
Lighting Off
ZWrite Off
Fog { Mode Off }
Offset -1, -1
ColorMask RGB
AlphaTest Greater .01
Blend SrcAlpha OneMinusSrcAlpha
ColorMaterial AmbientAndDiffuse
SetTexture [_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 200
Tags
{
"Queue" = "Transparent"
"IgnoreProjector" = "True"
"RenderType" = "Transparent"
}
Pass
{
Cull Off
Lighting Off
ZWrite Off
Offset -1, -1
Fog { Mode Off }
ColorMask RGB
AlphaTest Greater .01
Blend SrcAlpha OneMinusSrcAlpha
CGPROGRAM
#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 factor
float2 factor = (float2(1.0, 1.0) - abs(IN.worldPos)) * _ClipArgs0;
// Sample the texture
half4 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 100
Tags
{
"Queue" = "Transparent"
"IgnoreProjector" = "True"
"RenderType" = "Transparent"
}
Pass
{
Cull Off
Lighting Off
ZWrite Off
Fog { Mode Off }
ColorMask RGB
AlphaTest Greater .01
Blend SrcAlpha OneMinusSrcAlpha
ColorMaterial AmbientAndDiffuse
SetTexture [_MainTex]
{
Combine Texture * Primary
}
}
}
}
Shader "HIDDEN/Unlit/Transparent Colored 2"
{
Properties
{
_MainTex ("Base (RGB), Alpha (A)", 2D) = "black" {}
}
SubShader
{
LOD 200
Tags
{
"Queue" = "Transparent"
"IgnoreProjector" = "True"
"RenderType" = "Transparent"
}
Pass
{
Cull Off
Lighting Off
ZWrite Off
Offset -1, -1
Fog { Mode Off }
ColorMask RGB
AlphaTest Greater .01
Blend SrcAlpha OneMinusSrcAlpha
CGPROGRAM
#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 region
float2 factor = (float2(1.0, 1.0) - abs(IN.worldPos.xy)) * _ClipArgs0.xy;
float f = min(factor.x, factor.y);
// Second clip region
factor = (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 100
Tags
{
"Queue" = "Transparent"
"IgnoreProjector" = "True"
"RenderType" = "Transparent"
}
Pass
{
Cull Off
Lighting Off
ZWrite Off
Fog { Mode Off }
ColorMask RGB
AlphaTest Greater .01
Blend SrcAlpha OneMinusSrcAlpha
ColorMaterial AmbientAndDiffuse
SetTexture [_MainTex]
{
Combine Texture * Primary
}
}
}
}
Shader "HIDDEN/Unlit/Transparent Colored 3"
{
Properties
{
_MainTex ("Base (RGB), Alpha (A)", 2D) = "black" {}
}
SubShader
{
LOD 200
Tags
{
"Queue" = "Transparent"
"IgnoreProjector" = "True"
"RenderType" = "Transparent"
}
Pass
{
Cull Off
Lighting Off
ZWrite Off
Offset -1, -1
Fog { Mode Off }
ColorMask RGB
AlphaTest Greater .01
Blend SrcAlpha OneMinusSrcAlpha
CGPROGRAM
#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 region
float2 factor = (float2(1.0, 1.0) - abs(IN.worldPos.xy)) * _ClipArgs0.xy;
float f = min(factor.x, factor.y);
// Second clip region
factor = (float2(1.0, 1.0) - abs(IN.worldPos.zw)) * _ClipArgs1.xy;
f = min(f, min(factor.x, factor.y));
// Third clip region
factor = (float2(1.0, 1.0) - abs(IN.worldPos2)) * _ClipArgs2.xy;
f = min(f, min(factor.x, factor.y));
// Sample the texture
half4 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 100
Tags
{
"Queue" = "Transparent"
"IgnoreProjector" = "True"
"RenderType" = "Transparent"
}
Pass
{
Cull Off
Lighting Off
ZWrite Off
Fog { Mode Off }
ColorMask RGB
AlphaTest Greater .01
Blend SrcAlpha OneMinusSrcAlpha
ColorMaterial AmbientAndDiffuse
SetTexture [_MainTex]
{
Combine Texture * Primary
}
}
}
}
好,改完了。測試工程稍後上傳。