テクスチャパッキング

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

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

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

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

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

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

パッキング

テクスチャパッキングは、コマンドラインインターフェイスを使って行うこともできます。

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

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

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

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

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

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

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

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

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

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

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

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

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

設定

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

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

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

領域(Regions)

設定項目説明
Strip whitespace X/Y(空白X/Y削除)

チェックすると、入力画像の端にある空白のピクセルを除去します。除去された量はアトラスデータに保存されるので、アプリケーションでは空白が除去されていないかのように画像を描画することができます。

Rotation(回転)

チェックすると、一部の画像を90度回転させることで、より効率的なパッキングを可能にします。アプリケーションは、これらの領域を適切に描画するために特別な注意を払う必要があります。

Alias(エイリアス)

チェックすると、ピクセル単位で同一である2つの画像は一度だけパックされます。

Ignore blank images(空白イメージを無視)

チェックすると、透明なピクセルのみの画像はパックされなくなります。

Alpha threshold(アルファしきい値)

ここで指定した値以下のアルファ値は、空白削除の際にゼロとして扱われます。

領域パディング(Region padding)

設定項目説明
Padding X/Y(パディングX/Y)

パックされる画像間のピクセル数です。テクスチャフィルタリングの中には、隣接するピクセルを平均化するものがあるため、隣接する領域がお互いに影響し合わないようにするために、パディング値は2にすることを推奨しています。

Edge padding(エッジパディング)

チェックすると、ページ画像の端にもパディングが適用されます。

Duplicate padding(パディング複製)

チェックすると、パディングは、最も近い領域からピクセルをコピーするようになります。テクスチャフィルタリングでパディングされたピクセルが選択された際に、継ぎ目のようなノイズを隠すことができます。

ページ(Pages)

設定項目説明
Min width/height(最小幅/高さ)

各ページ画像の最小サイズを指定します。

Max width/height(最大幅/高さ)

各ページ画像の最大サイズを指定します。このサイズのページに画像が収まらない場合は、複数のページ画像が出力されます。

Power of two(2のべき乗)

出力ページの寸法を2の累乗にします。これは、いくつかのゲームツールキットで必要な条件です。

Divisible by 4(4で割り切れる)

出力ページの寸法を4で割り切れるようにします。これは、一部のテクスチャ圧縮アルゴリズムに必要な条件です。

Square(正方形)

幅と高さを等しくします。これは、いくつかのテクスチャ圧縮アルゴリズム(PVRTなど)に必要な条件です。

ランタイム(Runtime)

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

設定項目説明
Filter min/mag(フィルター縮小/拡大)

テクスチャの縮小と拡大の設定です。

Wrap X/Y(ラップX/Y)

テクスチャーラップの設定です。

Format(形式)

インメモリーのフォーマットです。

出力(Output)

設定項目説明
Format(形式)

ページをPNGまたはJPGのどちらで出力するかを指定します。

JPG quality(品質)

JPG出力時の圧縮率を指定します。

Packing(パッキング)

画像をどのようにパックするかを指定します。

  • Grid(グリッド) 画像を均一なグリッド(いわゆるスプライトシートの形)でパックします。
  • Rectangles(長方形) 長方形を使って画像をパックします。
  • Polygons(ポリゴン) Spineプロジェクトのメッシュハルを用いて、画像を可能な限り密にパックします。

Premultiply alpha(乗算済みアルファ)

ピクセルのRGB値にアルファ値を乗算します。使用する場合、ランタイムで画像をレンダリングする際にも乗算済みアルファを使用する必要があります。正しいブレンディングのためには、この方法が推奨されます。

Bleed(ブリード)

透明なピクセルのRGB値を、最も近くにある透明ではないピクセルのRGB値に設定します。ランタイムで乗算済みアルファを使用していない場合、透明なピクセルのRGB値がサンプリングされたときのテクスチャのフィルタリングアーティファクト(乱れ)を防ぎます。

