Texture Packerをインストールしてみた

kobold2dのサンプルに入っていたParallax-Side-Scrollerを改造して自分のゲームにしている件です。
前回、iPhone5(4インチ)の画面サイズを検知して、背景の表示を出し分けるところまでいきました。
今回は、自前のキャラクターの表示を試してみました。

kobold2dのサンプルにある「Parallax-Side-Scroller」は、キャラクターの表示をPVRというテクスチャでやってるということはプロジェクトを見て何となく分かりました。

130501 0001
で、プロジェクトを見てみると、「Resources」フォルダの中に「game-art.plist」なるものがありました。これを開けてみると「frames」というのがあり、その中に〜.pngという感じでキャラクターの絵が並んでいるように見受けられました。
どういう風にgame-art.plistファイルが作られているのか知らなかったので、先ずは差し替えてみようという安易な発想で試してみることにしました(今思えば、本当はPVRについてググるべきでした)。

Finderでプロジェクトのフォルダ構成を見てみると、「Assets」というフォルダの中に「GameArt」というフォルダがあり、その中にgame-art.plistで使われていると思われるpngが並んでいました。

Dummy enemy anim1
「このフォルダに自前のpng画像を入れて、game-art.plistファイルで設定すれば良いに違いない」という大きな勘違いを基に、自前のキャラクター画像(ミサイル)を用意して試してみました。

Picture 1
そして試したのがこの画像です。何か、どう見ても最初のキャラクターの一部が表示されている様子です。。。
で、最初のキャラクターpngに画像編集ソフトでマークを付けてそのままRunしたらどうなるか、試しにやってみました。すると、キャラクター画像が差し変わらないことが分かりました。
つまり、GameArtフォルダに画像を入れてplistでどうにかしても、ゲーム上で画像は変わらないということが分かりました。

実はこの時、既に気になっていることがありました。
1.game-art-hd.plistという名前からしてRetina対応のファイルがある
2.plistファイルの各pngの中に記載された「frame」の座標が絶対座標っぽいので本当は1枚絵がありそうなところ
3.「game-art.pvr.ccz」という開けないファイルがあること
そこで、「PVR テクスチャ」でググったところ、こちらのページ(「WebOS Goodies」)でPVRについて知ることができました。
iPhoneのアプリ開発においては、PVRはiPhoneのPowerVR(GPU)でメリットを享受できる圧縮テクスチャのアルゴリズムの1つのようです。
結局、失敗時に気になっていた「1枚絵」というのが正解なようで、スプライトシートという1枚絵を作らねばならないことが分かりました。

「.pvr.ccz テクスチャ作成」でググったところ、こちらのページ(「ブレイブソフト 技術研究Blog」)にTexture Packerというツールが紹介されていました。Texture Packerの使い方も詳細に書かれていて、この先お世話になりそうです。
このTexture Packerを使うと簡単にスプライトシート(.pvr.cczファイル)を書き出しできるということで、早速ダウンロードしてMacにインストールしてみました。
ちなみに、
このTexture Packer自体のサイトには、スプライトシートを作る重要性が分かり易いアニメーション動画で掲載されていました(英語ですが)。

130425 0001
Texture Packerのdmgファイルをダウンロードして開くと、同意を求められるので「Agree」します。

130425 0002
次に、開いたウィンドウのTexture Packerのアイコンを、図の通りにApplicationフォルダへドラッグアンドドロップします。これで、ApplicationフォルダへTexture Packerがインストールされます。

130425 0005
Texture Packerを初回起動すると、モードの選択を選ぶことになります。
最初の1週間であれば、「Test Pro」で製品版をお試しできます。機能制限された無償版は、「Use free」ですね。
私は、Texture Packerのサイトでブログ所持者として申請して、無償のキーをもらったので、アクティベーションしました。

130425 0003
最後に、License Agreementに「I agree」したら、Texture Packerを使えるようになります。

130501 0002
Texture Packerをインストール後に、Xcodeでgame-art.pvr.cczを見ると、たくさんの画像が並んだ1枚絵が表示されました。アイコンもTexture Packerのものになって、Finderでもgame-art.pvr.cczファイルの中身をプレビューできるようになります。
次回は、Texture Packerを使って自前のキャラクター画像のスプライトシートを作成してみます。