TexturePackerの使い方

TexturePackerはスプライトシートを作成するためのツールです。今回はそのTexturePackerの使い方を紹介したいと思います。TexturePackerはCocos2dだけでなく多様なフレームワークに対応しています。主要なフレームワークの一部をあげますと、

• AndEngine
• Corona
• Cocos2d
• LibGDX
• Moai
• Unity

等があります。他にも様々なフレームワークに対応していますので詳しくはTexturePackerの公式ページを参照してください。また、カスタムの書き出しフォーマットも指定可能ですので、実際どんなフレームワークであろうと対応可能です。

TexturePacker公式HP：https://www.codeandweb.com/texturepacker

今回は筆者が主にCocos2dで使用しているという都合上、勝手ながらCocos2dで使用することを想定し説明していきますのでご了承ください。各フレームワークでも同じ様な設定で問題ないかとは思いますが、調整が必要な箇所はいくつか出て来るかもしれません。

ダウンロード＆インストール

ダウンロードは下記から行ってください。対応しているOSはOS X、Windows、Linux(Ubuntu)となっています。

https://www.codeandweb.com/texturepacker/download

ダウンロード後はそれぞれのファイルを展開し、通常の他のプログラムのインストールと同じ要領で進めれば問題なくインストール出来るかと思います。

最初にダウンロードしたものは無料体験版となっていて、実際のほとんどの操作はできますが、書き出した画像に一部マスクがかかります（現在そういった仕様であるかは定かではないですが筆者が最後に確認した段階ではそうでした）。無料版だけでも充分ツールの使いやすさや有用性は確認できるかと思いますので、とりあえずは無料版で試してみて使えると思ったら購入してみるのが良いかと思います。

使い方

TexturePackerを起動すると、まず下の様な画面になります。左側にある設定項目は筆者の設定方法でカスタマイズされているので恐らく数値などが違ったりしていますが、これらはひとつずつ説明していくので心配しないでください。

画像の追加

まず最初にとりあえず使う画像を真ん中の青い領域か、右側の部分にドラッグ&ドロップしてみてください。画像が追加されます。

ドラッグ&ドロップをしたら、下記画像の様にドラッグ&ドロップした画像が一枚の画像に落とし込まれるかと思います。右側のカラムには追加された画像のリストが表示され、それぞれを選択するとそれぞれが画像上でハイライトされます。

上記画像では個々の画像をドラッグ&ドロップしていますが、実はTexturePackerはフォルダ毎入れることも可能です。その場合フォルダ内の画像が変更された場合、すぐにそれも反映されるので非常に便利です。画像の追加は以上です。非常に簡単ですね！

画像の削除

画像の削除も簡単です。項目に分けるまでもないですが、一応見やすさのために項目として分けました。

削除したい画像を右の一覧画面から選択するか、直接画像をクリックして、上のツールバーにある「Delete」ボタンを押します。

各種設定（Output）

画像の追加と削除がわかったところで、画面左側にある各項目の設定方法について説明していきたいと思います。

TexturePackerはエクスポートを行う際、ファイルを２種類吐き出します。一つは生成されたテキスチャ（画像）でもう一つがデータファイルです。このデータファイルは先ほど指定したフォーマットに沿って出力されます。データファイルの中身は主に画像の名称やそれの座標、大きさ等と言ったデータです。プログラム側でデータファイル内のデータを元に画像を切って行くわけです（本来手入力する様なものを自動で生成してくれる）。

Data Format

まず最初に一番上にあるData Formatという項目は名前の通り出力するデータのフォーマットを指定します。プルダウンから表示されるリストを見ればわかるかと思いますが各種フレームワーク用の出力フォーマットが用意されています。今回はCocos2dを使用することを想定していますので、Cocos2dを選択します。

Data file

次の「Data file」という項目はデータファイルの出力先です。右側にある「・・・」ボタンをクリックするとフォルダを探して指定することができます。ここで付けた名前と場所にデータファイルが出力されます。Cocos2dの場合は.plistとして出力されますので、「sample.plist」等と名前を付けて任意のフォルダに出力しましょう。

Data file部分を指定すると、おそらく自動で「Texture file」の部分も自動で記入されると思います。基本的に同じフォルダに出力したいものだと思いますので、基本的にそのまま放置で問題ないかと思います。

Texture format

