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

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

在这里这个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)

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

2、得到的贴图演示样例

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

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

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

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

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

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

05-11 22:17