SpineのTexturePackingを利用する(基本編)

#はじめに
Spineにはテクスチャアトラスを書き出す機能がデフォルトでついており、これがなかなか高機能で良いものです。高機能ゆえに設定できることがそこそこ多く、若干面食らうので、詳細を調べてそれぞれを解説してみようと思います。

内容については、執筆時点での公式ドキュメントと、手持ちのSpine2.1.27 Essentialを元にして書かれています。 http://ja.esotericsoftware.com/spine-texture-packer#Image-indexes

#とりあえず使う
アトラスの書き出しは左上のメニュー -> export から、JSONかBinaryもしくは、JPEGかPNGを選択すると行うことができます。Create atlasにチェックボックスが入っていることを確認してください。また、その隣にあるSettingを押すことで、アトラス書き出しの設定パネルを表示することができます。

設定できることがたくさんあるものの、ほとんどの場合デフォルトのセッティングのままで書きだせばうまくいきます。画像の赤丸で囲んだ３つの部分だけ注意して、問題が起きた場合は設定を変えてみると良いでしょう。

• Max width / Max height
  最大テクスチャサイズ設定。Spineを利用するランタイムや端末の上限値を超えないようにしましょう。

• Premultiplied
  Alphaアルファ書き出しをプリマルチプライドアルファとするか。ランタイム側で透明部分の合成表示がおかくなったらチェックを外しましょう。

• Strip whitespace X/Y
  画像の透明部分をトリミングして書き出すか。省いてもランライム上でおかしな表示になることはないですが、 メッシュ機能を使う場合 はここをONにしてはいけません。

※ Premultiplied Alpha については公式のフォーラムにまとまっていました。
http://ja.esotericsoftware.com/forum/viewtopic.php?p=15772
不具合の具体例に関しては、記事中の画像を見ればわかるかと思いますが、詳細についてはこちらがかなり詳しいです。
http://compojigoku.blog.fc2.com/blog-entry-5.html

#設定の各項目詳細
上で解説した３つの項目は省きます。

##Regions

• Rotation
  画像を90度回転したパッキングを許す。許可するとより効率的にパーツ画像を１枚の画像に詰め込む事ができます。書き出したアトラスデータを使うアプリ側が対応している必要があります。

• Alias
  同じパーツ画像が複数存在する場合、１つにまとめる。（後述）

• Ignore blank images
  透明部分しかもたないパーツ画像をパッキングに含めない。

• Alpha threshold
  Strip whitespace機能を使う際に、透明とみなす閾値(0~255)。ここよりアルファ値が小さいか等しい部分がトリミングされます。

<ボク、パッペーです)
前回の投稿で作ったパッ平君は、あえて同じパーツ画像を使いまわした構成としていました。

左右反転した腕と

左右全く同じ左右の足です。

これをSpineでアトラスにパッキングするとこうなります。

反転した画像はまとめてもらえませんが、足の画像は１つにまとまっていますね。これがAliasの効果です。RotationもONになっているので足も90度回転しています。

##Region padding

• Padding X/Y
  各パーツの合間に設ける余白。2が推奨。余白がないと、隣り合ったパーツ画像が表示時に影響を与える事がある。

• Edge padding
  パック後の画像の淵部分にもpaddingを適用するか。

• Duplicate padding
  ONにするとテクスチャのつなぎ目を隠す効果があるようですが、デフォルトでoffなのでそのままで良いでしょう。

##Pages

• Min width/height
  アトラス画像サイズの最小値。変更する事はなさそうです。

• Power of two
  アトラス画像の縦横ドット数を2の倍数にするか。OpenGL ESの制約によるものですね。ONで良いでしょう。

• Square
  アトラス画像を正方形に限定するか。PVRTなどのテクスチャ圧縮アルゴリズムを使う場合に必須になる。

##Output

• Format
  書き出し形式をpngかjpgで選択する。

• JPG quality
  jpg画像の質を設定する。(Formatでjpgを選択すると設定欄が現れます。)

• Packing
  画像の配置方法をAtlasかGridかで選択。Atlasに対応していないランタムに書き出す場合などにGrid（つまりスプライトシート）を選択する。

