Unity图片变灰的方式

Posted 2020-09-20 cynchanpin

http://www.tuicool.com/articles/Vruuqme

NGUI中的Button差点儿是最经常使用到的控件之中的一个，而且能够组合各种组件（比方UIButtonColor，UIButtonOffset，UITweenxx），方便设置Button的各种状态下的属性。差点儿能够满足我们的全部需求。

可是对于当Button的isEnabled属性设置为false时，依据设置的disableColor属性设置不可点击时的颜色时，尽管我们设置的灰色，但并非我们想象中的样子！

设置的是灰色，实际执行结果却还是彩色的，仅仅是暗了一点。并不可以非常好地表现出其“禁用”的状态！

1.原理

Unity3d中全部的渲染都是基于Shader的，而Shader绑定在Material上。打开一个NGUI样例中自带的Material，得到其使用Shader的文件

NGUI中大部分材质都使用的Unlit/Transparent Colored（PS：尽管在Unlit下，但并非Unity3d内置的，而是NGUI扩展的）

找到其片段着色器，代码例如以下：

[plain] view plaincopyprint?

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

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

这个片段着色器非常easy，仅仅在“最简单的着色器”上多加了一步，即将从定点着色器中传出的顶点颜色属性乘到了纹理採样得到的像素上。

看到这个代码。就非常easy理解为什么是变暗，而不是变成灰色了

顶点的颜色数据是从UISprite之类的面板中传递进来的，其最大值是白色（255，255，255，255），而这里是正交化的，最大值白色相应（1.0，1.0，1.0，1.0）。这也是默认值，当採样得到的像素值x1.0，相当于採样得到的纹理值；假设设置一个其它的颜色。正交化后肯定会小于1.0，当採样得到的像素值乘以这个值后，像素值会比之前小，而最小值是（0，0。 0，0）即黑色，也就是说假设设置一个不是白色的颜色。就会使像素值更接近于黑色。这就是变暗的原因！

2.置灰

NGUI仅仅提供了这样一种变暗的功能，用来表现其“禁用”的状态，可是这并非最好的结果，假设须要介于黑白之间的灰色纹理，难道非要美术对每个可能会被置灰的纹理又一次制作一张纹理吗？

这就更糟了。游戏中纹理是非常占空间的。这样做相当于将UI资源翻了一倍！

还是从Shader方面入手吧。

想象一下。假设在着色器处理之前。传递一个bool值，当这个bool值为true时。正常绘制纹理；当这个bool值为false时。绘制灰色纹理。

（Unity3d的Shader中并不支持传递bool值，这里仅仅是举个栗子）

这样看似非常合理，也确实能够实现，可是会有一个问题，这个bool值肯定要在顶点着色器阶段传过去，而NGUI提供的“纹理打包”功能（即非常多纹理合并成一个Atlas，即节省空间，还能够有一些其它信息。比方九宫格拉伸的參数。。。），当这个bool值为false时，这个Atlas中所有的绘制即所有变为灰色，这是不符合逻辑的，当然能够每张小图单独处理，即相当于损失掉NGUI的“纹理打包”功能

3.解决方式

损失一个颜色值吧，作为“约定”！

选取一个颜色值，作为约定为置灰的标记，当片段着色器检測到这个颜色值之后，运行渲染灰色的shader！

这个颜色值能够随意选择。我这里选取纯黑色作为“约定颜色”，片段着色器代码例如以下：

[plain] view plaincopyprint?

1. fixed4 frag (v2f i) : COLOR  
2. {  
3.     fixed4 col;  
4.     if (i.color.r < 0.001)  
5.     {  
6.         col = tex2D(_MainTex, i.texcoord);  
7.         float grey = dot(col.rgb, float3(0.299, 0.587, 0.114));  
8.         col.rgb = float3(grey, grey, grey);  
9.     }  
10.     else  
11.     {  
12.         col = tex2D(_MainTex, i.texcoord) * i.color;  
13.     }  
14.     return col;  
15. }  

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）为灰度公式的參数

我复制了一份NGUI样例的纹理和材质，将此Shader设置到材质中，渲染效果如图

（最上面两个是原始状态下的效果。中间两个是NGUI提供的禁用状态效果。最以下两个各自是改动后Shader渲染同一个Atlas得到的结果）

这才是我想要的灰色！