Texture Packer チュートリアル: Sprite Sheetの作成と最適化

Optimize texture usage with Texture Packer and Pixel Formats!

アップデート5/10/2013: Cocos2D 2.1-rc0a、Texture Packer 3.07、最新のObjective-Cスタイルに対応しました。(このチュートリアルのオリジナル投稿者はRay Wenderlich氏で、Tony Dahbura氏によってアップデートされました)

2Dのゲームを作成する時は、そのパフォーマンスの為に複数のスプライトを”Sprite Sheet”と呼ばれる大きな一枚のイメージの中に統合する事はとても大切な事ですね。

加えてこのTexture Packerは”Sprite Sheet”をいとも簡単に作成してくれるんです。ただ、ボタンをクリックするだけ。はい、それだけなんです。

今回の”Texture Packer”チュートリアルでは”Texture Packer”の使い方と作成したSprite Sheetをゲームに最適化させる方法をCocos2D 2.Xを使って解説していきます。

途中、”ピクセル・フォーマット”の使い方を学ぶと同時に、”Texture Packer”でゲームの起動時間の短縮やスムーズな動きを管理方法を学びましょう！

もし、「Cocos2Dって何ですか？初めて聞いたんですけど」って方は、出来ればCocos2D tutorialsをご覧になって、基本を学ぶ事をお勧めします。

始めましょう！

さっきも言いましたが、このチュートリアルの焦点は”Texture Packer”何ですが、やっぱりちゃんとしたゲームの中で解説していった方が分かりやすいと思うんです。それが今回Cocos2Dを使う理由なんです。

何よりもまず始めに、最新のCocos2D v2.xの”unstable”バージョンをインストールする事から始めましょうか。

インストールが完了したら、Xcodeを起動してiOScocos2d v 2.xcocos2D iOSテンプレートを選択、プロジェクト名をTextureFunとして下さい。あ、”Device Family”をiPadにして下さいね。

今回のプロジェクトではARCを使用しますが、デフォルトではARCに対応していません。「えっ、面倒くさいんじゃないんですか？」いえいえ、ARCに対応させるのはとても簡単なんですよ！EditRefactorConvert to Objective-C ARCと選択して、ドロップダウンを広げて最後(main.m、AppDelegate.m、 HelloWorldLayer.mとそしてIntroLayer.m)の４ファイルをクリックして Checkをクリックして魔法を掛ければ終わりです。

次にSprite Sheetを作成するにあたってイメージが必要ですね。sample artworkをダウンロードしてプロジェクトにフォルダごとドラッグして追加して下さい。すると以下の様になるはずです：

これで、”Texture Packer”を使用してのSprite Sheetを作成するため、新規のプロジェクトと必要なアートワークの準備ができました！

“Texture Packer”でSprite Sheetを作成

まずは、Texture Packerをダウンロードして下さい。このチュートリアルでは問題なく使える”Lite”バージョンもありますが、使うとすぐに、その使いやすさに”Full”バージョンの購入を検討してしまうでしょう。

DMG(ダウンロードマネージャー)をダウンロードするとパッケージを開いてライセンスに同意する必要があります。次に”Texture Packer”のアイコンを”Application”フォルダにドラッグすると、”Texture Packer”のインストールが始まります。





インストールが完了したら、Applicationフォルダの中の”Texture Packer”を起動してください。ライセンスに同意してスタート画面が表示されたら、”Test Pro for 1 week”を選択して”Continue”。

次に上のツールボタンのAdd Folderボタンをクリックして、TextureFun/TextureFun_Art/spritesフォルダを選択します。すると”Texture Packer”はイメージを読み込んで、自動的にSprite Sheetに整頓して以下の様に並べてくれます:

画面の右側には”Texture Atlas”に読み込まれたイメージと名前がが全て表示されています。それらをクリックするとそれぞれのバウンディングボックス(イメージの領域)が表示されます！

AddFolderでイメージを追加する際に、先ほど読み込んだ様にフォルダごと読み込む場合は、それぞれのイメージを個々に参照して追加するわけではなく、フォルダを参照しているの、この後別のスプライトをフォルダに追加した場合、次に起動した時には、それらの追加したイメージも自動的に”Texture Packer”に読み込まれて表示されます。いいでしょ、これ！

