• 日本語
  • PhotoshopからSpineへのエクスポート/Spineでのインポート手順

Related Discussions
...

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

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


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

定規の原点を変更するには、

  1. 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データは見当たりませんでした④。
こうなってしまった原因やその解決策があったらご教授お願い致します 😢

4 meses depois

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

9 meses depois

PhotoshopToSpine v7.33がリリースされました!今回のアップデートで新しく[name:pattern]タグが追加されました。これは、グループ内のレイヤーの名前に接頭辞または接尾辞を追加して書き出すことができるタグになっています。

例えば、以下のスクリーンショットのように、グループ名を[name:chara_A_*]としておくと、

そのグループ内のレイヤー名にchara_A_という接頭辞を追加した状態で書き出すことができます。

* (アスタリスク) がレイヤー名が入る位置を示しており、*の位置を変えれば接頭辞にするのか接尾辞にするのか、または両方で挟むのかを指定できます。
例えば、[name:chara_*_A]とすれば、接頭辞にchara_、接尾辞に_Aを追加することができます。


また、フォルダ分けと命名を同時に行うことも可能です。
例えば以下のように[name:chara_A/01_*]とすると、

chara_Aという名前のフォルダが作られ、その中に01_という接頭辞を持つ画像が書き出されます。

注意点として、この方法で書き出した場合、インポート後のスロットは各レイヤー(アタッチメント)ごとに別々になります。

同名のレイヤーは同じスロットにまとめたい場合は、[folder]タグを使ってください。

10 meses depois
Misaki desafixou a discussão.

Spine 4.2からはエディター上でPSDファイルのインポート処理を行うことができるようになりましたので、PhotoshopToSpineスクリプトを利用する方法を解説したこのスレッドのピン留めを解除しました。
(ただ現在もSpine 4.1以前のバージョンを利用しているという方にはまだ参考にできる内容になっています。)