テクスチャパッキング

Spineは、個々のイメージをテクスチャアトラスやグリッド（スプライトシート）にパックして、ランタイムでのレンダリングを効率化することができます。また、Spineのテクスチャ・パッカーは汎用ツールです。Spineのスケルトンに使用するだけでなく、アプリケーションのすべての画像をパックするために個別に実行することもできます。

ほとんどのグラフィックスAPI（例えばOpenGL等）では、テクスチャがバインドされると何らかの描画が行われ、別のテクスチャがバインドされるとさらに描画が行われる、という風に動作します。テクスチャのバインドは比較的コストがかかるため、1つの大きな画像の上にたくさんの小さな画像を保存し、大きなテクスチャを一度バインドしてから、その部分を何度も描画するのが理想的です。Spineでは、たくさんの小さな画像を大きな画像に効率的にパックすることができ、「テクスチャアトラス」と呼ばれるものができあがります。

Spineは複数の高度なパッキングアルゴリズムを使用しています。パッキングは様々なサイズで多数のヒューリスティックを用いて行われ、最も効率的な結果が選択されます。

テクスチャアトラスファイル

テクスチャアトラスは、拡張子が.atlasのテキストファイルと、アトラスの「ページ画像」と呼ばれる1つ以上の画像ファイルで構成されています。アトラスファイルには、アトラス「領域」と呼ばれるパックされた小さな画像のページ画像内の座標が記述されています。各領域はアトラスファイルの中で名前で参照されます。

1つのテクスチャアトラスは多くのページ画像を持つことができ、アプリケーションのすべての画像を1つのアトラスにまとめることができます。複数のアトラスを使用する唯一の理由になりうるのは、一部のイメージを同時にロードする必要がない場合です。

パッキング

テクスチャ・パッカーは2つの方法で実行できます:

データエクスポート時のパッキング

JSONまたはバイナリをエクスポートする際にPack(パック)をチェックする方法:

パックする画像ファイルを探す方法として、2つのオプションが用意されています:

• Attachments(アタッチメント) 選択すると、アタッチメントで使用されている画像ファイルのみがパックされます。パックにはいかなるpack.jsonファイルも使用しません。
• Image folders(画像フォルダ) 選択すると、各スケルトンのイメージパスにある画像ファイルがパックされます。これにより、pack.jsonファイルを使用して各フォルダのパックを設定することができます。

テクスチャアトラスの作成方法には2つのオプションがあります:

• Atlas per skeleton(各スケルトンごとのアトラス) 各スケルトンごとにアトラスがパックされます。各アトラスの名前にはスケルトン名が使用され、対応するスケルトンデータファイルの名前と一致します。
• Single atlas(単一のアトラス) すべてのスケルトンのイメージが単一のアトラスにまとめられます。アトラスの名前はプロジェクトファイルの名前から拡張子を除いたものになります。

Pack Settings(パック設定)ボタンでは、テクスチャ・パッカーの設定を行います。

スケルトンデータとテクスチャアトラスを同時にエクスポートするには、この方法が便利です。しかし、テクスチャ・パッカーを個別に実行した方が柔軟性が高い場合もあります。

テクスチャ・パッカーの個別実行

メインメニューからTexture Packer(テクスチャ・パッカー)を選択します。

テクスチャ・パッカーのダイアログで、パックするイメージが入っているフォルダ、アトラスファイルを書き込む場所、アトラスの名前を指定します。

Settings(設定)ボタンでは、テクスチャ・パッカーの設定を行います。

設定

テクスチャ・パッカーには、画像をどのようにパックするかを制御する設定がたくさんあります。

このダイアログは、最初は戸惑うかもしれませんが、多くの設定はデフォルトのままにしておいて問題ありません。注目すべき設定は以下の項目です:

• 最大の幅(Max width)と高さ(Height)。これは、1つのアトラスページ画像に収まる量を決定します。
• 長方形(Rectangles)でパッキングするか、ポリゴン(Polygons)でパッキングするか。ポリゴンでパッキングした方がより効率的ですが、出力に時間がかかってしまうのと、なぜその結果になるのかを理解するためにはプロジェクトファイルの状態を知っている必要があります。
• 乗算済みアルファ(Premultiplied alpha)。この設定は、実行時に画像がどのようにレンダリングされるかに合わせる必要があります。
• 空白削除(Strip whitespace)を使用するか。
• スケール設定。

領域(Regions)

領域パディング(Region padding)

ページ(Pages)

ランタイム(Runtime)

これらの設定は、データを読み込むアプリケーションがランタイムで任意に適用するためのヒントです。

出力(Output)

オプション(Options)

その他

これらの設定は、設定ダイアログでは利用できず、JSON設定ファイルでのみ指定できます。

フォルダ構造

