Creator使用壓縮紋理詳解
在深圳Cocos沙龍上，有幸結(jié)識了社區(qū)中大名頂頂?shù)腃olin，Shawn在在論壇上第一次看到Colin的團隊用CocosCreator制作的《熱血暗黑》時就被深深地震撼到了！更為重要的是，Colin將他的技術(shù)心得和寶貴開發(fā)經(jīng)驗寫成文字，每一篇分享都是滿滿的干活，而且幸運的是Shawn得到Colin的授權(quán)許可，將他的文章散播到奎特爾星球，與你一起欣賞一起成長！
Creator使用壓縮紋理
1?概述
之前寫過一個關(guān)于2DMMO優(yōu)化的分享，有些人問到其中的壓縮紋理要怎么做。其實實施起來很簡單，很多看過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/)，具體的使用方法可能要參考工具的文檔，下面是一個簡單的例子：
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
現(xià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命令行編譯安裝包。
這樣打出來的包，在手機中是可以正常顯示的，原因是cocos-2dx并不是以文件后綴來判斷類型的，它是根據(jù)文件內(nèi)容的頭幾個字節(jié)來判斷的。
而cocos-2dx其實還支持gzip壓縮格式的，也就是我們將圖片轉(zhuǎn)換成pvr或etc1后，還可以再壓縮成gzip，最終還是可以正常解析出來。但由于文件大小小了很多，加載速度會變快。
要完成這樣的構(gòu)建流程，你可能需要用一個腳本來實現(xiàn)自動化，我比較推薦python，它的庫實在太強大和方便了。
另外，并不是所有的圖片都適合用壓縮紋理，比如UI圖片壓縮后會有明顯的鋸齒，像場景， 特效這類就比較適合?？傊?，在使用壓縮紋理之前，你可能需要對圖片類型進行一些規(guī)范化。
下載文檔
