Misaki

PhotoshopからSpine向けのデータをエクスポートするには、PhotoshopToSpineというスクリプトを使用するのが最も効率的です。このスクリプトを使用すると、Photoshop上でのレイヤーの表示順序や配置をそのままに、画像をSpineにインポートすることができます。

PhotoshopToSpineをダウンロード / 使用するには、以下の手順を行なってください:
------------------------------------------------------------------------------------

1. 以下のGitHubリポジトリにアクセスしてください
 https://github.com/EsotericSoftware/spine-scripts

2.右上にあります「Code」という緑色のボタンをクリックした後、
 表示されたメニューの「Download ZIP」を選択してください
 すると、ZIPファイルのダウンロードが開始されます
spine-scripts-download-ZIP.jpg

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を実行すると以下のようなウィンドウが開きます:
PhotoshopToSpine.jpg

■ 設定項目
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にインポートした際のスケルトンの初期位置を変更することができます。

定規の原点を変更するには、
1. Photoshopの上部メニューの表示 > 定規を選択するか、Ctrl+R(Macの場合はCmd+R)で定規を表示してください
2.X軸 / Y軸 それぞれのガイドを作成してください
3.定規の左上をクリックして、そのまま作成したガイドの交点までドラッグして原点を変更してください
ruler.gif

すると定規の0の表示位置が変わり、原点が変更されたのが確認できます。
なお、原点はPSDファイルを閉じるとリセットされてしまうので注意してください。

■ タグの使用
グループ名またはレイヤー名にタグを含めておくことで、グループ/レイヤーごとに細かい設定を行うことができます。詳しくはREADMEをご覧ください。
https://github.com/EsotericSoftware/spine-scripts/tree/master/photoshop#tags

また、PhotoshopToSpineのチュートリアル動画でもタグの使用方法が紹介されています(字幕オプションから日本語字幕を表示できます):

------------------------------------------------------------------------------------

適宜設定を行ったら、「OK」ボタンを押下してエクスポートします。

Spineメニューのデータインポートより書き出されたJSONファイルを選択してインポートできます。データインポートウィンドウの各設定項目の詳細についてはユーザーガイドをご確認ください:
インポート - Spineユーザーガイド: データ
No tienes los permisos requeridos para ver los archivos adjuntos a este mensaje.
Avatar de Usuario
Misaki

Misaki
  • Mensajes: 1011

sasaki

PSDデータの読み込みについて質問です。
PhotoshopToSpine.jsxを実行し、①(添付ファイル)が出るところまではできたのですがOKをクリックすると②の表示が出てしまい、③のような画面が出てしまいます。フォルダの方を確認しても、pngデータとjsonデータは見当たりませんでした④。
こうなってしまった原因やその解決策があったらご教授お願い致します :'(
No tienes los permisos requeridos para ver los archivos adjuntos a este mensaje.
sasaki
  • Mensajes: 1

Misaki

Spineでは、同一スキン内に同名のアタッチメントが存在出来ないため、
同名のレイヤーがある場合、スクリプトはエラーを表示します。
errors.txtに記載されている内容をもとに、レイヤー名を変更して再度エクスポートを実行してください。

必要であればグループ名に[merge]タグを含めることで線画レイヤーと塗りレイヤーを1つに結合してエクスポートすることができます。例えば下の画像のような構成にしていただくと、3つのレイヤーが結合した右手.pngという画像1枚だけが書き出されます。
Screen Shot 2022-06-07 at 14.29.55.png

また、結合されるレイヤーに同名のレイヤーが存在することは問題ありません。例えば下の画像のような構成です。
Screen Shot 2022-06-07 at 14.30.09.png

この場合、最終的に出力される右手.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 がリンクメッシュになります。
レイヤーマスク.png

衣装着せ替えがあるキャラクターを作成する際に大変便利なアップデートとなっています。
ぜひ最新のPhotoshopToSpineをお試しください!
https://github.com/EsotericSoftware/spine-scripts
No tienes los permisos requeridos para ver los archivos adjuntos a este mensaje.
Avatar de Usuario
Misaki

Misaki
  • Mensajes: 1011


Volver a 日本のSpine ユーザー