加えて、全てのスプライトを同じフォルダに追加しておく必要はありません。今回の様にフォルダでスプライトを参照する場合は、整頓の目的でサブフォルダを作成して、Cocos2Dに読み込ませる時にそれらの相対パスを使って参照する事も出来ます。

最後にその気になれば複数のフォルダを読み込ませる事も出来ます。これは複数のSprite Sheetやレベルで同じアイテムを持っているような大規模なゲームの開発時にとても便利です。

それでは、画面左側のオプションを見ていきましょう。ここではSprite Sheetの　”Output”、”Geometry”、”Layout”等の設定を行います。

“Texture Setting”のバーをドラッグしてみて下さい。独立して動かせるのが分かるでしょう？これはTexture Packerの数ある機能のうちの一つで、メイン画面を広くとる事が出来る為、非常に使いやすいです。

それでは、”Texture Setting”で注意すべき項目を幾つか見ていきましょう：

• Data Format:これはゲームのフレームワークに合わせて(出力する)データファイルの形式を選択します。もし、使っているフレームワークが選択のリストに無い時は、そのフレームワークをサポートする為にカスタムフォーマットを作成する事も出来ます。
• Texture Format:ここではSprite Sheetの画像ファイルの形式を指定します。このチュートリアルでは”pvr.ccz”フォーマットを選択します。”pvr.ccz”はPVR形式のフォーマットをzlibで圧縮したフォーマットです。その他にもたくさんのフォーマット形式を選択出来ます。
• Premultiply alpha: PVR形式のテクスチャを出力する際には、オンにする必要があります。
• Image Format:(出力する)テクスチャのピクセルフォーマットを選択します。ここでのセッティングで「グラフィックにおいて1ピクセル毎にメモリ上何バイト使用するのか」に影響を与えます。このチュートリアルではRGBA4444(1ピクセル毎に２バイト)を選択します。
• Dithering:使用可能な色数が少ない環境で中間色を表現するために、表示可能な色を組み合わせて表示させる為の設定を行う。FloydSteinberg Alpha方式は、ピクセルの低下による色の損失を最小限に抑える為、に用意されている。
• AutoSD:テクスチャ アトラスを出力する際に、もう一つ別のサイズのテクスチャアトラスを自動的にサイズとスケールを変更して出力してくれる有り難い機能の一つ。デバイスタイプとディスプレイタイプに基づいて適切なファイルを選択するために使用する命名形式を付けることで設定出来ます。
• Max size/Fixed size:ここではSprite Sheetの最大限の大きさを設定します。Sprite Sheetを特定のサイズに制限したい場合、この設定は非常に有益です(特定のデバイスや一定の限度を越えているかどうか確認する為だけの場合等)。
• Size constraintsL POT (Power of 2) is checked by default – this picks the smallest possible “power of two fit” for the sprites you added to the sprite sheet. This is a really handy feature, because it saves you time having to figure that out yourself.
• Scale:ここではスプライトシート内の画像よりも大きいもしくは小さいスケールでスプライトシートを保存することができます。スプライトシートの”2倍”の画像を読み込む時（RatinaディスプレイデバイスやiPad用)、しかし実際には（RetinaディスプレイなしのiPhone/ iPod用タッチで使用するための）半分のサイズでそれらを保存したい場合、これは便利です。
• Algorithm Texture PackerにはMaxRectsとBasicの２種類のアルゴリズムが用意されています。デフォルトのMaxRectsで何の問題も無いので、ここはこのままにしておきましょう。
• Border/shape padding:スプライトの(Borderはスプライトの周囲)境界に隙間を作成します。スプライト同士の境界が０ピクセルの時は値を大きくしてスプライト通しをハッキリわける事も出来る。
• Extrude:指定したピクセル数分テクスチャの周囲の色を押し出した状態でテクスチャを作成します。
• Trim:スプライトの周辺の透明な境界線を削除して、もっと効率的にSprite Sheetにスプライトを詰め込みたい時に使用します。
• Shape outlines:デバッグの為にスプライトの領域を確認する目的に使います。

今回のチュートリアルでは、上記の値を変更する必要はありません。そのままで大丈夫です。でも、”Output”のセクションの値だけは変更して下さいね。あっ、でもちょっとその前に、Cocos2Dのピクセルフォーマットについて考えてみましょう。

ピクセル・フォーマット

