illustratorからレイヤーを保持したSpine用のデータを作る

スポンサーリンク

流れとしては、illustratorでレイヤーに分けてpsd保存し、photoshopから専用プラグインでエクスポートして、Spineでデータインポートします。

illustratorでの作業

レイヤーに分配(シーケンス)

まずはillustratorで、なんか腕っぽいイラストを描きました。
赤い手の部分、A腕、B腕のそれぞれはグループ化されています。
レイヤーメニューから「レイヤーに分配(シーケンス)」を選びます。

レイヤー

これで、partsレイヤーの中がサブレイヤー化されました。
それとは別に、backgroundレイヤーには、ドキュメントサイズと同じ白い矩形オブジェクトを作りました。
これはphotoshopに書き出す時に余白を作るための措置です。

photoshopに書き出し

「ファイル→書き出し→psd形式」で、一旦photoshop用に書き出します。
解像度は72ppi。
「レイヤーを保持」にチェックを入れます。
「編集機能を最大限に保持」はチェックを外します(photoshop側で、グループ化された各パーツがさらに細分化されてしまうのを防ぐため)

photoshopでの作業

photoshopに書き出し

次に書き出したデータをphotoshopで読み込みます。
partsフォルダ配下にレイヤー分けされています。
backgroundレイヤーはもう必要ないので捨てるなり透明にするなりします。

photoshopToSpine.jsx

「ファイル→スクリプト→参照」からSpine用にデータを書き出すプラグインを選びます。
Win10でSpine 3.8.75 Professionalの環境ですと、
「C:\Program Files (x86)\Spine\scripts\photoshop\PhotoshopToSpine.jsx」がパスになっています。

photoshopToSpine.jsx

デフォルトのままでOKを押します。

jsonファイル

jsonファイルとimagesフォルダが出来上がりました。

Spineでの作業

Spineでデータインポート

Spineを起動させて新規プロジェクトを作成します。
「Spineロゴ→データインポート」を選択します。

Spineでデータインポート

さっきのparts.jsonを選びます。

Spineでデータインポート

うまくインポートできました。
(backgroundオブジェクトがある場合は不要なので削除します)


[環境]
Win10
illustrator CS2
photoshop CS2
Spine 3.8.75 Professional