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

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

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

STEP.1

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.2

Spine用Photoshopスクリプトの格納

下記のPhotoshopのスクリプトフォルに「Spine」というフォルダを作成して先の2つのファイルをペーストします。
C:\Program Files\Adobe\Adobe Photoshop CC 2017\Presets\Scripts\Spine

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

「PhotoshopToSpine」の使い方

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

STEP.1

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

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

STEP.2

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

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

STEP.3

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

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

STEP.4

書き出し確認

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

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

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

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

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

GitHub

EsotericSoftware/spine-scriptsScripts to export from PhotoShop and other tools to Spine's JSON data format. - EsotericSoftware/spine-scripts

• 例：head[bone]

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

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

「PhotoshopToSpine」の日本化

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

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

GitHub

EsotericSoftware/spine-scriptsScripts to export from PhotoShop and other tools to Spine's JSON data format. - EsotericSoftware/spine-scripts

コードの変更箇所

計8箇所あります。

• 394行目
  " Ignore hidden layers"を" 非表示レイヤーを無視する"に

• 396行目
  " Ignore background layer"を" 背景レイヤーを無視する"に

• 398行目
  " Trim whitespace"を" 余白をトリミングする"に

• 404行目
  " Write Spine JSON"を" JSONを書き出す"に

• 394行目
  " Write template image"を" テンプレート画像書き出し"に

• 414行目
  "Scale:"を"指定倍率:"に

• 415行目
  "Padding:"を"余白:"に

• 445行目
  "Output Paths"を"出力先"に

以上です。

書き出しスクリプト「PhotoshopToSpine」の詳細と日本語化についてまとめ

以上です。
地味に素材の仕込み作業は時間がかかるので、スクリプトを使うことができるPhotoshopで機能を把握しておくとどこかの場面で役に立ちます。

あわせて読みたい

【Live2D】公式のPhotoshop書き出しスクリプトを便利にする方法公式スクリプトをさらにカスタマイズしてみました。【公式のPhotoshop書き出しスクリプトを便利にする方法】[追記] 公式の2019.4の高速化対応に合わせました。オリジナ...