開発するゲームエンジンのピクセルフォーマットを理解する事はとても重要です。何故なら、この事はゲームのイメージを読み込む為にメモリがどれほど消費されるかと言う、ゲーム開発においてとても重要な問題のうちの一つだからです。ゲームでたくさんのイメージを読み込む必要がある時は、メモリの消費を最小限に抑える事を念頭に開発をするべきです。

Cocos2Dではイメージの読み込みはデフォルトで、ピクセルにつき４バイトです。それぞれ赤、緑、青、1バイトで（8ビット）、アルファ透過性のために1バイト（8ビット)。これはRGBA8888として知られています。

つまりピクセルフォーマットをデフォルトのRGBA8888でイメージを読み込むとき、以下の計算でメモリの管理が出来ます:

width x height x bytes per pixel = size in memory

今回の場合、イメージを512×512をデフォルトのピクセルフォーマットで読み込んだ場合:

512 x 512 x 4 = 1MB (!)

なるほどiPhone 5 phonesだとメモリは1GBですから、高解像度のスクリーン故、ゲームに於けるたくさんのアクションや大きなSprite Sheetイメージが積み重なりあっという間に、、、、ってことになってしまいます。特に3Gなんてメモリは128MBですし、4Sは512MB、考えただけで怖くなってしまいますね。

ここで、ピクセルフォーマットの登場です。ピクセル毎のバイトの使用を減らしてメモリ消費を抑えましょう。でも、困った事もあるんです。ピクセル毎にバイトのメモリ使用を押さえる代わりに、画質が低下する事はある意味仕方がありませんね。

大抵は、読み込みを最小限に抑え、同時にゲームも面白くするべきですね。背景は8ビットもしくは16ビットのフォーマットで、スプライトは16ビットか36ビット。これらに関しては、ピクセル・フォーマットガイドを参照してください。

ところで、Texture Packerのウインドウ右下を見てみると、Sprite Sheetのメモリ使用量の大きさが、現時点のピクセルフォーマットでどのくらいの大きさになるか、見る事が出来ます。ですから、上記の計算は必要ないんです。 :]

ピクセルフォーマットとデザリング

多くの場合、小さなピクセルフォーマットでいイメージを読み込んだ場合、あまり気にするほど画質の低下はありません。しかしグラデーションを多用したイメーならば、話は別です。以下はこのアプリからのイメージを16 ビット(RGBA4444)で読み込んだ場合です:

グラデーションを多様している箇所にシマシマになってしまってますね。

そうすると、もう１度イメージをグラデーションを少なくして描き直すか、大きい値のピクセルフォーマットを選択し直すかを考えてしまいますよね。でも、ここがこのTexture Packerが凄いと言われる所以なんです。ものすごい機能を持ってるんですよ。それがイメージデザリングです!

Texture PackerでSprite Sheetを保存する時、今までと同様にピクセルフォーマットを選択して(例えばRGBA4444)”デザリングメソッド”を選択します。これは、基本的には、低い画質と表現出来る色の量を変更して、奇麗に見せる凄い機能です。特に上記のグラデーションの箇所に、その力を発揮します。

それではこのスプライトシートのImage formatにRGBA4444を選択してください。続いてDithering optionにFloydSteinbergAlphaを選択してください。Texture Packerがすぐに変更を開始して、どうですか？さっきとは比べ物にならないくらい、良くなったでしょう？上のスクリーンショットと見比べてください。

左側のパネルOutputのData Formatがcocos2dである事を確認してください。続いてData Fileの右横の…をクリックして、Cocos2D 2.xの新規のプロジェクトの”Resources”フォルダを選択してファイル名をsprites-ipadhd.plistとして保存してください。

続いてTexture Formatのドロップダウンからzlib compr. PVR (.pvr.ccz, Ver.2)を選択すると”Premultiplying alpha”のチェックボックスとともに警告が現れますがここはyesにチェックを入れて下さい。

次にAutoSDの横の”ギア”アイコンをクリックして、Presetsのドロップダウンでcocos2d ipad/hd/sdを選択してApplyをクリック。これでTexture Packerは自動的にiPhone(Retina)用(2x)とiPhone(non-Retina)用(1x)にスケールダウンダウンしてくれます。

そしてポップアップを消して、Publishをクリック。Texture Packerは自動的に全ての解像度用にスプライトシートを作成してくれます。

