Creator使用压缩纹理详解
扫描二维码
随时随地手机看文章
在深圳Cocos沙龙上，有幸结识了社区中大名顶顶的Colin，Shawn在在论坛上第一次看到Colin的团队用CocosCreator制作的《热血暗黑》时就被深深地震撼到了！更为重要的是，Colin将他的技术心得和宝贵开发经验写成文字，每一篇分享都是满满的干活，而且幸运的是Shawn得到Colin的授权许可，将他的文章散播到奎特尔星球，与你一起欣赏一起成长！
Creator使用压缩纹理
1 概述
之前写过一个关于2DMMO优化的分享，有些人问到其中的压缩纹理要怎么做。其实实施起来很简单，很多看过cocos2dx的人都知道怎么做，这篇分享主要针对对这块不是太了解的新同学。
我假定对这篇分享有兴趣的同学都知道压缩纹理是什么，有什么好处和坏处。如果不大了解，可以先看一下pvr, etc相关的知识。在手游中使用压缩纹理是很常见的需求，通常：
IOS会使用PVR来压缩，IOS要求图片高宽必须是2的幂，且必须是正方形。
Android会使用ETC1，由于ETC1不能支持透明通道，对于有透明的图，一般也会用ETC1+Alpha的做法。
2使用工具
生成压缩纹理当然是使用现成的工具了：
IOS
使用PVRTexTool，在这里下载(https://community.imgtec.com/developers/powervr/tools/pvrtextool/)，具体的使用方法可能要参考工具的文档，下面是一个简单的例子：
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，在这里下载(https://developer.arm.com/products/software-development-tools/graphics-development-tools/mali-texture-compression-tool/downloads)，这个工具可以生成ETC1和带透明通道的ETC1。
# 原始格式
etcpack ${infile} ${outfile} -c etc1
# 带透明通道
etcpack ${infile} ${outfile} -c etc1 -aa带透明通道的ETC1其实就是将图片和遮罩合成一张图，最终的图片高度是原始图片的2倍。而要正确显示图片，则需要用Shader把遮罩部分作为Alpha值加到原图上。Shader如下所示：
attribute vec4 a_position;
attribute vec2 a_texCoord;
attribute vec4 a_color;
varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
varying vec2 v_alphaCoord;
void main()
{
gl_Position = CC_PMatrix * a_position;
v_fragmentColor = a_color;
v_texCoord = a_texCoord;
}
precision lowp float;
varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
varying vec2 v_alphaCoord;
void main()
{
vec4 v4Colour = texture2D(CC_Texture0, v_texCoord);
v4Colour.a = texture2D(CC_Texture0, vec2(0.0, 0.5) + v_texCoord).r;
gl_FragColor = v_fragmentColor * v4Colour;
}3 兼容Web和Native
现在知道如何生成和使用压缩纹理了，要怎么整合进Creator呢？
在开发阶段，我们还是正常使用png, jpg，这样在浏览器和模拟器都能正常显示。
在构建阶段，分成三步走：
用Creator命令行生成原生工程。
调用我们自己的脚本，将工程中的图片转成压缩纹理，但要注意转换后的图片名不要变，比如a.jpg转换后仍然叫a.jpg，只不过内容已经是压缩纹理了。
用Creator命令行编译安装包。
这样打出来的包，在手机中是可以正常显示的，原因是cocos-2dx并不是以文件后缀来判断类型的，它是根据文件内容的头几个字节来判断的。
而cocos-2dx其实还支持gzip压缩格式的，也就是我们将图片转换成pvr或etc1后，还可以再压缩成gzip，最终还是可以正常解析出来。但由于文件大小小了很多，加载速度会变快。
要完成这样的构建流程，你可能需要用一个脚本来实现自动化，我比较推荐python，它的库实在太强大和方便了。
另外，并不是所有的图片都适合用压缩纹理，比如UI图片压缩后会有明显的锯齿，像场景， 特效这类就比较适合。总之，在使用压缩纹理之前，你可能需要对图片类型进行一些规范化。
下载文档
