流れとしては、illustratorでレイヤーに分けてpsd保存し、photoshopから専用プラグインでエクスポートして、Spineでデータインポートします。
illustratorでの作業
まずはillustratorで、なんか腕っぽいイラストを描きました。
赤い手の部分、A腕、B腕のそれぞれはグループ化されています。
レイヤーメニューから「レイヤーに分配(シーケンス)」を選びます。
これで、partsレイヤーの中がサブレイヤー化されました。
それとは別に、backgroundレイヤーには、ドキュメントサイズと同じ白い矩形オブジェクトを作りました。
これはphotoshopに書き出す時に余白を作るための措置です。
「ファイル→書き出し→psd形式」で、一旦photoshop用に書き出します。
解像度は72ppi。
「レイヤーを保持」にチェックを入れます。
「編集機能を最大限に保持」はチェックを外します(photoshop側で、グループ化された各パーツがさらに細分化されてしまうのを防ぐため)
photoshopでの作業
次に書き出したデータをphotoshopで読み込みます。
partsフォルダ配下にレイヤー分けされています。
backgroundレイヤーはもう必要ないので捨てるなり透明にするなりします。
「ファイル→スクリプト→参照」からSpine用にデータを書き出すプラグインを選びます。
Win10でSpine 3.8.75 Professionalの環境ですと、
「C:\Program Files (x86)\Spine\scripts\photoshop\PhotoshopToSpine.jsx」がパスになっています。
デフォルトのままでOKを押します。
jsonファイルとimagesフォルダが出来上がりました。
Spineでの作業
Spineを起動させて新規プロジェクトを作成します。
「Spineロゴ→データインポート」を選択します。
さっきのparts.jsonを選びます。
うまくインポートできました。
(backgroundオブジェクトがある場合は不要なので削除します)
[環境]
Win10
illustrator CS2
photoshop CS2
Spine 3.8.75 Professional