CG・映像デザイナー技術ブログ

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

eyecatch-spine-photoshop-to-spine

assistant すいみん

こちらのCGメソッドの記事では書き出しスクリプト「PhotoshopToSpine」の詳細と日本化についてを紹介します!
この記事の著者
CGブロガー すいみん

CGブロガー

すいみん

Suimin

プロフィール

某美大の油絵科を卒業後、大手CG映像プロダクションに入社。
その後ゲーム業界に転職。
現在は技術系のCGデザイナーをしています。 書籍:Unity デザイナーズ・バイブル
プロフィール詳細はこちら

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

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

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

* Essential版 / Professional版
C:Program Files (x86)Spinescriptsphotoshop

* トライアル版
C:Program Files (x86)Spine Trialscriptsphotoshop

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

  • logo.png(せっかくなのでロゴ付きで)
  • PhotoshopToSpine.jsx
※「LayersToPNG.jsx」というスクリプトもありますが、同じ機能で古いスクリプトになるのでこちらは使用しません。
ちなみに新しいスクリプト「PhotoshopToSpine.jsx」は「タグ」機能が追加されていて便利です
STEP.2
Spine用Photoshopスクリプトの格納
下記のPhotoshopのスクリプトフォルに「Spine」というフォルダを作成して先の2つのファイルをペーストします。
C:Program FilesAdobeAdobe Photoshop CC バージョンPresetsScriptsSpine

以上で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」のオプション設定について


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

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

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

参考 公式ヘルプ
  • 例:head[bone]

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

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

「PhotoshopToSpine」の日本化

PhotoshopToSpine

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

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

参考 PhotoshopToSpineのコードGitHub

コードの変更箇所

計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で機能を把握しておくとどこかの場面で役に立ちます。

assistant すいみん

ある程度レイヤーを統合した状態から整理して書き出したい時はLive2Dでよく使う下記のスクリプトを紹介しておきます。Spine作業でも便利です。
【Live2D】公式のPhotoshop書き出しスクリプトを便利にする方法

以上、すいみん(@cg_method)でした!