最後のステップとして、この設定をSaveをクリックしてTextureFun/ResourcesにSave asをsprites.tpsとタイプして”File of Type”にTexturePacker TPSを選択してファイルを保存します。ここに保存したファイルでいつでもセッティングの内容を確認出来ます。このファイルの確認はこのチュートリアルの最後にお教えします。

いよいよXcodeに戻って、ファイルをプロジェクトに追加してください。Resourcesフォルダを右クリックしてAdd Files to TextureFun…をクリック。Resourcesフォルダの”sprite”から始まるファイルを全て(.tpsファイルは覗く)選択して、Copy items into destination group’s folderチェックを外してAddボタンをクリックしてプロジェクトに追加します。ここまでで、プロジェクトの”Resources”フォルダは以下の様になっているはずです:

「てょっと待ってくださいよ、”pvr.ccz”って何なんですか、一体！？」、、、あっ、説明してませんでしたっけ？お答えしましょう！

PVRと圧縮って何ですか？

PVRイメージはiOSデバイスのPowerVRグラフィックチップ専用のコンテナみたいな物です。iOSを使う時に先に変換するよりもグラフィックカードに直接読み込む為、非常に使いやすいんです。

PVRイメージはたくさんの種類のピクセルフォーマットを使ったイメージデータを含む事が出来るんです。以前はCocos2DはiOS SDKのテクスチャツール アプリで作成した、ピクセルフォーマットしかサポートされていませんでした。しかし今のCocos2Dではたくさんのフォーマットを広範囲にわたってサポートする様になってきました。

そして、ここ最近のCocos2Dはアップデートでpvr.cczと呼ばれる、PVRの圧縮バージョンをサポートするようになりました。”pvr.ccz”を使う利点はa)イメージが圧縮されているためバイナリサイズが小さい事b)ゲームの起動時間の大幅な短縮が挙げられます。

つまり簡単に言うと、Sprite Sheetを16ビットのピクセルフォーマット(メモリコストの削減の為)と”pvr.ccz”(アプリの起動時間の短縮の為)で保存するんです。

背景の最適化

それでは、背景のイメージも最適化しましょうね。Newをクリックして、新規のTexture Packerのウインドウを開きます。Add Folderをクリックして、TextureFun/TextureFun_Art/backgroundフォルダを選択します。しかし”MuleDeea.png”のイメージは大きく(2048×2048)でウインドウの下に”1 not fitting sprites, …”という警告が出ます。

これはTexture Packerが「イメージが大きすぎますよ」と言ってるんです。ここで、Sprite Sheetのサイズを大きくするよりも、Sprite Sheetが１枚のイメージ(2048×2048)になるなら、Border paddingを使いましょう。Layoutセクションまでスクロールして”Border Padding”の値を0にします。これで警告も消えてシートに表示されました。

次にOutputセクションのImage formatをRGB565(これは大きなイメージを使用する場合に出来る限り最低限の画質に設定します)に設定して、DitheringにFloydSteinbergを選択してください。

左側のパネルOutputのData Formatがcocos2dである事を確認してください。続いてData Fileの横の…をクリックして、Cocos2D 2.xの新規のプロジェクトのResourcesフォルダを選択してファイル名をbackground-ipadhd.plistとして保存してください。

続いてTexture format、のドロップダウンからzlib compr. PVR (.pvr.ccz, Ver.2)を選択すると”Premultiplying alpha”のチェックボックスとともに警告が現れますがここはyesにチェックしておいてください。

次にAutoSDの横の”ギア”アイコンをクリックして、Presetsのドロップダウンでcocos2d ipad/hd/sdを選択してApplyをクリック。これでTexture Packerは自動的にiPhone(Retina)用(2x)とiPhone(non-Retina)用(1x)にスケールダウンダウンしてくれます。

そしてポップアップを消して、Publishをクリック。Texture Packerは自動的に全ての解像度用にスプライトシートを作成してくれます。

最後のステップとして、この設定をSaveをクリックしてTextureFun/ResourcesにSave asをbackground.tpsとタイプして”File of Type”にTexturePacker TPSを選択してファイルを保存します。ここに保存したファイルでいつでもセッティングの内容を確認出来ます。このファイルの確認はこのチュートリアルの最後にお教えします。

いよいよSprite SheetをCocos2Dで使おう！

いよいよXcodeに戻って、ファイルをプロジェクトに追加してください。Resourcesフォルダを右クリックしてAdd Files to TextureFun…をクリック。Resourcesフォルダのbackgroundから始まるファイルを全て(.tpsファイルは覗く)選択して、Copy items into destination group’s folderチェックを外してAddボタンをクリックしてプロジェクトに追加します。ここまでで、プロジェクトの”Resources”フォルダは以下の様になっているはずです:

