Optimus：在cocos2d中如何高效使用圖片總結(jié)

使用Photoshop等工具制作單張圖片，放在Resources目錄下某個(gè)或幾個(gè)目錄下，使用TexturePacker打包圖片成pvr.ccz文件，使用CCSpriteBatchNode優(yōu)化繪制，使用FrameCache緩存讀取，使用spriteWithFrameName獲取單張圖片。

?

　　免責(zé)申明（必讀！）：本博客提供的所有教程的翻譯原稿均來自于互聯(lián)網(wǎng)，僅供學(xué)習(xí)交流之用，切勿進(jìn)行商業(yè)傳播。同時(shí)，轉(zhuǎn)載時(shí)不要移除本申明。如產(chǎn)生任何糾紛，均與本博客所有人、發(fā)表該翻譯稿之人無任何關(guān)系。謝謝合作！

前言：這篇文章是我翻譯的第一篇關(guān)于cocos2d的文章，我在翻譯的時(shí)候盡量按原文意思來，但難免會(huì)加入自己一些理解進(jìn)去。還有這篇文章所采用的xcode版本是3.2.5，用xcode4.0的朋友可能實(shí)現(xiàn)起來有點(diǎn)出入，我會(huì)在文章的最后給出解決辦法。

　　文章原來出處：http://www.raywenderlich.com/2361/how-to-create-and-optimize-sprite-sheets-in-cocos2d-with-texture-packer-and-pixel-formats

　　在cocos2d里面，為了使你的游戲獲得最佳性能，你需要把許多小的sprite圖片組合到一張大圖里面，這張大圖就叫做sprite sheet。

　　如果你使用cocos2d已經(jīng)有一段時(shí)間了的話，你可能已經(jīng)使用過了一款叫做Zwoptex的工具來幫你生成sprite sheet。Zwoptex是一個(gè)非常棒的工具--我在我的很多程序里面使用它，而且確實(shí)幫我節(jié)省了很多時(shí)間。

　　然后，這里有一款新的工具，叫做Texture Packer.它類似于Zwoptex，也能創(chuàng)建sprite sheet，但是它還有一些非常方便的、很神奇的特性。

　　這篇文章將以一種教程的形式，講述如何在cocos2d游戲開發(fā)使用Texture　Packer，同時(shí)，你還將學(xué)習(xí)到如何使用像素格式（pixel formats）、Texture Packer 如何智能地讓你的游戲加載速度更快，運(yùn)行更流暢，而且還能夠在游戲界面看起來很不錯(cuò)的前提下使用盡可能少的內(nèi)存。

　　澄清：我在發(fā)博客之前就從Texture Packer這個(gè)工具的作者手中拿到了license key。我當(dāng)時(shí)并沒有保證我會(huì)發(fā)一篇博文來回報(bào)他，但是，在我使用這個(gè)工具一段時(shí)間之后，它確實(shí)為我的應(yīng)用程序減少了很多需要加載的內(nèi)存，因此我愛上了這款工具。所以，我想讓你們都了解它。

　　這篇教程是為那些熟悉cocos2d的人寫的。如果你對(duì)cocos2d完全陌生的話，你應(yīng)該從“怎樣做一個(gè)簡(jiǎn)單的iphone應(yīng)用程序”系列和其它一些cocos2d的教程開始。（目前這些鏈接依然是e文，但隨著我翻譯進(jìn)度的前進(jìn)，這些也會(huì)相應(yīng)的更新。）

開始

　　首先，確保你安裝了最新版本的cocos2d（在寫作這篇文章的時(shí)候，版本號(hào)是?Cocos2D v0.99.5-rc1，在翻譯這篇文章的時(shí)候，已經(jīng)是cocos2d-iphone-1.0.0-beta.tar.gz了）。獲得最新版本非常重要，因?yàn)樾掳姹纠锩嬖黾恿藢?duì)一些新的圖片格式的支持，而這恰恰是這篇文章后面要用到的。

一旦你安裝完之后，你就可以啟動(dòng)XCode，然后使用cocos2d應(yīng)用程序模板來新建一個(gè)工程并把它命名為TextureFun。

