NGUI字体贴图压缩以及相关Shader解读

一般游戏中，字体贴图是游戏贴图压缩的一个重点，特别是对于中文的游戏。考虑的字体贴图的特殊性，一般我们输出的字体贴图是不含颜色信息的，所以正常情况下，我们输出的字体贴图RGBA每一个通道都是一样的。这样一来，就存在非常大的浪费。所以我们能够在RGBA四个通道中能够保存不同的字体，这样，我们的贴图的大小能够降低4倍。假设我们想使用ETC压缩的话，我们可还以直接不使用Alpha通道，仅仅在RGB三个通道中存储不同的文字（这样，假设我们要进行ETC压缩的话，不须要对Alpha通道做分离处理了，可是得到的ETC会比正常的图片压缩成ETC后的要模糊，这跟ETC的压缩机制（採样）有关，这跟AAA比ABB或者AWW压缩成ETC之后清晰是相同的道理，有兴趣也能够研究下）。由于不同的通道中包括了不同的文字，所以我们须要使用NGUI一个特殊的Shader，Unlit/Transparent
Colored (Packed)。要理解这个shader，我们首先来看一下一般我们使用多通道字体贴图的时候，fnt文件里包括的信息

在这里这个chnl就是表明当前这个文字是存储在哪一个通道，R、G、B、A分别相应1,2,4,8. 然后我们来看一下Shader的核心代码

half4 frag (v2f IN) : COLOR
			{
				half4 mask = tex2D(_MainTex, IN.texcoord);
				half4 mixed = saturate(ceil(IN.color - 0.5));
				half4 col = saturate((mixed * 0.51 - IN.color) / -0.49);

				mask *= mixed;
				col.a *= mask.r + mask.g + mask.b + mask.a;
				return col;
			}

乍一看，感觉非常奇怪的样子，特别是这里有两个比較特别的数字5.1和0.49.事实上这里跟NGUI的处理机制有关系，NGUI主要通过变换传入的顶点颜色（IN.color）来进行处理。那么我们IN.color的取值是怎么设定的呢？这里我们简单来推导一下这里的公式，首先摆在我们眼前的问题是，我们在shader中要知道当前的文字是要读取RGB的哪一个通道，那我们怎样得知呢？一个简单的办法，我们能够变换IN.color的RGB,使得，当前通道的色值>0.5,而其它的通道小于0.5.那么我们在shader中就能够简单的通过

half4 mixed = saturate(ceil(IN.color - 0.5));//假设值在0-0.5区间，那么结果为0，假设值为0.5-1，值为1

来得到当前文字所在的通道了（为1的就是当前的通道）。那么我们怎么使得其它的通道的颜色值<0.5呢？我们知道RGB默认的取值范围为0-1，那么我们能够简单的乘以0.49，这样范围就在0-0.49之间了（即满足<0.5），我们如果NGUI设置的UIlabel的颜色为X，那么通过上面的处理，IN.color = X * 0.49。如今，全部通道的颜色范围都在0-0.49之间，而我们须要我们当前通道的颜色>0.5,所以我们能够简单的对当前通道的色值加上0.51，那么当前通道的颜色值取值范围就到了0.51-1，从而满足了条件。这时候IN.color
= X *0.49 + M *0.51（当中M中当前通道的值为1，其它通道的值为0，如当前如R通道的话，M=（1,0,0），事实上这里M取值就相当于上线的mixed）。这个时候，我们仅仅要依据文字设置的颜色所在的通道设置In.color的值就能够了。那么，反过来，我们在Shader中怎样还原字体的颜色值X呢？依据IN.color = X *0.49 + M *0.51，我们能够非常easy的得到X = (M*0.51-In.color)/0.49.相信到这里，大家都应该明确了，这就是shader中代码

half4 col = saturate((mixed * 0.51 - IN.color) / -0.49);

的由来。

文字的颜色我们设置OK了，那么剩下的仅仅须要得到文字的轮廓就好了。也就是设置相应的col的alpha值。比方说假设当前通道为R，那么我的col.a 设置成R通道的值就能够了，这样R通道中有文字的地方（a>0）就会显示出来,其它地方就不会显示（a=0）。也就是说我们得到的是R通道中文字的轮廓，代码例如以下

<pre name="code" class="csharp">half4 mask = tex2D(_MainTex, IN.texcoord);

mask *= mixed;            //处理后，mask中仅仅保留了当前通道的颜色值，其它通道为0，如红色通道（R，0,0）
col.a *= mask.r + mask.g + mask.b + mask.a; //col.a = 当前通道的颜色值

注：1、关于怎样得到多通道贴图（这里我们使用BFont）

2、得到的贴图演示样例

3、相对于直接使用Alpha8的长处

a、假设使用Alpha8贴图的话，假设文字无法恰好填满一个标准大小时，会存在浪费（主要内存占用大小）。如一张1024*1024的贴图

假设放RGB三个通道就会好非常多。

b、相对于Unity中使用Alpha，多通道贴图还能够进一步压缩，比方说压缩成RGB565（16Bit）。而Alpha8贴图是无法这样处理的。