ムーぶろ

株式会社オフィスムーブの雑記ブログです。2D アニメーション ソフト[spine]挑戦中。随時ご質問等、お気軽にください(^O^)

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

 

f:id:officemove:20190129185240p:plain

実行画面ウィンドウ

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

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

 


◆◆各機能の説明◆◆

  • Ignore hidden layers:非表示レイヤーを無視
  • Ignore background layer:背景レイヤーを無視
  • Trim whitespace:余白部分をトリム
  • Write Spine JSONJSONを書き出す
  • Write template image:全て統合した画像(テンプレート)を置く
  • Scale:指定の拡大率で書き出す(100%以下)
  • Padding:指定のpx数で余白部分を作る


---Output Paths---

  • Images:画像書き出し場所

 


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

f:id:officemove:20190129190521p:plain

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

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

  • [bone]face

    f:id:officemove:20190129190900p:plain

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


  • [slot]face

    f:id:officemove:20190129191100p:plain

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


  • [skin]face

    f:id:officemove:20190129191217p:plain

 

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

 



  • [merge]face

    f:id:officemove:20190129191405p:plain

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



  • [folder]face

    f:id:officemove:20190129191531p:plain

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


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