　　下一步，你需要一些圖片來制作sprite　sheets。你可以下載這些我收集來的樣例圖片，然后解壓縮，并把整個(gè)解壓縮后的目錄拖到你的TextureFun工程的一個(gè)子文件夾下面，如下圖所示：

　　好，現(xiàn)在你擁有一個(gè)工程模板和一些樣例圖片以，是時(shí)候使用TexturePacker來制作spritesheet了！

使用TexturePacker來創(chuàng)建spritesheet

　　你需要做的第一件事情就是下載?Texture Packer的免費(fèi)版本。請(qǐng)注意，你并不需要購(gòu)買任何東西，對(duì)于這篇教程來說你只需要免費(fèi)版本就足夠了。

當(dāng)你下載完之后雙擊，然后點(diǎn)擊“TexturePacker.mpkg”，接下來就會(huì)彈出一個(gè)窗口，然后按照提示一步步安裝在你的mac上。

　　在你完成安裝之后，在你的Application文件夾下面找到它并運(yùn)行。當(dāng)你看到第一個(gè)提示窗口出現(xiàn)的時(shí)候，選擇“ Use Essentia”（免費(fèi)版本）繼續(xù)。

　　現(xiàn)在，點(diǎn)擊工具欄上的“Add　Folder”按鈕，然后選擇TextureFun\Art\sprites文件夾。Texture　Packer將會(huì)加載圖片并且智能地把這些圖片布局在spritesheet中，如下圖所示：

　　另一方面，你能夠看到所有導(dǎo)入到紋理集（Texture　Atlas）中的圖片，當(dāng)你選中某一個(gè)的時(shí)候會(huì)看到有一個(gè)邊框--另一個(gè)非常方便的功能！你也能夠把鼠標(biāo)停留在精靈（sprite）上面，看它是否創(chuàng)建走樣（alias）（走樣（alias）指那些被裁剪（cropping）之后的圖像看起來實(shí)際上是一樣的）。如下圖所示：

　　順便說一下通過點(diǎn)擊“Add　Folder”按鈕來添加圖片的一些注意事項(xiàng)。首先，當(dāng)你像這樣通過增加文件夾的方式來增加精靈后，Texture　Packer并不是對(duì)每一個(gè)精靈增加一個(gè)索引（reference），而是對(duì)整個(gè)文件夾增加了一個(gè)索引。這意味著，當(dāng)你以后向這個(gè)文件夾中增加精靈之后，下一次你運(yùn)行Texture　Packer的時(shí)候，它會(huì)重新根據(jù)文件夾下面的所有的精靈來創(chuàng)建spritesheet--多么方便啊！

　　同時(shí)，你也不需要非得把所有的精靈都放在同一個(gè)根文件夾下面，你可以按照自己的方式把這些精靈放在不同的子目錄下（比如sprites\animals，sprites\monsters），之后當(dāng)你從cocos2d中引用它們的時(shí)候只需指定相對(duì)路徑即可。

　　最后，需要注意的是，你可以包含多個(gè)精靈文件夾--這也是一個(gè)非常方便的功能，尤其是在你的游戲非常大的時(shí)候，你可以為每一個(gè)關(guān)卡制作一個(gè)spritesheet。

　　好了，現(xiàn)在讓我們來看一下軟件左邊的一些選項(xiàng)。通過這些選項(xiàng)，你能夠配置spritesheet的大小、布局和輸出格式。首先，讓我們來快速瀏覽一遍控制大小和布局的選項(xiàng)：

