- Modifié
PhotoshopからSpineへのエクスポート/Spineでのインポート手順
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ユーザーガイド: データ
PSDデータの読み込みについて質問です。
PhotoshopToSpine.jsxを実行し、①(添付ファイル)が出るところまではできたのですがOKをクリックすると②の表示が出てしまい、③のような画面が出てしまいます。フォルダの方を確認しても、pngデータとjsonデータは見当たりませんでした④。
こうなってしまった原因やその解決策があったらご教授お願い致します
Spineでは、同一スキン内に同名のアタッチメントが存在出来ないため、
同名のレイヤーがある場合、スクリプトはエラーを表示します。
errors.txtに記載されている内容をもとに、レイヤー名を変更して再度エクスポートを実行してください。
必要であればグループ名に[merge]
タグを含めることで線画レイヤーと塗りレイヤーを1つに結合してエクスポートすることができます。例えば下の画像のような構成にしていただくと、3つのレイヤーが結合した右手.png
という画像1枚だけが書き出されます。
また、結合されるレイヤーに同名のレイヤーが存在することは問題ありません。例えば下の画像のような構成です。
この場合、最終的に出力される右手.png
と左手.png
は命名が被っていないので正常にエクスポートできます。
PhotoshopToSpine v7.26より、レイヤーマスクでレイヤーのトリミング境界を定めることができるようになりました!
これまで、各レイヤーの境界は、
①余白をトリミングする (Trim whitespace
有効)
②カンバスのサイズで書き出す (Trim whitespace
無効)
の2択となっていましたが、今回のアップデートで、レイヤーマスクで任意の境界を設定できるようになったため、例えば右足のfoot_Lスロットに入るアタッチメントを、スニーカーでもブーツでも必ず100 * 200 pxにしたいというような場合に、100 * 200 pxのレイヤーマスクを作成しておけば常にそのサイズで書き出されるようになります。
また、あらかじめレイヤーをメッシュアタッチメントとして定義することができる[mesh]タグが追加されました!
[mesh:name]のように : の後に名前を入力すると、あらかじめメッシュアタッチメント名を指定できます。
そしてもし定義された名前がすでに他のレイヤーの名前と被っていた場合、自動的にリンクメッシュ(旧名称:リンク済みメッシュ)として認識されます。
例えば foot_L [mesh]
というレイヤーがあって、それに対してsneaker_L [mesh:foot_L]
と名付けられたメッシュがある場合、前者のfoot_Lがソースメッシュになり、sneaker_L がリンクメッシュになります。
衣装着せ替えがあるキャラクターを作成する際に大変便利なアップデートとなっています。
ぜひ最新のPhotoshopToSpineをお試しください!
https://github.com/EsotericSoftware/spine-scripts
- Modifié
PhotoshopToSpine v7.33がリリースされました!今回のアップデートで新しく[name:pattern]
タグが追加されました。これは、グループ内のレイヤーの名前に接頭辞または接尾辞を追加して書き出すことができるタグになっています。
例えば、以下のスクリーンショットのように、グループ名を[name:chara_A_*]
としておくと、
そのグループ内のレイヤー名にchara_A_
という接頭辞を追加した状態で書き出すことができます。
*
(アスタリスク) がレイヤー名が入る位置を示しており、*
の位置を変えれば接頭辞にするのか接尾辞にするのか、または両方で挟むのかを指定できます。
例えば、[name:chara_*_A]
とすれば、接頭辞にchara_
、接尾辞に_A
を追加することができます。
また、フォルダ分けと命名を同時に行うことも可能です。
例えば以下のように[name:chara_A/01_*]
とすると、
chara_A
という名前のフォルダが作られ、その中に01_
という接頭辞を持つ画像が書き出されます。
注意点として、この方法で書き出した場合、インポート後のスロットは各レイヤー(アタッチメント)ごとに別々になります。
同名のレイヤーは同じスロットにまとめたい場合は、[folder]
タグを使ってください。
Spine 4.2からはエディター上でPSDファイルのインポート処理を行うことができるようになりましたので、PhotoshopToSpineスクリプトを利用する方法を解説したこのスレッドのピン留めを解除しました。
(ただ現在もSpine 4.1以前のバージョンを利用しているという方にはまだ参考にできる内容になっています。)