NGUI禁用Button时变灰

本文转自：Unity3D开发（二）：NGUI之UIButton"禁用"状态时置灰
和修改Shader让NGUI支持灰色滤镜

在使用NGUI的按钮时，经常需要在某种情况下禁用按钮，使其点击无效，这时如果能使按钮变成灰色可以起到不错的提醒用户的作用，正常做法是：

UIButton.isEnabled=false；

这句话会触发UIButton的Disabled Color，但其效果并不是使按钮图标变成灰色，而是在上面叠加了一层暗色的效果，如图：

Paste_Image.png

1.原理

Unity3d中所有的渲染都是基于Shader的，而Shader绑定在Material上，打开一个NGUI例子中自带的Material，得到其使用Shader的文件
NGUI中大部分材质都使用的Unlit/Transparent Colored（PS：虽然在Unlit下，但并不是Unity3d内置的，而是NGUI扩展的）
找到其片段着色器，代码如下：

fixed4 frag (v2f i) : COLOR  
{  
    fixed4 col = tex2D(_MainTex, i.texcoord) * i.color;  
    return col;  
}

可以看到从顶点着色器中传出的颜色属性乘到了纹理采样得到的像素上。在本例中，纹理颜色从国旗上采样得到，顶点着色器的颜色则是上图中"Disabled"属性的颜色值，所以这是一种叠加效果，而不会使图标变灰。

2.解决方案

方案有两种，一是准备两套素材，一组正常一组灰色，在合适时机切换到灰色素材即可，但如果游戏中需要置灰的UI比较多，那么会造成游戏包体变大。
另一种就是在shader中作处理，以某一个颜色作为"约定"，比纯黑色（0,0,0,1），将UIButton的Disabled Color设为（0,0,0,255），再将Unlit/Transparent Colored的片段着色器部分改成如下代码：

fixed4 frag (v2f i) : COLOR  
{  
    fixed4 col;  
    if (i.color.r < 0.001)  
    {  
        col = tex2D(_MainTex, i.texcoord);  
        float grey = dot(col.rgb, float3(0.299, 0.587, 0.114));  
        col.rgb = float3(grey, grey, grey);  
    }  
    else  
    {  
        col = tex2D(_MainTex, i.texcoord) * i.color;  
    }  
    return col;  
}

其中（0.299，0.587，0.114）为灰度公式的参数，渲染效果如图：

Paste_Image.png

图中两个按钮的Sprite属于同一张图集Atlas，将左边按钮设置isEnabled=false后，可以看到其变成了灰色图标。

3.优化

上述代码效率比较低，原因是if (i.color.r < 0.001)这里访问了color的分量r，但在官方文档中明确说了这样做效率低，除非必要情况时才使用。因此可将代码改成下面这样：

            struct v2f
            {
                float4 vertex : SV_POSITION;
                half2 texcoord : TEXCOORD0;
                fixed4 color : COLOR;
                fixed gray : TEXCOORD1;   //添加这一行
            };  
                
            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;  
                if (i.gray == 0)  //修改判断条件
                {  
                    col = tex2D(_MainTex, i.texcoord);  
                    float grey = dot(col.rgb, float3(0.299, 0.587, 0.114));  
                    col.rgb = float3(grey, grey, grey);  
                }  
                else  
                {  
                    col = tex2D(_MainTex, i.texcoord) * i.color;  
                } 
                return col;
            }

这样可以避免访问color的分量，提高渲染效率。