• Autosize?（默認(rèn)） – 這個(gè)選項(xiàng)會(huì)為你的spritesheet挑選最小的２的指數(shù)倍的大小。這是一個(gè)非常方便的特性，因?yàn)樗梢允∪ツ阕约喝ビ?jì)算spritesheet大小的時(shí)間。
• Min/max size?讓你為你的spritesheet指定一個(gè)最大值。如果你想設(shè)置特定大小的spritesheet的時(shí)候，這也是一個(gè)非常方便的特性。（因?yàn)閷?duì)于特定的設(shè)備來說，你可不想超過設(shè)備能夠支持的最大限制，比如2代touch最大支持texture大小為1024*1024）
• Scale?讓你可以保存一個(gè)比原始圖片尺寸要大一點(diǎn)、或者小一點(diǎn)的spritesheet。比如，如果你想在spritesheet中加載“@2x"的圖片（也即為Retina-display設(shè)備或者ipad創(chuàng)建的）。但是你同時(shí)也想為不支持高清顯示的iphone和touch制作spritesheet，這時(shí)候只需要設(shè)置scale為 1.0,同時(shí)勾選autoSD就可以了。也就是說，只需要美工提供高清顯示的圖片，用這個(gè)軟件可以自己為你生成高清和普清的圖片。
• Algorithm?TexturePacker里面目前唯一支持的算法就是MaxRects，即按精靈尺寸大小排列，但是這個(gè)算法效果非常好，因此你不用管它。
• Border/shape padding?即在spritesheet里面，設(shè)置精靈與精靈之間的間隔。如果你在你的游戲當(dāng)中看到精靈的旁邊有一些“雜圖”的時(shí)候，你就可以增加這個(gè)精靈之間的間隔。
• Extrude?精靈邊界的重復(fù)像素個(gè)數(shù). 這個(gè)與間隔是相對(duì)應(yīng)的--如果你在你的精靈的邊邊上看到一些透明的小點(diǎn)點(diǎn)，你就可以通過把這個(gè)值設(shè)設(shè)置大一點(diǎn)。
• Trim?通過移除精靈四周的透明區(qū)域使之更好地放在spritesheet中去。不要擔(dān)心，這些透明的區(qū)域僅僅是為了使spritesheet里面的精靈緊湊一點(diǎn)。--當(dāng)你從cocos2d里面去讀取這些精靈的時(shí)候，這些透明區(qū)域仍然在尋里。（因?yàn)?#xff0c;有些情況下，你可能需要這些信息來確定精靈的位置）
• Shape outlines?把這個(gè)選項(xiàng)打開，那么就能看到精靈的邊邊。這在調(diào)試的時(shí)候非常有用。

　　對(duì)于spritesheet來說，上面提到的各個(gè)選項(xiàng)的默認(rèn)值，你一個(gè)也不需要改變--因?yàn)樗鼈儽緛砭鸵呀?jīng)很好了。然后，在輸出部分，你需要改變一些設(shè)置。但是在講到那個(gè)之前，讓我們先談一談cocos2d中的像素格式。

cocos2d和像素格式

　　在cocos2d里面，理解像素格式非常重要。因?yàn)?#xff0c;像素格式會(huì)影響在你的游戲中加載一張圖片到底需要多少內(nèi)存。因?yàn)橛螒蛲ǔＲ虞d大量的圖片資源，所以你要盡可能充分利用移動(dòng)設(shè)備上面非常少的可用物理內(nèi)存。

　　默認(rèn)情況下面，當(dāng)你在cocos2d里面加載一張圖片的時(shí)候，對(duì)于每一個(gè)像素點(diǎn)使用４個(gè)byte來表示--１個(gè)byte（８位）代表red，另外３個(gè)byte分別代表green、blue和alpha透明通道。這個(gè)就簡(jiǎn)稱RGBA8888。

　　因此，如果你使用默認(rèn)的像素格式來加載圖片的話，你可以通過下面的公式來計(jì)算出將要消耗多少內(nèi)存來加載：

　　圖像寬度（width）×圖像高度（height）×每一個(gè)像素的位數(shù)（bytes　per　pixel）　=　內(nèi)存大小

　　此時(shí)，如果你有一張５１２×５１２的圖片，那么當(dāng)你使用默認(rèn)的像素格式去加載它的話，那么將耗費(fèi)

　　５１２×５１２×４=１MB（好多啊！）

　　這里，我們以Iphone３G為例。它總共只有１２８兆內(nèi)存，但是系統(tǒng)就要占掉一大半，還有其它一些程序也要使用一些內(nèi)存，實(shí)際可用的內(nèi)存更少。對(duì)于單獨(dú)一張spritesheet來說那確實(shí)足夠了。可是想像一下你有許許多多的spritesheet，而且游戲里面經(jīng)常需要大量的spritesheet！

　　這里就需要讓像素格式來幫忙了。你可以為圖片的每個(gè)像素點(diǎn)指定更小的字節(jié)來保存圖片。（比如每個(gè)像素點(diǎn)２個(gè)字節(jié)，即每個(gè)像素點(diǎn)１６位），這種方式就能夠在圖片質(zhì)量和內(nèi)存消耗之間取得一個(gè)很好的平衡點(diǎn)。