Spineは、アプリケーションのすべての画像を一度にパックすることができます。フォルダを指定すると、Spineは画像ファイルを再帰的にスキャンします。フォルダ内の画像が1ページの最大サイズに収まらない場合は、複数のページが作成されます。

同じフォルダ内の画像は、同じページに配置されます。すべての画像が1ページに収まる場合は、サブフォルダを使用すべきではありません。なぜなら、すべての画像を1ページに収めるのが最も効率的だからです。それ以外の場合は、サブフォルダを使用して関連する画像を分離し、テクスチャのバインドを最小限に抑えることができます。

例えば、「ゲーム」の画像と「ポーズメニュー」の画像を別々のフォルダに入れたい場合、これらの画像は連続して描画されます。つまりすべてのゲーム画像が描かれた後（1つ目のバインド）、ポーズメニューが上に描かれます(もう1つのバインド)。画像が1つのフォルダに入っていて、それが複数のページになっている場合、各ページにゲーム画像とポーズメニュー画像が混在してしまう可能性があります。そうすると、ゲームとポーズメニューをそれぞれ1つずつレンダリングするのではなく、多くのテクスチャバインディングが必要になってしまいます。

サブフォルダは、関連するテクスチャ設定を持つ画像をまとめるのにも便利です。ランタイムメモリフォーマット（RGBA、RGBなど）やフィルタリング（ニアレスト、リニアなど）などの設定は、テクスチャごとに行います。テクスチャごとに異なる設定を必要とする画像は、別のページにまとめる必要があるため、別のサブフォルダに入れておくと良いでしょう。

サブフォルダを、ページ上でどの画像をグループ化するかを制御するためではなく、単に整理するためだけに使用する場合は、Combine subdirectories(サブディレクトリを結合)設定をご覧ください。

アトラスファイルの領域名にサブフォルダのパスが使用されないようにするには、Flatten paths(パス平坦化)設定をご覧ください。

JSON設定

各フォルダには、そのフォルダの設定を指定する pack.jsonファイルを含めることができます。各サブフォルダは、その親フォルダの設定をすべて継承します。サブフォルダで設定された内容は、親フォルダで設定された内容よりも優先されます。

pack.jsonファイルは、Spineのテクスチャ・パッカー設定ダイアログの下部にある Save(保存)Saveボタンをクリックして作成できます。

以下は、利用可能なすべての設定を含むJSONの例です。ほとんどの場合、二重引用符は省略可能です。

すべての設定を指定する必要はなく、一部または全部を省略することができます。例えば、「パディング」や「サブディレクトリを結合」をオフにするには、次のようなJSONを使用します:

フォルダ内のすべての画像とすべてのサブフォルダを無視したい場合は、以下を使用してください:

テクスチャアトラス名

テクスチャアトラス名は、アトラスファイルとPNGファイルの名前に使用されます。たとえば、テクスチャアトラス名がskeletonの場合、アトラスファイルの名前はskeleton.atlas、skeleton.png、skeleton2.pngとなります。

Ninepatches(ナインパッチ)

ナインパッチはSpineのスケルトンにはあまり使えませんが、他の目的には使えます。

画像ファイル名が、拡張子の直前に".9"で終わっている場合、ナインパッチとみなされます。ナインパッチ画像は、手動で作成することも、こちらのツールを使って作成することもできます。画像には、1pxの透明な枠線が必要です。上端と左端には、任意で1本の連続した黒のピクセルを置くことができます。これは、分割情報、つまりナインパッチのどの部分が伸びるかを示します。下辺と右辺には、パディング情報を示す黒の連続した1ラインを任意に設定できます。パディング情報とは、ナインパッチの上にあるコンテンツをどのように挿入するかを示すものです。この画像をパックすると、1pxのボーダーが削除され、分割とパディングの情報がアトラスデータファイルに保存されます。

画像のインデックス

画像のインデックスは、Spineのスケルトンにはあまり役に立ちませんが、他の目的には役立ちます。

画像のファイル名がアンダースコアと数字で終わっている場合（例:animation_23.png)、その数字が「インデックス」とみなされ、アトラスデータファイルのその領域に保存されます。画像の名前はアンダースコアとインデックスを除いて保存されます。これにより、同じ名前の画像をインデックス順に並べて検索することができ、フレームの順序を崩さずにフレーム・バイ・フレーム(コマ撮り)のアニメーションを簡単にパックすることができます。

テクスチャ・アンパッカー

Spineは、テクスチャアトラスを受け取り、そこから個々のイメージを書き出すテクスチャ・アンパッキング機能を提供しています。アトラス内の回転は元に戻され、削除された空白も個々のイメージに復元されます。また、オプションで、個々のイメージから Premultiply Alpha(乗算済みアルファ)を取り除くこともできます。

次: インポート 前: エクスポート