ムーぶろ

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

spine ゆれもののタイミングを簡単にずらす方法

揺れ物の簡単な作り方
紹介します。

即席サンプルで作ったハムスター。

Before

f:id:officemove:20180115184812g:plain

↓↓↓↓↓↓↓↓
After

f:id:officemove:20180115184815g:plain

揺れ方が自然に見える調整のしかたです。

------------------------------------------------------------------------------------------------

マフラーをとりあえず揺らします。

f:id:officemove:20180115184821p:plain

タイムラインを確認するとポイントがそろっているので重力感皆無です

しかし
オフセット適用して動かすと、下のようにポイントをずらすことができます

 

f:id:officemove:20180115184823g:plain

末端に行くほど、動きをずらす必要があるので
このようにずらしました

f:id:officemove:20180115184826p:plain

結果。
髪の毛でも犬の背骨でもなんでも使えるので必須です

f:id:officemove:20180115184815g:plain

spine 犬走る

下の記事で、歩いているアニメを制作したので
今回は走っているアニメを制作しました。

f:id:officemove:20180110150002g:plain

地面についている時間は最低限に、
ポイントとしては、背骨を波打つように調整するのがよいと思います。

背骨のみのタイムラインです。

f:id:officemove:20180110150004g:plain

f:id:officemove:20180110150022p:plain


しなるようなアニメにしたいので
髪の毛やひもなどと同じような原理で時間をずらします。

spine 犬歩行

犬(四足歩行)モーションです!

f:id:officemove:20171227154601g:plain


ボーンは、実際の犬に合わせて入れました。
作り方としては、四足歩行は前後でずれている歩き方なので
同時に動くモーションをつけ、そのあとずらせば作りやすいと思います。

f:id:officemove:20171227154604g:plain


下っ腹と、足の付け根が動くように
太ももの骨にウェイトが入って自然に見えるようにしました

f:id:officemove:20171227155948g:plain


ウェイトとは

 



Photoshopからspineへ書き出すスクリプト「Spine Layer ToPNG」2

上記の記事の続きです。

書き出したJSONファイルを
Spineのデータインポートで読み込みます。
※注意:Photoshopでレイヤー名に日本語名を入れていると読み込めません。

New Projectにチェックを入れなければ、
既存ファイルにスケルトンを追加して製作することができます。

f:id:officemove:20171206192818j:plain


すると、位置情報やレイヤー階層を考慮して自動的に配置してくれます。
面倒な下準備を済ませられるのでだいぶ重宝。

f:id:officemove:20171206193557j:plain

 

Photoshopからspineへ書き出すスクリプト「Spine Layer ToPNG」

Spine Layer ToPNG」というスクリプトがあります。
このスクリプトを使えば、いちいちSpine上で素材を読み込んで、ガイドを置き、位置を合わせる…といった工程が無くなり便利です。

インストール済みのSpineフォルダ内に入っています。
C:\Program Files (x86)\Spine\scripts\photoshop

このスクリプトを、インストール済みのPhotoshopのフォルダ内に入れます。
C:\Program Files\Adobe\Adobe Photoshop CC 2017\Presets\Scripts

すると、Photoshopの以下の場所から実行することができます。

f:id:officemove:20171205205203j:plain

以下のようなウィンドウが出てきます!


f:id:officemove:20170406145600j:plain

---------以下スクリプトの文言説明です---------------
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でエフェクトを作った物を軽く紹介しましたが

 

このアニメで剣から出ているエフェクトも
メッシュを使用しているので紹介したいと思います!

f:id:officemove:20171026162618g:plain

 
spineはマスク機能が使えないので
ジャバラのようにメッシュ機能を使っています。

f:id:officemove:20171201214816g:plain

 

 

 

 

 

spine エフェクト

炎エフェクト実験中です。

f:id:officemove:20171128203138g:plain f:id:officemove:20171128203400g:plain

 

この2枚使用しました

f:id:officemove:20171128203548p:plain f:id:officemove:20171128203559p:plain