　　通常，你是在你的游戲看起來還ok的提前下，盡可能少地使用內(nèi)存。背景圖片就非常適用用８位或者１６位來存儲(chǔ)，而精靈則一般要用１６位或者３２位。對(duì)于更多可選的像素格式和適用的場(chǎng)合，你可以參考Riq（cocos2d的作者）的一篇文章：?understanding pixel format guide.（理解像素格式向?qū)?#xff09;

　　順便說一下，如果你注意看窗口的右下角，你會(huì)看到Texture　Packer會(huì)基于你當(dāng)前選擇的像素格式計(jì)算出這張spritesheet所消耗的內(nèi)存大小，因此你不必手動(dòng)計(jì)算了。：）

像素格式和抖動(dòng)

　　很多時(shí)候，當(dāng)你使用較小的像素格式來加載圖片的時(shí)候，你會(huì)發(fā)現(xiàn)圖片的質(zhì)量也在相應(yīng)的降低。這時(shí)你會(huì)看到圖像存在許多顏色的梯度變化。這里有一個(gè)例子，展示了當(dāng)你使用像素格式RBGA4444去顯示一張圖片的時(shí)候會(huì)是什么樣子：

　　看到?jīng)]有，圖像上面有許許多多的“條條”和顏色梯度變化，特別是熊和綠色的框框那里。

　　這時(shí)，你可能想重新設(shè)計(jì)你的圖片來確保使用更少的梯度，或者使用大一點(diǎn)的像素格式。但是，在這里，TexturePacker實(shí)現(xiàn)了另外一個(gè)殺手锏功能--圖像抖動(dòng)。

　　當(dāng)你使用TexturePacker來保存spritesheet的時(shí)候，你可以指定目標(biāo)像素格式為RGBA4444，然后選擇“dithering　method”。這個(gè)默認(rèn)選項(xiàng)會(huì)修改一些你的圖像的顏色，但是當(dāng)有梯度變化或者其它一些會(huì)帶來問題的顏色以后，圖像看起來就會(huì)非常糟糕。

　　繼續(xù)，我們?yōu)閟pritesheet選擇RBGA4444格式，然后改變抖動(dòng)選項(xiàng)為“FloydSteinberg＋Alpha”。Texture　Packer將會(huì)在動(dòng)態(tài)修改你的圖片，而且馬上顯示出效果來。和上面的圖片相比，是不是好看多了？

　　現(xiàn)在讓我們保存這個(gè)spritesheet。點(diǎn)擊Texture　file旁邊的“...”，在彈出的對(duì)話框中選擇TextureFun\Resouces目錄，然后命名為“sprites-hd.pvr.ccz”。然后，TexturePack會(huì)自動(dòng)為我們?cè)贒ata　file那里生成相應(yīng)的plist文件路徑。并且會(huì)命名為“sprites-hd.plist”，這個(gè)名字是根據(jù)前面你提要的名字來命名的。

　　“但是，等一下！”，你可能會(huì)說，“為什么是pvr.ccz？！”。好吧，我很高興你會(huì)這樣問。。。

PVRs和壓縮

　　PVR圖像是專門為ios設(shè)備上面的PowerVR圖形芯片指定的圖像容器。它們?cè)趇os設(shè)備上非常好用，因?yàn)榭梢灾苯蛹虞d到顯卡上面，而不需要經(jīng)過中間的轉(zhuǎn)化。

　　PVR圖像也可以包含許多種不同像素格式的圖像數(shù)據(jù)。之前，cocos2d僅僅支持一些用 ?sdk指定的?texturetool app來創(chuàng)建的圖片格式，不過后來cocos2d已經(jīng)擴(kuò)展了許多格式了。

　　而且，最近c(diǎn)ocos2d更新到了可以支持壓縮了的pvr圖像格式pvr.ccz。使用這種圖片格式的好處有兩點(diǎn)：一、可以使你的應(yīng)用程序更小，因?yàn)閳D片是壓縮過了的。二、你的游戲能夠啟動(dòng)地更快。

