【spine】PhotoshopToSpine

このスクリプト PhotoshopToSpine は、Photoshopでレイヤーを画像として書き出し、
Spineで同じ位置、同じレイヤー順で取り込むJSONを書き出すことができます。

spineの制作準備段階、時間短縮で必須となってくるので
是非参考にしてください！

同じ機能ようなもので｢Spine Layer ToPNG｣がありますので、
そっちは別の記事を参考にしてください！

ダウンロード場所(別サイトに飛びます)(英語)
https://github.com/EsotericSoftware/spine-scripts


◆◆実行方法◆◆
2通りあります

1. [PhotoshopToSpine.jsx]をPhotoshopのメニューバーもしくはツールバーにドラッグすると実行画面が開きます。
2. [PhotoshopToSpine.jsx][logo.png]をPhotoshopのフォルダーに入れるとPhotoshopの[ファイル]→[スクリプト]から実行画面が開きます｡

<例>
C:\Program Files\Adobe\Adobe Photoshop CC 2019\Presets\Scripts

 

実行画面ウィンドウ

OKを押すと､指定したフォルダにJSONが書き出されます｡
書き出したJSONをspineにドラッグすると読み込むことが出来ます｡

各種の機能説明は続きから!!(*^O^*)

◆◆各機能の説明◆◆

• Ignore hidden layers：非表示レイヤーを無視

• Ignore background layer：背景レイヤーを無視

• Trim whitespace：余白部分をトリム

• Write Spine JSON：JSONを書き出す

• Write template image：全て統合した画像(テンプレート)を置く

• Scale：指定の拡大率で書き出す（100％以下）

• Padding:指定のpx数で余白部分を作る

---Output Paths---

• Images:画像書き出し場所

• JSON:JSON書き出し場所

◆◆タグ◆◆
Photoshopのグループ名、レイヤー名に[タグ]つけることで
出力をカスタマイズすることができます。
（例：[bone]face、face[bone]）

Photoshopのグループ構成画像です｡
例として [bone]face としています｡

上記構成でグループ名の[bone]部分を変更し､PhotoshopToSpineで書き出したらspine上でどういう風に
カスタマイズされるのか見ていきたいと思います｡

• [bone]face
  
  

faceというボーンの中に、書き出された画像がスロット化されて配置されます。
ボーンの位置は画像の中心に配置されます。

• [slot]face
  
  

faceというスロットに画像が配置されます
腕や表情などの画像切り替え時に使用するといいと思います

• [skin]face
  
  

faceというスキンプレースホルダーに配置されます。
スキン機能については下記記事を見て下さい

• [merge]face
  

  

faceという単一に統合された画像が配置されます

• [folder]face
  

  

グループ内の階層がサブフォルダに出力されます。
フォルダ階層を深くできたり､ネストができます。

• [ignore]　このタグを付けたレイヤーは出力されません。