Scale(スケール)

アトラス全体が各指定されたスケールごとに出力されます。

Suffix(サフィックス)

スケーリングされた各アトラスのサフィックス(接尾辞)です。空白の場合、複数のスケールのファイルが同じ名前でスケールごとのサブフォルダに出力されます。

Resample(リサンプル)

スケーリングに使用するアルゴリズムを指定します。

オプション(Options)

設定項目説明
Atlas extension(アトラス拡張子)

アトラスデータファイルの拡張子を指定します。

Combine subdirectories(サブディレクトリを結合)

現在のフォルダとすべてのサブフォルダが同じページにまとめられます。ただし、pack.jsonファイルを含むサブフォルダは結合されません。

Flatten paths(パス平坦化)

領域ファイル名からサブフォルダー名が削除されます。使用する際は画像ファイル名がユニーク(一意)でなければなりません。

Indexes(インデックス使用)

画像名から最後のアンダースコア(_)以降がすべて取り除かれます。詳しくは画像のインデックスをご覧ください。

Legacy output(レガシー出力)

4.0以前のバージョンのSpineランタイムで読み込めるフォーマットでアトラスファイルを書き込みます。

Debug(デバッグ)

チェックすると、出力ページにパックされた画像の境界を示す線が描かれます。

Fast(高速)

パッキングの効率は悪くなりますが、実行速度が格段に上がります。

Limit memory(メモリ制限)

チェックを外すと、すべての画像が同時にメモリに読み込まれるため、パッキング速度が向上します。十分なメモリがない場合、Spineがクラッシュしてしまうことがあります。

Pretty print(整形表示)

チェックすると、アトラスファイルは人から見て読みやすいように余計な空白を入れて書き出されます。

Current project(現在のプロジェクト)

チェックすると、現在のプロジェクトにあるメッシュイメージファイルのメッシュUVが、空白削除に使用されます。

データエクスポートの一貫としてパッキングする場合はこの設定は無視され、現在のプロジェクトのメッシュが常に空白削除に使用されます。

その他

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

設定項目説明
ignore

このフォルダとそのサブフォルダ内にある画像は、パックの対象外になります。

bleedIterations

ブリードを適用する回数を指定します。初期設定は2です。

separator

ファイル名に数字を付加する際に使用する文字列です。デフォルトはアンダースコア(_)です。

フォルダ構造

データエクスポート時のパッキングかつAttachments(アタッチメント)を選択している場合、フォルダ構造は使用されません。

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

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

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

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

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

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

JSON設定

データエクスポート時のパッキングかつAttachments(アタッチメント)を選択している場合、pack.jsonは使用されません。

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

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

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

{
stripWhitespaceX: true,
stripWhitespaceY: true,
rotation: true,
alias: true,
ignoreBlankImages: false,
alphaThreshold: 3,
minWidth: 16,
minHeight: 16,
maxWidth: 2048,
maxHeight: 2048,
pot: false,
multipleOfFour: false,
square: false,
outputFormat: png,
jpegQuality: 0.9,
premultiplyAlpha: true,
bleed: false,
bleedIterations: 2,
scale: [ 1 ],
scaleSuffix: [ ],
scaleResampling: [ bicubic ],
paddingX: 2,
paddingY: 2,
edgePadding: true,
duplicatePadding: false,
filterMin: Linear,
filterMag: Linear,
wrapX: ClampToEdge,
wrapY: ClampToEdge,
format: RGBA8888,
atlasExtension: .atlas,
combineSubdirectories: false,
flattenPaths: false,
useIndexes: false,
debug: false,
fast: false,
limitMemory: true,
currentProject: true,
packing: rectangles,
silent: false,
ignore: false
}

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

{
paddingX: 0,
paddingY: 0,
combineSubdirectories: false
}

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

{
ignore: true
}

テクスチャアトラス名

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

Ninepatches(ナインパッチ)

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

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

画像のインデックス

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

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

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

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

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