次に「Texture format」ですが、こちらは見ての通り、出力されるテキスチャのファイルフォーマットを指定します。pngを初め、様々なフォーマットがサポートされていますが、筆者は.pvr.cczを使っています。どこかのチュートリアルでこれがもっとも良いとされていたのを鵜呑みにしているのですが、容量やクオリティー等色々試してみて一番良いと思ったフォーマットで良いと思います。（たしかチュートリアルはTexturePackerを作った本人のチュートリアルだったかと思います）

Texture file

「Texture file」は前述の通り、テキスチャの出力先です。こちらはData fileで指定したのと同じフォルダで問題ないかと思います。

Texture format固有設定

「Texture file」以下の項目は選択したTexture formatによって異なってきますんおで、今回は.pvr.cczを選択した前提で話しを進めて行きます。

Texture formatに.pvr.cczを指定すると「Premultiply alpha」という項目と「Flip PVR」という項目が出てきます。Premultiply alphaというのは名前の通り事前にα値を各色にかけていくといった設定です。一部フレームワークでは描画速度を上げるために必須となっているか、必要とされています。特に理由がない限りオンにしておいたほうが良いです。

次のFlip PVRですが、こちらはテキスチャを上下反転するという設定です。Unity等一部のフレームワークで必要になってきますが、Cocos2dでは必要ないのでオフにしておきます。

Image format

　「Image format」は出力されるテキスチャの 画像フォーマットを指定します。これもまた様々な画像フォーマットがサポートされていますが、主に使用するのは以下の３つかと思います。

• RGBA4444
• RGBA8888
• RGB565

どのフォーマットも一長一短ですが、筆者は基本的にはRGBA4444を使用しています。RGBA8888に比べれば画質は落ちますが、正直そこまで変わりません。TexturePacker上では結構わかりやすく変化しますが、iPhone上では特に気になりません。ちなみに通常デフォルトで読み込まれる画像はRGBA8888です。RGBA8888からRGBA4444にするだけで画像の容量が半分に抑えられるというメリットがあります。ゲーム等、画像や音を大量に使うアプリを作る際、容量を抑えるにはかなり有用な手段です。

RGB565はα値を使わない背景などに使ったりすることがありますが、費用対効果的に基本的には全部RGBA4444で統一して出力しています。

Dithering

さて、RGBA4444に変更するとグラデーション等のある画像だと急に線が出てきます。そこで「Dithering」の登場です。ディザリングについてはWikipediaのほうが筆者より上手く説明できているかと思いますので詳しく知りたい方は是非調べてみてください。簡単に言えばぼやかす！ということだと認識しています！w

ディザリングはグラデーションのあるものではFloydSteinbergAlpha、グラデーションが無くわりと単色なものはLinearやNearestNeighborを使ったほうが容量がセーブされたりします。ディザリング処理前と後はちょうど下記の様になります。

ディザリング処理を施したものをよーく見るとボツボツと点が目立ちますが、iPhoneに落とし込んだ時にはほとんどわからなくなります。Image formatと共にこのディザリングは中々おもしろいので色々と試してみると良いかもしれません。

AutoSD

AutoSDはRetina用と非Retina用のスプライトシートを吐き出すために使う設定です。今ではiPhone3G/Sに対応することはあまり無いかもしれませんが、もし対応したい場合はこのAutoSDを使えば容易にできます。

まずはData fileとTexture fileの名前のあとに-hdを付け加えます。これはiPhoneでいう@2xと一緒でCocos2dでは-hdと表記します。そして、AutoSDのところにあるボタンをクリックします。そうすると下記の様な画像が現れます。

AutoSD設定画面から「Presets」のプルダウンを開き「cocos2d hd/sd」を選択し、「Apply」ボタンをクリックすればOKです。これでファイルを出力する際に-hd版と半分のサイズのノーマル版、計４ファイルが出力されます。他にもiPad用や様々なプリセットがありますが、基本的に使い方は同じです。まず現在作っているシートを最大のサイズのものとし、そこからサイズを小さくしていくという形になっています。

例えばipad/hd/sdを使いたい場合は「Data file」と「Texture file」の名前の後に-ipadhdを付け加えApplyを押すだけです。Presetsのすぐ下にある「Main Extenstion」と同じエクステンションをファイル名につけることが必要となります。あとは自動で生成されます。注意したいのは追加した画像類がMain Extensionで指定したもののサイズであるということです。iPhone3GS用の素材を追加し-hdと付けて出力すると、-hdのものが3GS、エクステンション無しのファイルがその半分のサイズとなって出力されてしまいます。

