在深圳Cocos沙龍上，有幸結(jié)識了社區(qū)中大名頂頂?shù)腃olin，Shawn在在論壇上第一次看到Colin的團(tuán)隊(duì)用CocosCreator制作的《熱血暗黑》時(shí)就被深深地震撼到了！更為重要的是，Colin將他的技術(shù)心得和寶貴開發(fā)經(jīng)驗(yàn)寫成文字，每一篇分享都是滿滿的干活，而且幸運(yùn)的是Shawn得到Colin的授權(quán)許可，將他的文章散播到奎特爾星球，與你一起欣賞一起成長！

Creator使用壓縮紋理
1?概述

之前寫過一個(gè)關(guān)于2DMMO優(yōu)化的分享，有些人問到其中的壓縮紋理要怎么做。其實(shí)實(shí)施起來很簡單，很多看過cocos2dx的人都知道怎么做，這篇分享主要針對對這塊不是太了解的新同學(xué)。

我假定對這篇分享有興趣的同學(xué)都知道壓縮紋理是什么，有什么好處和壞處。如果不大了解，可以先看一下pvr, etc相關(guān)的知識。在手游中使用壓縮紋理是很常見的需求，通常：

IOS會使用PVR來壓縮，IOS要求圖片高寬必須是2的冪，且必須是正方形。

Android會使用ETC1，由于ETC1不能支持透明通道，對于有透明的圖，一般也會用ETC1+Alpha的做法。

2使用工具

生成壓縮紋理當(dāng)然是使用現(xiàn)成的工具了：

IOS

使用PVRTexTool，在這里下載(https://community.imgtec.com/developers/powervr/tools/pvrtextool/)，具體的使用方法可能要參考工具的文檔，下面是一個(gè)簡單的例子：

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)，這個(gè)工具可以生成ETC1和帶透明通道的ETC1。

# 原始格式
etcpack ${infile} ${outfile} -c etc1
# 帶透明通道
etcpack ${infile} ${outfile} -c etc1 -aa

帶透明通道的ETC1其實(shí)就是將圖片和遮罩合成一張圖，最終的圖片高度是原始圖片的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

現(xiàn)在知道如何生成和使用壓縮紋理了，要怎么整合進(jìn)Creator呢？

在開發(fā)階段，我們還是正常使用png, jpg，這樣在瀏覽器和模擬器都能正常顯示。

在構(gòu)建階段，分成三步走：

用Creator命令行生成原生工程。

調(diào)用我們自己的腳本，將工程中的圖片轉(zhuǎn)成壓縮紋理，但要注意轉(zhuǎn)換后的圖片名不要變，比如a.jpg轉(zhuǎn)換后仍然叫a.jpg，只不過內(nèi)容已經(jīng)是壓縮紋理了。

用Creator命令行編譯安裝包。

這樣打出來的包，在手機(jī)中是可以正常顯示的，原因是cocos-2dx并不是以文件后綴來判斷類型的，它是根據(jù)文件內(nèi)容的頭幾個(gè)字節(jié)來判斷的。

而cocos-2dx其實(shí)還支持gzip壓縮格式的，也就是我們將圖片轉(zhuǎn)換成pvr或etc1后，還可以再壓縮成gzip，最終還是可以正常解析出來。但由于文件大小小了很多，加載速度會變快。

要完成這樣的構(gòu)建流程，你可能需要用一個(gè)腳本來實(shí)現(xiàn)自動化，我比較推薦python，它的庫實(shí)在太強(qiáng)大和方便了。

另外，并不是所有的圖片都適合用壓縮紋理，比如UI圖片壓縮后會有明顯的鋸齒，像場景， 特效這類就比較適合?？傊?，在使用壓縮紋理之前，你可能需要對圖片類型進(jìn)行一些規(guī)范化。