　　總而言之，對(duì)于spritesheet來說，你可能通過指定１６位的像素格式來減少內(nèi)存消耗，同時(shí)保存為pvr.ccz格式來使程序加載速度更快。最后，點(diǎn)擊“Publish”按鈕，你的spritesheet和屬性列表文件就生成好了。Teture　Packer會(huì)提示你，一些精靈將會(huì)創(chuàng)建成紅色（因?yàn)槟闶褂玫氖敲赓M(fèi)版本）。

優(yōu)化背景圖片

　　現(xiàn)在，讓我們也來加載并優(yōu)化一下我們的背景圖片。點(diǎn)擊new創(chuàng)建一個(gè)新的Texture　Packer窗口，然后點(diǎn)擊“Add　Folder”，并且選擇“TextureFun\Art\flower”文件夾。

　　把圖片格式改成RBG565（對(duì)于大的圖片來說，你可能需要更好的質(zhì)量），然后改變抖動(dòng)方法為“FloydSteinberg”（為什么不是FloydSteinberg＋Alpha呢？因?yàn)橄袼馗袷绞荝BG565，沒有了Alpha通道）。然后指定保存texture　file的路徑為“TextureFun\Resouces\flower-hd.pvr.ccz”。最后，點(diǎn)擊“Publish”，關(guān)閉警告信息，這時(shí)你的屏幕看起來會(huì)是下面這樣：

在cocos2d里面使用spritesheet

　　現(xiàn)在回到我們的項(xiàng)目，右鍵點(diǎn)擊Resources，然后選擇“Add\Existing　Files...”。選擇flower-hd.plist， lower-hd.pvr.ccz, sprites-hd.plist, and sprites-hd.pvr.ccz。同時(shí)，確保沒有選中“ Copy items into destination group’s folder (if needed)”,然后單擊完成。

　　下一步，打開HelloWorldScene.m，并且用下面的代碼替換掉你的init方法里的內(nèi)容：

-(id) init
{
if( (self=[super init] )) {
CGSize winSize?=[CCDirector sharedDirector].winSize;

[CCTexture2D setDefaultAlphaPixelFormat:kCCTexture2DPixelFormat_RGB565];?
CCSprite?*background?=[CCSprite spriteWithFile:@"flower-hd.pvr.ccz"];
background.anchorPoint?=ccp(0,0);
[self addChild:background];

//More coming here soon...
}
returnself;
}

　　你需要做的第一件事情就是加載背景圖片。首先，你告訴cocos2d使用RBG565的像素格式（你正在為你的背景圖片的每個(gè)像素使用８位），然后調(diào)用spriteWithFile從磁盤上加載pvr.ccz格式的圖片。注意，這里你并不需要把它當(dāng)作一個(gè)spritesheet（比如，加載plist文件），因?yàn)檫@里“spritesheet”就只有一張圖片。

　　注意，其實(shí)你在加載pvr.ccz格式的文件的時(shí)候并不需要指定像素格式，因?yàn)檫@個(gè)文件格式本身就包含了這樣一些信息。但是，我們還是顯示地在這里指　定了像素格式，因?yàn)槿绻慵虞dpng格式的圖片的話，（png格式圖片總是保存為每個(gè)像素３２位，盡管你可能會(huì)使用不同的像素格式把它加載到內(nèi)存里）。

　　下面，讓我們?cè)凇癿ore　coming　here　soon”注釋的地方添加下面的代碼：

[CCTexture2D setDefaultAlphaPixelFormat:kCCTexture2DPixelFormat_RGBA4444];
CCSpriteBatchNode?*spritesBgNode;
spritesBgNode?=[CCSpriteBatchNode batchNodeWithFile:@"sprites-hd.pvr.ccz"];
[self addChild:spritesBgNode];?
[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"sprites-hd.plist"];

?

　　這里把像素格式設(shè)置為RBGA4444（你為主精靈所使用的每個(gè)像素點(diǎn)１６位的像素格式），然后為這個(gè)spritesheet創(chuàng)建一個(gè)batch　node。你也需要加載plist文件，把每一個(gè)精靈對(duì)應(yīng)的幀（frame）加載到精靈幀緩沖區(qū)（sprite　frame　cache）中。

　　最后，緊接著上面加入下面的代碼：

