はじめに
このエントリーは プロ生ちゃん Advent Calendar 2015 の第23日目の記事です。
全く意識はしてなかったけど、去年も23日目に書いてたんだなぁ(´∀｀)
1年なんてあっという間ですね。。。
ということで、去年からあまり成長していないので今年もSpineの記事を投稿します。
今回したいこと
普段Spineを使う際は小さなドット絵を関節等のパーツごとに分割したものを使う事が多いのですが、
今回はイラストを使用し、関節部分は分割せずにMesh機能で動かしていきたいと思います。
これを活用すればLive2Dみたいなぬるぬるアニメーションも実現できるはずです(＾ω＾)＜ﾒｲﾋﾞｰ
ちなみに去年ドット絵を分割したものがこちら。
今回使用するイラストを分割したものがこちら。
去年と違って、腕や脚の関節部分は分割していないのがわかると思います。
(´∀｀)oO(...プロ生ちゃんサンタコス可愛すぎてほんま辛抱たまらんワ...ッ！！)
※当初は全身をふわふわ浮いてる感じに動かしていこうと思ってたのですが、
※時間が無いので右脚を動かすだけの記事にさせてもらいます(；´Д｀)
Spineで画像読込み～ボーン設定
まずはSpineで分割した画像を読み込んで重ね合わせ、ボーンを作成していきます。
↓↓ここまで対応した画像がこちら↓↓
ちょっと見づらいですが、右側のTreeウインドウでのボーンと画像の設定箇所について、
太もも用のボーン(bone_RightLeg1)には右脚の画像(201412_santa_RightLeg)を設定していますが、
その後の関節部分であるスネ用(bone_RightLeg2)と足用(bone_RightLeg3)には画像は設定していません。
(´・ω・｀)oO(…bone_RightLeg2の配下に実はbone_RightLeg3があります。見えない人は心眼で見て下さい。)
画像にMeshを設定する
次にMeshを設定していきます。
今回動かしたいのは右脚なので、対応する画像(201412_santa_RightLeg)を選択してから、
ウインドウの下の方に表示されるMeshのチェックボタンをオンにしてEditボタンを押下します。
そうすると選択していた画像のみ表示されるようになりますので…
「New」ボタンを押下して、画像をなぞるようにポイントを設定していきます。
作成したら「Modify」ボタンを押下すると綺麗に(？)なりますｗ
対応するボーンを設定する
次にMeshを設定した画像に対応するボーンを設定していきます。
「Spineで画像読込み～ボーン設定」の部分で作っておいたように、今回使用する右脚用のボーンは3本です。
Weightウインドウを開き、Bindボタンを押下した後に対応するボーンを選択していきます。
～以上で設定は完了となります。
実際にアニメーションさせてみる
SpineのモードをANIMATIONに設定し、先ほど設定した脚のボーンを動かしてみると・・・
うまいこと自動的に画像が補正されて脚を伸ばした状態にする事ができました！！(ﾟ∀ﾟ)ぴゆいーぴゆいー♪
今回は脚を動かしているだけだけど、Mesh機能を使えばあんなところやこんなところを
ふわっふわのぷるんぷるんに揺らす事だってできるんだ！無限大！！！！！！
おまけ
脚を伸ばした画像を拡大すると下記のように関節部分がカクつく場合があります。
この場合は、ウインドウ左下(Dopesheetの上らへん)にあるWeightボタンを押下し、
どのボーンの動きにどのポイントがどの程度影響されるか、を設定する事ができますので、
こちらを使用して補正する事ができます。
この円グラフみたいな部分をそれぞれクリックし、Weight値を変更してなめらかに調整していきます。
調整後はこんな感じ。
おわりに
今年も去年と変わらず期限ぎりぎりになってばたばたと書いていますが。。。
いずれ触ってみたいと思っていたMesh機能を使う事ができたので、よかったかなと思います。
最後まで読んで頂き有難う御座いました！！
プロ生ちゃん可愛いよー！(・´з`・) pic.twitter.com/zjQdK51eKJ
— まぼろしのおに (@Mavoroshi_Oni) 2015, 12月 21