次にHelloWorldLayer.mを開いてinitメソッドの内容を以下に置換えて下さい:

-(id) init
{
    if( (self=[super init] )) {
        CGSize winSize = [CCDirector sharedDirector].winSize;
 
        CCSpriteBatchNode *backgroundBgNode;
        backgroundBgNode = [CCSpriteBatchNode batchNodeWithFile:@"background.pvr.ccz"];
        [self addChild:backgroundBgNode];
        [[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"background.plist"];
        CCSprite *background = [CCSprite spriteWithSpriteFrameName:@"MuleDeer-ipadhd.png"];
        background.anchorPoint = ccp(0,0);
        [backgroundBgNode addChild:background];
 
        // More coming here soon...
    }
    return self;
}

ここでは、始めに背景画像を読み込んでいます。以前は[CCTexture2D setDefaultAlphaPixelFormat:kCCTexture2DPixelFormat_RGB565]をコールして、Cocos2DにRBG565を使うよう指定する必要がありましたが、PVRファイルに保存したピクセルフォーマットのリファレンスが格納されるので、新しいバージョンでは必要なくなりました。

次に pvr.ccz形式でディスクからイメージを読み込むためにbatchNodeWithFileを使ってSprite SheetからSprite batch nodeを作成します。その後plistを読み込んで、最終的にbackground.pngを指定して spriteWithSpriteFrameName code>でスプライトを得ます。

次に”more coming here soon”のコメント欄に以下を追加して下さい:

CCSpriteBatchNode *spritesBgNode;
spritesBgNode = [CCSpriteBatchNode batchNodeWithFile:@"sprites.pvr.ccz"];
[self addChild:spritesBgNode];    
[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"sprites.plist"];

ここではSprite SheetファイルでSprite batch nodeを作成しています。加えて、Plistからそれぞれのフレームの詳細をSprite frame cacheに読み込んでいます。

最後に上記のすぐ下に以下を加えてください:

NSArray *images = [NSArray arrayWithObjects:@"bird.png", @"cat.png", @"dog.png", @"turtle.png", nil];      
for(int i = 0; i < images.count; ++i) {
    NSString *image = [images objectAtIndex:i];
    float offsetFraction = ((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];
}

そして、それぞれのイメージをループでスクリーン上に分散させます。ここでコンパイルしてランすると(iPadのRetinaを選択してください)以下の様に表示されます:

やりましたね、ちゃんと表示されました。

もし、コンパイル&ランをiPadの”non-Retina”で実行したら、背景イメージがスクリーンの左下に表示されたはずです。でも、これ画面全体ではありませんね。一体、どうしたんでしょうか？

AutoSDのオプションでスプライトのサイズ違いを作成しましたよね。Texture Packerはデフォルトではhd(non-Retina)のファイルサフィックス(ファイル名の最後に付く文字)を使用しますが、Cocos2Dは”ipad”のサフィックスを探します。

幸運にもこの問題は簡単に解決出来ます。AppDelegate.mを開いてdidFinishLaunchingWithOptionsメソッドの中の以下の行を探してください：

[sharedFileUtils setiPadSuffix:@"-ipad"];      // Default on iPad is "ipad"

上記の行を以下に変更してください。:

[sharedFileUtils setiPadSuffix:@"-hd"];        // Default on iPad is "ipad", but match it to hd for TexturePacker

保存して、もう一度ランしてnon-Retina(iPad)を選択してみてください。これで背景イメージが適切に表示されましたね。

しかし、実は上記で一番優れたポイントは見えないところで起きているんです。

シーンの裏舞台では、イメージの読み込みのスピードが格段に上がっているんです。しかも、メモリコストも大幅に削減されています。そして何より、美しい！Texture Packerのビルトインの設定だけでこんなに簡単に実行出来るんです。Texture Packerって凄いと思いませんか？

あれっ、信じてくれないんですか？

このチュートリアルを執筆している間、何回か通常のシナリオでアプリのパフォーマンスをテストしてみました。以下はそのテストの概要です:

• とにかく馬鹿な事をやってみました: デフォルトのピクセルフォーマットで、それぞれのスプライトを個別に読み込んでみました(Sprite Sheet未使用)。結果：読み込み時、約.73秒、メモリ消費：〜26MB、シーンにスプライトを追加していく毎にパフォーマンスが低下。
• Sprite Sheet使用(デフォルトのピクセルフォーマット):なかなか良い。ゲームのパフォーマンスが向上、加えてメモリ消費量の低下。
• 他のSprite Sheetジェネレーターで作成したSprite SheetをPNGで保存、ピクセルフォーマットを落とし、デザリング未使用: これは、大きな効果が現れました。特にメモリ使用量：約〜15MB、しかし、起動時間に約１秒(これはピクセルバッファを変更した為だろう)。逆にグラフィックの質の低下が目立ちます。
• Texture Packerでデザリング使用のSprite Sheetを”pvr.ccz”で保存し作成: グラフィックの質の向上と起動時間の大幅な短縮：約0.31秒。

以上の事から、上記の方法を使えば、ほとんどの場合満足のおける結果となるはずです :]

Texture Packerコマンドラインツールのインストール

Texture Packerを使用する時、当然これまで解説してきた様にGUIツールとして使用する事が出来ますが、もう一つの選択として、Xcodeに統合するコマンドラインツールとして使用する事も出来ます。この場合、Sprite Sheetをコンパイル時に自動的にアップデートしてくれます。コマンドラインツールを使用する場合、インストールする必要があります。「でも、インストールするの難しいんでしょう？」、、、いえいえ、Texture Packerなら非常に簡単です。Texture Packerを起動して、TexturePacker　メニューからInstall Command Line Toolを選択します。

選択すると、ダイアログボックスが開き、何所にインストールするか聞いてきます。これはデフォルトのロケーション/usr/local/binがベストでしょう。それでは Installをクリックしてください。インストールが終了すると、無事インストールが終了した事を知らせるダイアログが表示されます。OKをクリックして、Doneをクリック。これでコマンドラインがインストールされました。:]

