# テクスチャパッキング

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

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

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

<img src="/img/spine-user-guide/texture-packer/raptor-atlas.png" class="no-borders">!!

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

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

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

# パッキング

<callout>テクスチャパッキングは、[コマンドラインインターフェイス](/spine-command-line-interface)を使って行うこともできます。</callout>

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

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

[JSON](/spine-export#JSON)または[バイナリ](/spine-export#バイナリ)をエクスポートする際に`Pack(パック)`をチェックする方法:

![](/img/spine-user-guide/texture-packer/create-atlas.png)

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

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

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

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

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

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

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

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

![](/img/spine-user-guide/texture-packer/menu.png)

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

![](/img/spine-user-guide/texture-packer/dialog.png)

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

# 設定

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

![](/img/spine-user-guide/texture-packer/settings.png)

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

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

## 領域 - Regions

!table 設定項目, 説明

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

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

!row Alias(エイリアス)
チェックすると、ピクセル単位で同一である2つの画像は一度だけパックされます。

!row Ignore blank images(空白イメージを無視)
チェックすると、透明なピクセルのみの画像はパックされなくなります。

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

!table

## 領域パディング - Region padding

!table 設定項目, 説明

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

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

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

!table

## ページ - Pages

!table 設定項目, 説明

!row Min width/height(最小幅/高さ)
各ページ画像の最小サイズを指定します。

!row Max width/height(最大幅/高さ)
各ページ画像の最大サイズを指定します。このサイズのページに画像が収まらない場合は、複数のページ画像が出力されます。

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

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

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

!table

## ランタイム - Runtime

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

!table 設定項目, 説明

!row Filter min/mag(フィルター縮小/拡大)
テクスチャの縮小と拡大の設定です。

!row Wrap X/Y(ラップX/Y)
テクスチャーラップの設定です。

!row Format(形式)
インメモリーのフォーマットです。

!table

## 出力 - Output

!table 設定項目, 説明

!row Format(形式)
ページをPNGまたはJPGのどちらで出力するかを指定します。

!row JPG quality(品質)
JPG出力時の圧縮率を指定します。

!row Packing(パッキング)
画像をどのようにパックするかを指定します。
* `Grid(グリッド)`　画像を均一なグリッド（いわゆるスプライトシートの形）でパックします。
* `Rectangles(長方形)`　長方形を使って画像をパックします。
* `Polygons(ポリゴン)`　Spineプロジェクトのメッシュハルを用いて、画像を可能な限り密にパックします。

!row Premultiply alpha(乗算済みアルファ)
ピクセルのRGB値にアルファ値を乗算します。使用する場合、ランタイムで画像をレンダリングする際にも乗算済みアルファを使用する必要があります。[正しいブレンディング](/forum/d/3132-premultiplied-alpha-guide/2)のためには、この方法が推奨されます。

!row Bleed(ブリード)
透明なピクセルのRGB値を、最も近くにある透明ではないピクセルのRGB値に設定します。ランタイムで乗算済みアルファを使用していない場合、透明なピクセルのRGB値がサンプリングされたときのテクスチャの[フィルタリングアーティファクト(乱れ)](/forum/d/2765-why-is-bleed-an-option-black-lines-around-sprites/3)を防ぎます。

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

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

!row Resample(リサンプル)
スケーリングに使用するアルゴリズムを指定します。

!table

## オプション - Options

!table 設定項目, 説明

!row Atlas extension(アトラス拡張子)
アトラスデータファイルの拡張子を指定します。

!row Combine subdirectories(サブディレクトリを結合)
現在のフォルダとすべてのサブフォルダが同じページにまとめられます。ただし、`pack.json`ファイルを含むサブフォルダは結合されません。

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

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

!row Legacy output(レガシー出力)
4.0以前のバージョンのSpineランタイムで読み込めるフォーマットでアトラスファイルを書き込みます。

!row Debug(デバッグ)
チェックすると、出力ページにパックされた画像の境界を示す線が描かれます。

!row Auto Scale(自動スケール)
すべての画像が単一のアトラスページに収まるまで、スケールを小さくします。（低速）

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

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

!row Pretty print(整形表示)
チェックすると、アトラスファイルに可読性を高めるための空白を追加して書き出します。

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

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


!table

## その他

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

!table 設定項目, 説明

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

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

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

!table

# フォルダ構造

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

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

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

![](/img/spine-user-guide/texture-packer/folder-structure.png)

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

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

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

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

![](/img/spine-user-guide/texture-packer/folder-checkboxes.png)

# JSON設定

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

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

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

![](/img/spine-user-guide/command-line-interface/save-packer-settings.png)

以下は、利用可能なすべての設定を含む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.atlas`、`skeleton.png`、`skeleton2.png`となります。

# Ninepatches(ナインパッチ)

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

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

# 画像のインデックス

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


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

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

Spineは、テクスチャアトラスをから個々のイメージを書き出すテクスチャ・アンパッキング機能も提供しています。アトラス内の回転は元に戻され、削除された空白も個々のイメージに復元されます。

![](/img/spine-user-guide/texture-packer/unpacker.png)

<callout>テクスチャアンパッキングも、[コマンドラインインターフェイス](spine-command-line-interface#アンパック)を使って行うことができます。</callout>

アトラスファイルへのパスと`Output folder (出力フォルダ)`（解凍した画像を保存するフォルダ）へのパスを入力します。アトラスが[乗算済みアルファ](#出力-Output)でパックされている場合は、`Unpremultiply alpha (乗算済みアルファ)` にチェックを入れてください。ただしアトラスファイルに「[pma:true](/spine-atlas-format#Page-sections)」の記述があれば、このチェックボックスの代わりにそれが使われます。

[次: インポート](/spine-import)
[前: エクスポート](/spine-export)
[Spine ユーザーガイド: 目次]