また、プリセットを使用せず自分でもカスタムで好きなサイズを出力することも可能ですが、今回はその説明は省略させていただきます。おそらく今までの説明でなんとなくわかるかと思いますので色々とためしてみてください。

Outputまとめ

Outputの設定を今回紹介した通りに設定すると下記の様な設定になります。ファイル名はもちろん任意です。

各種設定（Geometry）

Geometryの設定項目ですが、出力するテキスチャの形を設定して行きます。設定項目の名称通りの物が多いので簡単に説明していきます。

各項目を説明する前にまずそもそも何故スプライトシートというものに画像を落とし込むのかということを説明したいと思います（Geometryで設定する項目に関係してくるため）。スプライトシート化することのメリットはまず画像ファイル自体の容量を小さくするということもあるのですが、もうひとつ大きな理由としてはOpenGLの仕様にあります。GPU内に画像をロードする際、画像は必ずPOT（２のべき乗、Power of Two）のサイズでロードされます。仮に33×33の画像があったとしても、それはGPUのメモリ上では64×64でロードされます。これはメモリの無駄遣いとなってしまうため、スプライトシートを用いて、なるべくたくさんの画像を２のべき乗内に納めようという思惑があります（もちろん他にもメリットはありますがここでは割愛させていただきます）。

上記を踏まえてGeometryの各項目の設定について説明したいと思います。

Max size

Max sizeはテキスチャ自体の最大サイズです。ここで指定したサイズを越えてしまう量（大きさ）の画像を取り込むと、右下にエラーが表示され、はみ出た画像は出力されません。端末によって読み込める最大のテキスチャサイズが決まっていたりするので、チェックしてサイズを決めましょう。iPhone4以降の端末でしたら2048×2048をサポートしているので2048×2048に設定しておいて問題ないでしょう。

Fixed size

Fixed sizeは特定のサイズに必ずしたい場合に設定します。例えばどんな画像を入れても512×512にしたい場合はFixed sizeを512×512に指定しておきます。この場合64×64の画像一枚だけいれた場合でも512×512のテキスチャとして出力されます。

Size constraints

Size constraintsではサイズの制限を指定できます。POTに指定すると必ず２のべき乗のサイズで出力されます。Any Sizeに指定すると画像が収まるぴったりのサイズで出力されます。NPOTに指定するとPOTでないサイズつまりAny SizeからPOTを除外したものが出力されます。フレームワークや端末によっていはPOTのものしかサポートしない場合もあります。

Force squared

Force squaredをオンにすると必ず四角形のテキスチャが出力されます。

Force word aligned

Force word alignedはテキスチャの各列が必ずメモリ上のワードをフルに使う様指定します。３２ビットの画像フォーマット（RGBA8888等）を使用している場合は既にword alignedですが、１６ビットの画像フォーマットを使うとそうとは限りません。つまり１６ビット余ることがあるということです。それを必ず余った分の１６ビットも使う様に設定するということです。iPhoneの場合はこれはオンにしておきます。

Pack

Packはテキスチャをもっとも小さくするために画像の配置を決めるためのアルゴリズムを指定します。Bestで問題ないかと思います。

Scale

Scaleはその名の通り、画像をスケールします。つまり出力される画像を指定した倍数でかけたサイズで出力します。特に理由が無い限り１で良いですが、Androidなどで利用する場合は重宝するかもしれません。

Scale mode

Scale modeは画像をスケールする際に使用するアルゴリズムを指定します。基本的にこちらはSmoothで良いかと思います。画像を縮小する際は間違いなくSmoothが一番良いです。

各種設定（Layout）

Layout配下の設定項目は特にいじる必要はないかと思います。主にテキスチャそのもののレイアウトに関する設定項目です。少なくとも筆者はほとんどいじったことがないです。

まとめ

長くなってしまいましたが、簡単にTexture Packerの設定について説明しました。そして最後に肝心な、ファイルの出力方法についてですが、上のツールバーにある「Publish」というボタンをクリックするだけで、指定したフォルダにファイルが出力されます。これをプロジェクトに入れたり、逆にプロジェクトのフォルダに直接入れている場合は何もする必要はありません。

お気に入りの設定や、よく使う設定が決まったら、上のツールバーにある「Save defaults」というボタンをクリックすれば、現在の設定がデフォルトの設定としてセーブされます。これで、次に新しいファイルを作る際も自分用の設定で作成されます。

Texture Packerを導入することによってかなりの時間短縮が計れるかと思います。まだ使った事が無い方は是非使ってみてはいかがでしょうか？