次にターミナルを開き、TexturePackerとタイプして”return”をクリック。するとヘルプスクリーンがスクロールします。次にXcodeのプロジェクトのビルドサイクルへ統合します。

Texture Packerで出来る事はすべてコマンドラインツールで使用可能です。

Texture PackerとXcodeの統合

これまでにCocos2D 2.xでゲーム作成に携わった経験のある方なら、Sprite Sheetを絶えず更新する事が如何に面倒くさいかお分かりいただけるでしょう。更新の度に、例え2〜3秒だとしても積み重なれば膨大な時間の浪費です:

それでは、このプロジェクトの為に自動化しようではありませんか。少しだけの時間で、大幅な時間の短縮に繋がります。Resourcesを右クリックしてNew File...を選択、OS XOtherShell Scriptと選択して、Nextをクリック。”Name”をPackTextures.shとタイプして”TextureFun”のResourcesディレクトリを選択しCreateをクリック。

PackTextures.shの内容を以下に置換えて下さい:

#!/bin/sh

TP="/usr/local/bin/TexturePacker"
cd ${PROJECT_DIR}/${PROJECT}

if [ "${ACTION}" = "clean" ]; then
    echo "cleaning..."
    
    rm -f Resources/sprites*.pvr.ccz
    rm -f Resources/sprites*.plist

    rm -f Resources/background*.pvr.ccz
    rm -f Resources/background*.plist

    # ....
    # add all files to be removed in clean phase
    # ....
