【Spine】書き出しスクリプト「PhotoshopToSpine」の詳細解説と日本語化について

2021 4/24

2020年3月7日 2021年4月24日

本記事でSpineにインポートするための書き出しスクリプト「PhotoshopToSpine」の詳細と日本化についてを紹介します！

Spine用書き出しスクリプト「PhotoshopToSpine」のインストール

Spineでよく使う「PhotoshopToSpine」のインストール方法の解説です。

STEP

Spine用Photoshopスクリプトのコピー

SpineのインストールデータにPhotoshop用のスクリプトがあるので探します。

* Essential版 / Professional版
C:\Program Files (x86)\Spine\scripts\photoshop

* トライアル版
C:\Program Files (x86)\SpineTrial\scripts\photoshop

下記の2つのファイルをコピーします

logo.png（せっかくなのでロゴ付きで）
PhotoshopToSpine.jsx

※「LayersToPNG.jsx」というスクリプトもありますが、同じ機能で古いスクリプトになるのでこちらは使用しません。
ちなみに新しいスクリプト「PhotoshopToSpine.jsx」は｢タグ｣機能が追加されていて便利です

STEP

Spine用Photoshopスクリプトの格納

下記のPhotoshopのスクリプトフォルに「Spine」というフォルダを作成して先の2つのファイルをペーストします。

以上でPhotoshopでイラストを作成した際、Spine用に書き出すためのスクリプト「PhotoshopToSpine」の準備ができました。

↑目次へ戻る

「PhotoshopToSpine」の使い方

「PhotoshopToSpine」の使い方の解説です。

STEP

書き出し準備（原点位置指定）

Photoshopのルーラーの（0，0 ）地点が原点になるので、
ルーラーをドラックして、風鈴の根本を（0，0）にしましょう。

STEP

書き出しスクリプトの起動

Photoshopの上部メニューから
ファイル＞スクリプト＞PhotoshopToSpine

STEP

書き出しスクリプトのパネル

OKボタンを押しましょう！
※ 余白を削除すると原点位置がずれるので「Trim whitespace」にだけチェック
※「PhotoshopToSpine」のオプションについては下の方にまとめてます➡オプションの詳細へ

STEP

書き出し確認

PSDデータのあった場所にデータが書き出されます。

imagesフォルダ（中身はレイヤー毎にPNG画像で書き出される）
fuurin.json（画像のパスと画像の位置情報を記したjsonファイル）

↑目次へ戻る

「PhotoshopToSpine」のオプション設定について

Ignore hidden layers➡非表示レイヤーの書き出しを無視します
Write Spine JSON➡素材情報（パスやサイズ）を記したJSONファイルを出力します
Ignore background layer➡背景レイヤータイプを無視します
Write template iamge➡全体を統合したPNG画像を書き出します。下絵用
Trim whitespace➡余白を削除します。
Scale➡素材のサイズを変更します
Padding➡素材に余白をもたせます
Output Paths➡JSONと素材の書き出し場所を指定します

↑目次へ戻る

「PhotoshopToSpine」のタグ機能について

「PhotoshopToSpine」の便利なタグ機能について解説します。

GitHub

spine-scripts/photoshop at master · EsotericSoftware/spine-scripts Scripts to export from PhotoShop and other tools to Spine's JSON data format. – spine-scripts/photoshop at master · EsotericSoftware/spine-scripts

例：head[bone]

必要に応じてレイヤー名やフォルダ名の「頭」か「お尻」にタグ名（※すべて小文字で）をいれましょう。

[bone]➡同名の骨が親に生成される
[slot]➡同名のスロットが生成される。
[skin]➡スキンプレースホルダーに変換される
[merge]➡同名で素材が結合される
[folder]➡同名のフォルダ名のサブフォルダが生成される
[ignore]➡無視されて書き出しされません

補足
※[slot]複数同名のレイヤーにすると1つのスロットに集約されます。
※[skin]スキンプレースホルダーは「色変えキャラ」や「武器変え」などで使います。
※[folder]たとえばフォルダ名を「A」とした時に、出力後「A」というサブフォルダが作成され、その中にフォルダ内のレイヤー素材が格納されます。

↑目次へ戻る

「PhotoshopToSpine」の日本化

よく使う書き出しスクリプトは英語だとストレスだと思いますので、メニューを日本化しみます。

※スクリプトの配布はライセンス的に配布はNGなので、変更方法を書いておきます。
オリジナルのバックアップはとった上で、テキスト編集ソフトでコードの一部を日本語化してみてください。

GitHub

spine-scripts/PhotoshopToSpine.jsx at master · EsotericSoftware/spine-scripts Scripts to export from PhotoShop and other tools to Spine's JSON data format. – spine-scripts/PhotoshopToSpine.jsx at master · EsotericSoftware/spine-scripts

コードの変更箇所

計8箇所あります。

場所	内容
394行目	`" Ignore hidden layers"`を`" 非表示レイヤーを無視する"`に
394行目	`" Write template image"`を`" テンプレート画像書き出し"`に
396行目	`" Ignore background layer"`を`" 背景レイヤーを無視する"`に
398行目	`" Trim whitespace"`を`" 余白をトリミングする"`に
404行目	`" Write Spine JSON"`を`" JSONを書き出す"`に
414行目	`"Scale:"`を`"指定倍率:"`に
415行目	`"Padding:"`を`"余白:"`に
445行目	`"Output Paths"`を`"出力先"`に