NSArray?*images?=[NSArray arrayWithObjects:@"bear_2x2.png",?@"bird.png",?@"cat.png",?@"dog.png",?@"turtle.png",?@"ooze_2x2.png", nil];?
for(inti?=0; i?<images.count;?++i) {
NSString?*image?=[images objectAtIndex:i];
floatoffsetFraction?=((float)(i+1))/(images.count+1);?
CGPoint spriteOffset?=ccp(winSize.width*offsetFraction, winSize.height/2);
CCSprite?*sprite?=[CCSprite spriteWithSpriteFrameName:image];
sprite.position?=spriteOffset;
[spritesBgNode addChild:sprite];
}

[CCTexture2D setDefaultAlphaPixelFormat:kCCTexture2DPixelFormat_Default];

?

　　這個(gè)循環(huán)遍歷spritesheet中的所有的圖片，并把他們合理地旋轉(zhuǎn)在屏幕上面。

　　如果你使用iPad來編譯并運(yùn)行你的代碼的話，你會(huì)得到下面的運(yùn)行結(jié)果：

　　這個(gè)不就是你想實(shí)現(xiàn)的效果嗎--記住，這里的紅色僅僅因?yàn)槟闶褂玫氖敲赓M(fèi)版本。（ps：正式版本也不貴，１００多塊人民幣可以搞定）

　　但是真正讓人著迷的是那些你看不到的東西。

　　在背后，你的應(yīng)用程序加載速度會(huì)明顯比以前快很多。而且使用更少的內(nèi)存，更讓人心動(dòng)的是，它看起來還是那么棒！而這些功能使用Texture　Packer都可以很容易的完成。

不相信我？

　　當(dāng)我寫這篇文章的時(shí)候，我做了一系列的簡(jiǎn)單的測(cè)試，從最好的情形到最壞的情形，來測(cè)試到底我的程序是如何運(yùn)轉(zhuǎn)的。下面是我得出的一些結(jié)論：

• 做最原始的事情。使用默認(rèn)像素格式單個(gè)單個(gè)精靈地加載，不使用任何spritesheet。大約花費(fèi)了０.７３秒鐘加載，消耗大約２６兆內(nèi)存。而且當(dāng)你添加更多的精靈進(jìn)去的時(shí)候，游戲就開始卡了。
• 使用默認(rèn)的像素格式，并且使用spritesheet：前進(jìn)了一大步。這樣會(huì)使游戲性能更好，同時(shí)也會(huì)減少內(nèi)存消耗（因?yàn)槟銜?huì)把所有的精靈加載到一張大小的spritesheet的，而opengl使用紋理的大小都是２的指數(shù)冪，如果你一張精靈的大小是３２０×２００的話，那么opengl會(huì)創(chuàng)建５１２×５１２的紋理來加載精靈，這樣就有很多空白的地方。實(shí)際上就是浪費(fèi)了內(nèi)存。）
• 使用不含抖動(dòng)的Zwoptex并保存為png格式，同時(shí)減少像素格式：這樣可以大幅地減少內(nèi)存消耗，大約只需要１５兆左右）。但是卻增加了程序的啟動(dòng)時(shí)間，上升到大約１秒鐘。我認(rèn)為可能是由于不得不改變顏色緩沖的緣故吧。另外，圖像顯示的效果并沒有在“像素格式和抖動(dòng)”一節(jié)中的截屏效果那么好。
• 使用通過Texture　Packer創(chuàng)建的抖動(dòng)過的spritesheet并且保存為pvr.ccz格式：這在啟動(dòng)時(shí)間和顯示效果上都前進(jìn)了一大步！（啟動(dòng)時(shí)間大約只有０.３１秒左右，內(nèi)存也只需要大約１７兆左右，我認(rèn)為這可能是由于內(nèi)存泄漏，這個(gè)問題在現(xiàn)在的版本中已經(jīng)解決了。

　　好了，如果你按照上面所講的最佳實(shí)踐來做的話，我想你在大部分情況下都會(huì)做得非常好。：）如果你想看看我寫的測(cè)試程序，也想拿來跑一跑的話，可以點(diǎn)此下載。

Texture Packer 和XCode集成

