PhotoshopからSpine向けのデータをエクスポートするには、PhotoshopToSpineというスクリプトを使用するのが最も効率的です。このスクリプトを使用すると、Photoshop上でのレイヤーの表示順序や配置をそのままに、画像をSpineにインポートすることができます。
PhotoshopToSpineをダウンロード / 使用するには、以下の手順を行なってください：
- 以下のGitHubリポジトリにアクセスしてください
https://github.com/EsotericSoftware/spine-scripts
2.右上にあります「Code」という緑色のボタンをクリックした後、
表示されたメニューの「Download ZIP」を選択してください
すると、ZIPファイルのダウンロードが開始されます
3.ダウンロードしたZIPファイルを解凍すると、
photoshopフォルダ内にPhotoshopToSpine.jsxがあります。
このファイルをPhotoshopのファイル > スクリプト > 参照...から指定して使用できます。
4.Photoshopのスクリプトメニューに表示して使用したい場合は、
PhotoshopのScriptsフォルダ内に配置してください。
例えば、WindowsでPhotoshop CC 2019を使用されている場合は以下のようなパスになります：
C:\Program Files\Adobe\Adobe Photoshop CC 2019\Presets\Scripts
macOSの場合は以下のようなパスになります：
~/Applications/Adobe Photoshop 2019/Presets/Scripts
PhotoshopToSpine.jsxを実行すると以下のようなウィンドウが開きます：
■ 設定項目
Ignore hidden layers ：非表示になっているグループおよびレイヤーを出力から除外します。
Ignore background layer ：背景レイヤーを出力から除外します。
Trim whitespace ：チェックされている場合、各レイヤーの余白が除外されます。チェックされていない場合、全ての画像はPSDのキャンバスサイズで出力されます。
Write Spine JSON ：Spineにインポートする際に使用できるJSONファイルを出力します。
Write template image ：現在表示されているレイヤーを元に、Spineでの配置参考に使えるテンプレート画像を出力します。
Scale ：画像ファイルに書き出す前に、この設定を元に各レイヤーを拡大または縮小します。これは、Photoshopでは(Spineで使用するよりも)高解像度のデータを扱いたい場合に便利です。
Padding ：各画像の周囲の余白ピクセルを指定します。これを設定することにより、画像のエッジ付近が不自然に見切れてしまったりすることを防ぐことができます。
Images output path ：画像ファイルの書き込み先のフォルダを指定します。
JSON output path ：JSONファイルの書き込み先のフォルダを指定します。
また、.jsonで終わる文字列を入力した場合は出力されるJSONファイル名を指定します。
例：skeleton.json
何も指定しなかった場合はPSDの名称が使用されます。
■ 原点の設定
PSDの原点がSpineの0,0座標に対応しているため、Photoshopからのエクスポートの前に原点を変更することでSpineにインポートした際のスケルトンの初期位置を変更することができます。
定規の原点を変更するには、
- Photoshopの上部メニューの
表示 > 定規を選択するか、Ctrl+R(Macの場合はCmd+R)で定規を表示してください
2.X軸 / Y軸 それぞれのガイドを作成してください
3.定規の左上をクリックして、そのまま作成したガイドの交点までドラッグして原点を変更してください
すると定規の0の表示位置が変わり、原点が変更されたのが確認できます。
なお、原点はPSDファイルを閉じるとリセットされてしまうので注意してください。
■ タグの使用
グループ名またはレイヤー名にタグを含めておくことで、グループ/レイヤーごとに細かい設定を行うことができます。詳しくはREADMEをご覧ください。
https://github.com/EsotericSoftware/spine-scripts/tree/master/photoshop#tags
また、PhotoshopToSpineのチュートリアル動画でもタグの使用方法が紹介されています（字幕オプションから日本語字幕を表示できます）：
適宜設定を行ったら、「OK」ボタンを押下してエクスポートします。
Spineメニューのデータインポートより書き出されたJSONファイルを選択してインポートできます。データインポートウィンドウの各設定項目の詳細についてはユーザーガイドをご確認ください：
インポート - Spineユーザーガイド: データ
