概述

之前写过一个关于2DMMO优化的分享，有些人问到其中的压缩纹理要怎么做。其实实施起来很简单，很多看过cocos2dx的人都知道怎么做，这篇分享主要针对对这块不是太了解的新同学。

我假定对这篇分享有兴趣的同学都知道压缩纹理是什么，有什么好处和坏处。如果不大了解，可以先看一下pvr, etc相关的知识。

在手游中使用压缩纹理是很常见的需求，通常：

• IOS会使用PVR来压缩，IOS要求图片高宽必须是2的幂，且必须是正方形。
• Android会使用ETC1，由于ETC1不能支持透明通道，对于有透明的图，一般也会用ETC1+Alpha的做法。

使用工具

生成压缩纹理当然是使用现成的工具了：

IOS

使用PVRTexTool，在这里下载29，具体的使用方法可能要参考工具的文档，下面是一个简单的例子：

PVRTexToolCLI -i $(infile) -o $(outfile) -square + -pot + -q pvrtcbest -f PVRTC1_4,UBN,lRGB

其中$(infile)和$(outfile)分别是原图片名和压缩后的图片名，如果图片没有透明，PVRTC1_4换成PVRTC1_4_RGB。

Android

使用Mali Texture Compression Tool，在这里下载28，这个工具可以生成ETC1和带透明通道的ETC1

1. # 原始格式
2. etcpack ${infile} ${outfile} -c etc1
3. # 带透明通道
4. etcpack ${infile} ${outfile} -c etc1 -aa

带透明通道的ETC1其实就是将图片和遮罩合成一张图，最终的图片高度是原始图片的2倍。而要正确显示图片，则需要用Shader把遮罩部分作为Alpha值加到原图上。Shader如下所示：

1. attribute vec4 a_position;
2. attribute vec2 a_texCoord;
3. attribute vec4 a_color;
4. varying vec4 v_fragmentColor;
5. varying vec2 v_texCoord;
6. varying vec2 v_alphaCoord;
7. void main()
8. {
9. gl_Position = CC_PMatrix * a_position;
10. v_fragmentColor = a_color;
11. v_texCoord = a_texCoord;
12. }
13. precision lowp float;
14. varying vec4 v_fragmentColor;
15. varying vec2 v_texCoord;
16. varying vec2 v_alphaCoord;
17. void main()
18. {
19. vec4 v4Colour = texture2D(CC_Texture0, v_texCoord);
20. v4Colour.a = texture2D(CC_Texture0, vec2(0.0, 0.5) + v_texCoord).r;
21. gl_FragColor = v_fragmentColor * v4Colour;
22. }

兼容Web和Native

现在知道如何生成和使用压缩纹理了，要怎么整合进Creator呢？

• 在开发阶段，我们还是正常使用png, jpg，这样在浏览器和模拟器都能正常显示。
• 在构建阶段，分成三步走：
  • 用Creator命令行生成原生工程。
  • 调用我们自己的脚本，将工程中的图片转成压缩纹理，但要注意转换后的图片名不要变，比如a.jpg转换后仍然叫a.jpg，只不过内容已经是压缩纹理了。
  • 用Creator命令行编译安装包。

这样打出来的包，在手机中是可以正常显示的，原因是cocos-2dx并不是以文件后缀来判断类型的，它是根据文件内容的头几个字节来判断的。

而cocos-2dx其实还支持gzip压缩格式的，也就是我们将图片转换成pvr或etc1后，还可以再压缩成gzip，最终还是可以正常解析出来。但由于文件大小小了很多，加载速度会变快。

要完成这样的构建流程，你可能需要用一个脚本来实现自动化，我比较推荐python，它的库实在太强大和方便了。

另外，并不是所有的图片都适合用压缩纹理，比如UI图片压缩后会有明显的锯齿，像场景， 特效这类就比较适合。总之，在使用压缩纹理之前，你可能需要对图片类型进行一些规范化。