　　當(dāng)使用Texture　Packer的時(shí)候，你可以像這里介紹的一樣使用GUI工具，但是你還可以把它集成到Xcode構(gòu)建過程中去。這樣你每一次編譯的時(shí)候，它都會(huì)自動(dòng)地（如果沒有更改，就不會(huì)更新）為了更新spritesheet。

　　如果你過去用cocos2d寫過游戲的話，你肯定明白一遍又一遍地重新生成你的spritesheet是那么的煩人！雖然每次可能都只需要幾秒鐘的時(shí)間，但是老是這樣重復(fù)地做這樣的事，確實(shí)很煩。

　　因此，讓我們更方便地構(gòu)建我們的工程吧--這里只需要花幾秒鐘時(shí)間，但是卻可以為你以后節(jié)省大量的時(shí)間。右鍵點(diǎn)擊“Resources”，選擇“Add\New　File...“，然后選擇　Mac　OS　X\Other\Shell Script，然后選擇下一點(diǎn)。并命名為PackTextures.sh，單擊完成。

　　然后使用下面的代碼替換掉PackTextures.sh里面的內(nèi)容：

#!/bin/sh

TP="/usr/local/bin/TexturePacker"

if[?"${ACTION}"="clean"]
then
echo?"cleaning..."

rm resources/sprites-hd.pvr.ccz
rm resources/sprites-hd.plist

rm resources/flower-hd.pvr.ccz
rm resources/flower-hd.plist

#....
#add all files to be removed in clean phase
#....
else
echo?"building..."

