Creator使用压缩纹理

最新推荐文章于 2024-09-20 06:31:10 发布

晓衡的成长日记

最新推荐文章于 2024-09-20 06:31:10 发布

阅读量2.2k

点赞数

分类专栏：探索cocos H5正确的开发姿式文章标签： creator cocos-creator cocos2d-js cocos 游戏开发

探索cocos H5正确的开发姿式专栏收录该内容

47 篇文章 2 订阅

订阅专栏

在深圳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命令行编译安装包。