Photoshopからspineへ書き出すスクリプト「Spine Layer ToPNG」
「Spine Layer ToPNG」というスクリプトがあります。
このスクリプトを使えば、いちいちSpine上で素材を読み込んで、ガイドを置き、位置を合わせる…といった工程が無くなり便利です。
2019.1.29 追記。
書き出すだけなら「Spine Layer ToPNG」もできますが
「PhotoshopToSpine」の方が新しく、
「タグ」という機能があるのでこちらをおすすめします。
使い方は下の記事で紹介しています。
◆◆「Spine Layer ToPNG」の使い方
インストール済みのSpineフォルダ内に入っています。
C:\Program Files (x86)\Spine\scripts\photoshop
このスクリプトを、インストール済みのPhotoshopのフォルダ内に入れます。
C:\Program Files\Adobe\Adobe Photoshop CC 2017\Presets\Scripts
すると、Photoshopの以下の場所から実行することができます。
以下のようなウィンドウが出てきます!
---------以下スクリプトの文言説明です---------------
Write layers as PNGs
レイヤーをPNG形式で書き込む
→チェック入れなかったら画像自体書き出されませんでした。
基本入れます。
Write a template PNG
テンプレートPNGを書く
→統合されたガイドとなるPNGが書き出されました。
このスクリプトで書き出したらほぼ必要ないかも。
Write Spine JSON
JSON書き出す
→入れないと書き出されません
Ignore hidden layers
隠れたレイヤーを無視する
→非表示のレイヤーは書き出されません
Use groups as skins
グループをスキンとして使用する
→PSDでグループ化したものを、書き出す際フォルダー分けしてくれます
Use ruler origin as 0.0
ルーラーの起点を0.0として使用する
→PSDの座標を起点としてJSON書き出しします。
足元に合わせたい、などの場合はルーラーをいじってください。
PNG scale
→拡大縮小です。
Padding
→画像の左右上下に、何px隙間を入れるか設定ができます。
Images:
→[./images/]これだったらPSDの同階層に[image]フォルダ作って置いてくれます
JSON:
→Imageと同じく
------------------------------------------------------------------
[OK]を押すと、Imagesで指定した場所に
画像とJSONファイルを書き出してくれます。
以降はSpineでの作業になります!
続きは以下の記事で
spine エフェクト2
下記記事で、spineでエフェクトを作った物を軽く紹介しましたが
このアニメで剣から出ているエフェクトも
メッシュを使用しているので紹介したいと思います!
spineはマスク機能が使えないので
ジャバラのようにメッシュ機能を使っています。
spine エフェクト
炎エフェクト実験中です。
この2枚使用しました
spine スプライトシート
今まで記事に使用したキャラクターの
スプライトシート一覧です。
忍者
カッパ
妖精
SD女の子
spine ディフォルメキャラアニメ攻撃
いつもは1枚絵にモーションを付けていましたが
今回は2枚使い、絵を切り替えて攻撃モーションを作りました
ゲームで使用する前提で制作したので
ボタンを押したとき瞬時に攻撃できるよう
予備動作は短めです。
歩く、走る編
待機編
spine ディフォルメキャラアニメ走る、歩く
以下記事では待機アニメを制作しましたが、
今回は走り、歩きといったアクティブなモーションを付けました。
歩く、走る
上半身のひねりなどは、メッシュで調整しています。