#create hd assets
${TP}--smart-update \
--format cocos2d \
--data resources/sprites-hd.plist \
--sheet resources/sprites-hd.pvr.ccz \
--dither-fs-alpha \
--opt RGBA4444 \
Art/sprites/*.png

${TP}--smart-update \
--format cocos2d \
--data resources/flower-hd.plist \
--sheet resources/flower-hd.pvr.ccz \
--dither-fs-alpha \
--opt RGB565 \
Art/flower/*.png

#....
#add other sheets to create here
#....
fi
exit?0

　　所有Texture　Packer　GUI界面能夠做的事情，命令行工具也能做。如果你在命令行里面輸入“TexturePacker”，你將會(huì)看到一系列它能夠接收的參數(shù)說明。

　　這個(gè)腳本僅僅通過運(yùn)行TexturePacker來從你的Art目錄下讀取精靈文件并創(chuàng)建spritesheet--就像你之前用GUI工具所做的一樣。你可以通過查看TexturePacker命令行工具幫助來獲得更多有關(guān)每個(gè)參數(shù)具體的用法。

　　接下來，你需要讓你的工程在編譯的時(shí)間能夠運(yùn)行這個(gè)腳本。右鍵點(diǎn)擊Targets，選擇“Add\New　Target...”，然后選擇“External　Target”（不是Shell　Script　Target），然后點(diǎn)擊下一步，重命名這個(gè)Target為TexturePacker，最后點(diǎn)擊Finish。

　　然后在你新建的target上面雙擊，然后把里面的內(nèi)容設(shè)置成下圖所示：

　　最后一步就是把這個(gè)target設(shè)置成你的程序的一個(gè)依賴。在TextureFun　target上面雙擊，然后選擇General　tab，再在Direct　Dependencies窗口下面選擇＋按鈕。然后從列表中選擇TexturePacker，最后單擊Add　Target。如圖下所示：

編譯并運(yùn)行你的程序，你將會(huì)從你的構(gòu)建結(jié)果信息中看到Texture　Packer的一些輸出信息，由此來判斷是否一切運(yùn)轉(zhuǎn)良好。

　　如果你看到這些輸出信息的話，那么意味著如果你想要增加一些新的文件到spritesheet中，你只需要把這些新的文件拖到指定的文件下面（這里是Art目錄），然后重新編譯一下，那么就會(huì)自動(dòng)生成新的spritesheet。相反，如果你要移除一些精靈圖片，再重新編譯一下，也ok。是不是非常方便？

Texture Packer vs. Zwoptex

　　首先，讓我們?cè)僬f一遍，我是Zwoptex的超級(jí)粉絲。我認(rèn)為Robert已經(jīng)做了一件非常好的事情來把這些東西整合到一起，而且我老實(shí)說，如果沒有這個(gè)工具，cocos2d不會(huì)走到今天這一步！

　　然后，當(dāng)我們來比較Texture　Packer和Zwoptex的特性的時(shí)候，Texture　Packer似乎包含了Zwoptex９０％的功能。但是，Texture　Packer有三個(gè)殺手锏級(jí)別的功能是Zwoptex所沒有的。

• 抖動(dòng)，抖動(dòng)，抖動(dòng).?噢，我是多么喜歡抖動(dòng)啊！在過去，有時(shí)我想使用比較低的像素格式，但是我不能，因?yàn)樗雌饋硇Ч懿缓谩５荰exture　Packer內(nèi)置的抖動(dòng)功能使得圖片看起來還是那么棒，盡管此時(shí)的圖片質(zhì)量很低。?
• pvr.ccz 支持.?我喜歡這個(gè)特性. 它確實(shí)能夠使游戲啟動(dòng)得更快, 而且會(huì)使你的可執(zhí)行程序更小. 現(xiàn)在我不用花很長(zhǎng)時(shí)間來上傳和下載我以前寫的應(yīng)用程序了，我可以很快的下載并更新。
• 命令行工具支持.?一旦你花一點(diǎn)時(shí)間把Texture　Packer集成到你的Xcode中去，你將會(huì)熱愛生活。它是如此地方便，特別是在整個(gè)開發(fā)過程中，美工對(duì)圖片改來改去的時(shí)候。

　　盡管Zwoptex非常棒, 但是它目前為此還是沒有提供我這里列舉的這些功能特性。

　　Texture Packer 有一點(diǎn)點(diǎn)貴?($17.95 vs. Zwoptex’s $14.95), 但是，我認(rèn)為多花這點(diǎn)錢值得。而且就像 ?Steffen Itterheim?所說, ２個(gè)工具都有所長(zhǎng)，都做了一件了不起的工作。

接下來該怎么做呢？

　　這里有上面的教程中所使用的示例代碼。

　　你是一個(gè)Texture　Packer粉絲　還是一個(gè)Zwoptex粉絲呢？不妨在下面一起聊聊吧！或者你有其它一些很好的策略來高效地在cocos2d里面加載紋理的話，請(qǐng)讓我知道。：）

ps：使用xcode4的朋友，主要需要注意的就是新增加的Target的參數(shù)的一些設(shè)置。因?yàn)閤code４生成的項(xiàng)目文件夾下并不是直接包含了所有的項(xiàng)目文件，而是一個(gè)工程文件和另外一個(gè)和項(xiàng)目名字一模一樣的文件夾，然后所有的項(xiàng)目有關(guān)的源文件和資源文件都放在那個(gè)目錄下，所以，我們?cè)黾拥腡arget里的設(shè)置信息應(yīng)該改成：

"$(PROJECT_DIR)/TextureFun/Resources/PackTexture.sh"

$(SRCROOT)/TextureFun

其實(shí)可能需要注意的就是自動(dòng)生成普清spritesheet，選中AutoSD選項(xiàng)就行了。

但是PackTexture.sh腳本里要相應(yīng)增加

?${TP}--smart-update \
--format cocos2d \
--data resources/sprites-hd.plist \
--sheet resources/sprites-hd.pvr.ccz \
--dither-fs-alpha \
--opt RGBA4444 \

--auto-sd \ #只要增加這一行就可以自動(dòng)生成普清的圖片了
Art/sprites/*.png

還有一些軟件的設(shè)置選項(xiàng)，大家可以參照軟件自帶的幫助文檔。

如果大家在實(shí)踐的過程中，遇到一些問題，可以留言。

?

著作權(quán)聲明：本文由http://www.cnblogs.com/andyque翻譯，歡迎轉(zhuǎn)載分享。請(qǐng)尊重作者勞動(dòng)，轉(zhuǎn)載時(shí)保留該聲明和作者博客鏈接，謝謝！

轉(zhuǎn)載于:https://www.cnblogs.com/optimus/archive/2012/06/27/2565860.html

總結(jié)

以上是生活随笔為你收集整理的cocos2d: 使用TexturePacker , pvr.ccz, CCSpriteBatchNode, CCSpriteFrameCache的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。