else
    #ensure the file exists
    if [ -f "${TP}" ]; then
        echo "building..."
        # create assets
        ${TP} --smart-update 
        --format cocos2d 
        --texture-format pvr2ccz 
        --main-extension "-ipadhd" 
        --autosd-variant 0.5:-hd 
        --autosd-variant 0.25: 
        --data Resources/sprites-ipadhd.plist 
        --sheet Resources/sprites-ipadhd.pvr.ccz 
        --dither-fs-alpha 
        --opt RGBA4444 
        TextureFun_Art/sprites/*.png

        ${TP} --smart-update 
        --format cocos2d 
        --texture-format pvr2ccz 
        --main-extension "-ipadhd" 
        --autosd-variant 0.5:-hd 
        --autosd-variant 0.25: 
        --data background-ipadhd.plist 
        --sheet background-ipadhd.pvr.ccz 
        --dither-fs 
        --opt RGB565 
        --border-padding 0 
        --width 2048 
        --height 2048 
        TextureFun_Art/background/*.png
        # ....
        # add other sheets to create here
        # ....

        exit 0
    else
        #if here the TexturePacker command line file could not be found
        echo "TexturePacker tool not installed in ${TP}"
        echo "skipping requested operation."
        exit 1
    fi

fi
exit 0

上記のスクリプトはTexture PackerコマンドラインツールでArtファイルからSprite Sheetを作成(先ほどGUIツールでSprite Sheetを作成した様に)しています。コマンドラインについての情報は“Texture Packer command line Help”で確認してください。

次に、コンパイル時にこのシェルスクリプトを実行する為の設定を行います。Xcodeを選択して、TARGETの下のTextureFunを選択して、Add Targetボタンをクリック。次にOSX, Other, External Build Systemを選択してNextをクリック。

“Product Name”にTexturePackerとタイプしてFinishをクリック。次に新しいTargetを選択して/bin/shとBuild Toolにタイプ。最後にArgumentsに${PROJECT_DIR}/${PROJECT}/Resources/PackTextures.shとタイプ。これはプロジェクトを見て“PackTextures.sh”スクリプトをXcodeに探させます。

ビルド時のTargetの追加

The final step is to set this target as a dependency of your app. Single click on your TextureFun target, go to the Build Phases tab, select the Target Dependencies row and expand it. Click the + button and select the TexturePacker Target in the dialog.

最後のステップはアプリとこのTargetを関連づけます。TextureFunのTargetをクリックしてBuild Phasesタブ、そしてTarget Dependenciesを開きます。＋ボタンをクリックして、ダイアログのTexturePacker Targetを選択します。

アプリをコンパイル&ランしてください。するとTexture Packerのアウトプットにビルドの結果が表示されると、全てOKです。

この表示された物を見てみると、Sprite Sheetに新しいファイルを追加したい時は文字通りスプライトのディレクトリにドロップするだけで良いんです。ねっ、簡単でしょ！

プロジェクトに一度Texture Packerを統合すれば、本当に楽になります。特に開発サイクルにおいてアーティスト諸君に何度も何度もグラフィックスを描着替えさせる度にスプライトシートを作り直す事を考えると、大幅な時間の短縮に繋がります。

やっぱり、Proバージョンが良いんですかね？

プロライセンスでは、スクリプト内でこれらの設定をコーディングする必要がなくなり、TexturePacker内で作成されたTPSファイルを参照することにより、Xcodeの中で上記の使用されるスクリプトを大幅に簡素化する機能があります。

他の利点としては、グラフィカルに設定を変更して、更新/新しいTPSのファイルを保存するとXcodeが次回ビルドする時にその変更をアップデートしてくれます！ PackTextures.shスクリプトの（プロ）のバージョンは次のようになります：

#!/bin/sh

TP="/usr/local/bin/TexturePacker"
cd ${PROJECT_DIR}/${PROJECT}

if [ "${ACTION}" = "clean" ]; then
    echo "cleaning..."
    
    rm -f Resources/sprites*.pvr.ccz
    rm -f Resources/sprites*.plist

    rm -f Resources/background*.pvr.ccz
    rm -f Resources/background*.plist

    # ....
    # add all files to be removed in clean phase
    # ....
else
    #ensure the file exists
    if [ -f "${TP}" ]; then
        echo "building..."
        # create assets
        ${TP} --smart-update Resources/sprites.tps

        ${TP} --smart-update Resources/background.tps

        # ....
        # add other sheets to create here
        # ....

        exit 0
    else
        #if here the TexturePacker command line file could not be found
        echo "TexturePacker tool not installed in ${TP}"
        echo "skipping requested operation."
        exit 1
    fi

fi
exit 0

上記のスクリプトでは、“sprite.tps”と“background.tps”ファイルを参照しています。先ほどのようにすべてのオプションを書き出す必要がなくなるのです。これは、助かりますねぇ！：]

次のお勧めチュートリアルは何でしょうか？

今回のプロジェクトのサンプルコードはこちらからどうぞ

Texture Packerをもっと効率的に使う方法やそれ以外の知って得する情報をご存知の方は是非教えて下さい！:]

Texture Packer チュートリアル: Sprite Sheetの作成と最適化 is a post from: Ray Wenderlich

The post Texture Packer チュートリアル: Sprite Sheetの作成と最適化 appeared first on Ray Wenderlich.