ムーぶろ

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

【spine】長尺イージングについて

spineは長尺でイージングのあるアニメは苦手なようで
きれいに再現できず急に加速したり止まったりしてしまいます。

参考動画①↓

https://moblogimage.tumblr.com/post/185677239518/httpofficemovehatenablogcom

とくに最初と最後のゆっくり部分に違和感が残ります。

このようなイージングを使用しました
◆イージング①

f:id:officemove:20190618142426p:plain


◆タイムライン①
f:id:officemove:20190618142334p:plain



中間地点にキーを置くと、その現象が少なくなりますので
下記のようにキーをある程度の間隔で置きます。


参考動画②↓

https://moblogimage.tumblr.com/post/185677239518/httpofficemovehatenablogcom


◆タイムラインを切ったもの②

f:id:officemove:20190618142821p:plain

 


タイムラインそのままのもの(上)
タイムラインを切ったもの(下)
を合わせた動画です。
https://moblogimage.tumblr.com/post/185835405811

長尺でアニメさせてイージングの再現ができていない場合、
中間地点にキーを置いてください!

【spine】PhotoshopToSpine項目日本語化


英語が破滅的にだめなので
[PhotoshopToSpine]の設定項目を勝手に日本語化しました。

 


単純に書き出しまでは確認済みです。
やるのは&やったあとは自己責任です!

f:id:officemove:20190528184728p:plain


[PhotoshopToSpine.jsx]をテキストエディタで開き、
英語部分を検索して日本語に置換するだけです。

ワードは上の過去ブログを参照してください!




【spine】テクスチャアトラス節約の画像分割について

ゲーム開発などでアニメを作る際、クオリティのほかに
画質を下げずに容量を小さく抑えるか
ということも重要になってくると思います。

なるべく画質がよく、容量が軽くすむ
画像分割の仕方について書きたいと思います

今回は髪の毛を例えにしてみたいと思います!

f:id:officemove:20190612184059p:plain

↓↓↓↓↓↓
今はこういう風に3個に分割されています

f:id:officemove:20190612184117p:plain


spineで書き出す際、テクスチャアトラス(複数の画像を1つの画像にまとめたもの)が書き出されますが
髪の毛部分など何も考えずに作るとアトラスにデッドスペースが生まれて、他のパーツがまとめきれなくなり
容量が大きく、画質が低いという事が生まれてしまいます

f:id:officemove:20190612184014p:plain

※アトラスを書き出したもの。(サイズ:2048×512)

なるべくこのデッドスペースが無いように、なおかつアニメに影響がないような
分割の仕方を考えなければなりません…!

考えました。
↓↓↓↓↓↓↓↓

f:id:officemove:20190612184730p:plain
髪の毛やスカートなど、付け根の部分はあまり稼働しないので
付け根をまとめて切って、よく動く先端部分のみ分割しました。

f:id:officemove:20190612184938p:plain

※アトラスを書き出したもの。(サイズ:1024×512)

サイズが小さくなり、デッドスペースが少なくなりました!

f:id:officemove:20190612185141g:plain

試しに揺らしてみましたが
ある程度の動きにも耐えられそうです。

【spine】過去作品手直し②

下記記事の続きになります!

太もも部分のメッシュが気になったので修正です!
f:id:officemove:20190528204426j:plain

 
before

f:id:officemove:20190528204848j:plain

↓↓↓↓↓↓↓

after

f:id:officemove:20190528204857j:plain



①の胴体部分ほど不便さは感じないのですが
膝部分のメッシュの少なさが気になったので増やしました。
太ももは布で隠れるので、もっとシンプルでもよいかもしれないです!

膝のメッシュを増やした理由

関節部分のメッシュが少ないと
ゆがんでしまいます。

◆メッシュ1個

f:id:officemove:20190528201602g:plain


◆メッシュ3個
f:id:officemove:20190528201615g:plain

 曲がる稼働部分はポイント多めに取っておきます。

【spine】過去作品手直し①

初めてspineで制作したアニメーションを久々に見返したところ
メッシュや変形アニメーションで改善できる部分が見つかったので
過去の自分の作品から、どう改善した方がよいか?
という事を記事にしていきたいと思います。

初期作品(2016年11月)▽▽▽
 まずは、素材の分解から胴体部分

f:id:officemove:20190528153108j:plain


奥の着物と胴体が合体しています。

f:id:officemove:20190528153300j:plain

メッシュの伸び縮みで頑張ったらカバーできる範囲ではありますが
こういうのは結局手間と気力がかかるので、おとなしく分解した方がよいと思います。
素材を分解した後、メッシュに謎のスペースが入っているので打ち直します。


◆1個にまとまっていた素材を分解

f:id:officemove:20190528153527p:plain f:id:officemove:20190528153542p:plain

胴(首)奥着物手前着物
の3個に別けました。

------------------------------------------------------------------------
分解した素材

f:id:officemove:20190528154040p:plainf:id:officemove:20190528154053p:plainf:id:officemove:20190528154047p:plain

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






◆メッシュ

余計なスペースが入っていたり無駄が多かったので
胴のメッシュを打ち直しました

f:id:officemove:20190528153831j:plain

絵のポリゴンを想像して打つのがこつだと思いますが
陰とかあるので、そういう縁に沿ったりいろいろ試していけばよい気がします。
首の陰とか、くっきりした陰とかは沿ったらいい感じになります。

メッシュアニメしたときに立体に見えればいいので
3DCGではないので、きれいな3角形にこだわったり難しく厳密に考え過ぎる必要は無いです。

過去記事も参考になれば!

 




f:id:officemove:20190528154727j:plain

着物奥と手前も打ちます。


また過去の作品でbeforeafter部分が見つかったら記事描きます。

【spine】メッシュ編集ウィンドウ機能紹介

spineのメッシュ変更に新しい項目ができたので、
それについて書きたいと思います!(ver 3.7)

f:id:officemove:20190521213858j:plain

新しく追加された項目は「三角形」「減光」「分離」の3個です。

◆三角形
内部のエッジをみやすくするために、三角形の線を非表示、表示します。

f:id:officemove:20190521215321j:plain f:id:officemove:20190521215333j:plain

丸いものなど立体感のあるメッシュを打ちたいときに使用するとやりやすい気がします。

◆減光
メッシュを見やすくするために、画像を暗くします。

 f:id:officemove:20190521215801j:plain f:id:officemove:20190521215321j:plain



◆分離
すべてのアタッチメントを非表示にします

f:id:officemove:20190521215801j:plain f:id:officemove:20190521220021j:plain

今メッシュを打ちたいオブジェクト以外を非表示にします。
入り組んでいる場合見やすくなります。
[Tab]キーを押しても同じような使い方はできますが、メッシュ移動していない状態を見たいのか、した状態を見たいのかで使い分けができます。



 

 

【Animate】 Animateを使用したmp4書き出し<効果編>

下記ブログの追記で、Adobe Animate CC の効果が
Adobe Aftereffectでも適応されるのかを確認しました。

Animateピンクの●に[スクリーン]効果を付けたもの
SWF書き出しは、このように表示されました。

f:id:officemove:20190322183404p:plain


Aftereffectでflaファイルを読み込みました。
効果は反映されず。

f:id:officemove:20190322183421p:plain

 


効果を全て試しましたが、
消去とアルファ以外は正しく表示されませんでした。

●SWF

f:id:officemove:20190322203233p:plain


●aftereffect

f:id:officemove:20190322203453p:plain