はじめに

Spine公式のPhotoshopプラグインでは、レイヤーごとに画像パーツを書き出すことができますが、Photohsop Generator (https://helpx.adobe.com/jp/photoshop/how-to/generate-web-graphics-automatically.html) 利用時のようにレイヤーグループを１枚の画像として書き出すことができず、(レイヤーグループは別の機能に割り当てられている）複雑なキャラクターデザインを行う場合、別途Spine書き出し用のpsdを用意するような羽目になってしまいます。この件について考察をしてみたので、記事にまとめてみます。

※記事を書いた時点で使用しているバージョンはPhotoshop CC 2015およびSpine2.1.27 Essentialです。Mac上での作業での解説となるので、Windowsの人は画像キャプチャとパスを適当に読み替えてください。

スマートオブジェクトを使ってみる

レイヤーグループは使えませんが、スマートオブジェクトは１枚の画像として書き出してくれました。
前の記事で画像を書き出したドラゴンは頭の部分がスマートオブジェクトになっています。

全体構成。

スマートオブジェクト内の構成。

問題なく正しく動くのですが、デザインの全体像を把握しながらの編集が若干やりずらいですね。

外部スマートオブジェクトを使って見る

外部も内部もかわらんのですが、 Photoshopの確かちょっと前のバージョンから外部ファイルのスマートオブジェクトが利用できるようになりました。また、ここでスマートオブジェクトとしてIllustratorのファイルも読み込むことができるので、使いどころがあるかもしれません。全体像が把握できない問題がさらに大きくなりますが。。とりあえず試してみましたが、問題なくデータの書き出しはできます。

※IllustratorにもSpine用の書き出しプラグインが存在します。SpineインストールフォルダのScript以下に存在します。機能はPhotoshop版よりも劣るため、公式としてもいったんaiからpsdにexportしてPhotoshop側のプラグインを利用することを推奨していました。
http://ja.esotericsoftware.com/spine-images#Illustrator

Generatorを使ってみる？

公式のPhotoshopプラグインを利用してSpineに読み込ませることができるのは、各パーツの位置と重ね合わせ順、のみです。位置の指定に関しては一度行ってしまえば再度行うこともないので、パーツ配置はおとなしくSpine上で(ガイドなど利用しつつ)行うとして、画像の作成および更新はGenerator(や、他のツール)に任せた方が楽なのかもしれません。

別プラグインに期待してみる？

公式でなくとも PhotoshopからSpine用のデータを書き出すプラグインなどを作成している人はたくさんおられるようです。

A number of alternate Photoshop scripts have been posted to the Spine forum(http://ja.esotericsoftware.com/forum/search.php)

まだ詳細を確認していませんが、こちらにAfterEffectsからモーションを書き出したり、Generatorと連携させるプラグイン？があるようですね。
http://ja.esotericsoftware.com/forum/viewtopic.php?f=11&t=2983

おわりに

Spineが読み込むjsonのフォーマットはわかりやすいですし、Adobeツールの拡張機能(CEP)作成周りも充実してきているので、自作してみるのも良いかと思います。
http://adobe-cep.github.io/CEP-Resources/
Flashからであれば、ある程度のボーン設定やモーションまでまとめて書き出すこともできるかもしれませんね。