• Bleed
  透明ピクセルのRGB値に近隣のピクセル値を利用するか。問題が起こらない限りデフォルトのままで良いでしょう。
  premultiplied alphaがらみの話で、こちらに詳細説明があります。
  http://ja.esotericsoftware.com/forum/viewtopic.php?p=13480

• Scale
  アトラス画像全体のスケール設定。

• Suffix
  上記Scale設定で複数のスケールを同時に書き出す際などに利用します。

例えばこのような設定でアトラスを書き出した場合、

下記のような出力が得られます。

Suffix(接尾語)設定があるものは、設定した接尾語がついた状態でのファイル書き出し、ないものはスケール値の名前のサブフォルダにファイルが入った状態での書き出しがなされます。

##Options

• Atlas extension
  書き出すアトラス設定ファイルの拡張子を設定します。デフォルトで.atlasです。例えば、公式に用意されているの方法でUNITYに持っていく際などは.atlas.txtとしたりします。

• Combine subdirectories
  指定したフォルダ内の画像をパックする際、そのサブフォルダ内の画像もまとめて１つのアトラスにパックします。(TexturePackingのオプションはJSONファイルで指定することもできるのですが、サブフォルダ内にJSONファイルがあっても無視されます。）

• Flatten paths
  チェックすると、パーツ画像がサブフォルダにある場合に、atlasファイルに書き出す情報からサブフォルダへのパス情報が取り除かれます。これを利用する場合は各サブフォルダ内にある画像同士でファイル名の重複がないようにします。

subfolder/foot
  rotate: true
  xy: 681, 138
  size: 72, 167
  orig: 72, 167
  offset: 0, 0
  index: -1

↓

foot
  rotate: true
  xy: 681, 138
  size: 72, 167
  orig: 72, 167
  offset: 0, 0
  index: 1

これによって、無駄なファイルサイズが削減されるとか、見通しが良くなるなどの利点があるかと思われます。

• Use indexes
  例えばパーツ画像名がfoot_1だった場合にこの項目にチェックを入れると、アトラス設定ファイル(.atlas)の内容に、パーツ名はfootでindex値が1である状態に書き出されます。foot_2などがあった場合も同じパーツ名でindex値が異なる状態で書き出されます。

foot_1
  rotate: true
  xy: 681, 138
  size: 72, 167
  orig: 72, 167
  offset: 0, 0
  index: -1

↓

foot
  rotate: true
  xy: 681, 138
  size: 72, 167
  orig: 72, 167
  offset: 0, 0
  index: 1

何の役に立つのかいまいち分かりづらいですが、連番がアニメーションのシーケンスを表す場合などに、書き出したアトラスデータから逆にアニメーションシーケンスを再現するのに役に立つということのようです。

• Fast
  効率的な(パッキングでは)ないが、素早くアトラスを書き出すことができます。画像パッキングのアルゴリズムに簡易なものを使うということかと思われます。開発中のイテレーションで時間がかかる場合などに利用できそうです。パッ平君の書き出しで試した場合、足の向きが縦のままアトラス画像が書き出されました。
  

• Debug
  チェックすると、パーツ画像に縁取り線がついた形でアトラス画像が書き出されます。動作検証時などに便利そうです。
  

##Runtime

ランタイム側でテクスチャを利用する際の設定項目が並んでいる設定グループです。詳細の説明はしませんが、それぞれ通常は変更しないで良いです。

• Filter min/mag
  テクスチャの拡大縮小時にどのように値を補完するかの設定。詳細は下記などを参照。
  https://www.opengl.org/wiki/Sampler_Object#Filtering

• Wrap X/Y
  テススチャの回り込み設定です。ClampToEdge、MirroredRepeat、Repeatから選択します。詳細は、https://open.gl/textures の wrapあたりに画像付きで解説されています。

• Format
  画像のメモリ上でのフォーマットを設定します。書き出すアトラス画像も変化しますが、ファイルサイズの圧縮を図る場合は別画像編集ツールを使いましょう。

#おわりに
書き出し設定については以上です。SpineのTexturePackingには、他にも機能があるので、そちらは次の投稿でまとめてみようと思います。

なんだこれ