そうだ！いらすとやを動かそう！！

こんにちは。にしやまです。
突然ですが、皆さんは「いらすとや」をご存知でしょうか？
某大型家電量販店の店内ポスターに使用されていたり、SNSで拡散されたり、目にする機会が多いのでご存知の方も多いかと思います。
可愛いイラストのフリー素材サイトなんですが、中には「こんなのいつ使うんだろう」っていうようなネタ画像もあって見てまわるだけでも面白いです。

ある日のことです。
いつものように「いらすとや」を巡回していたぼくはふと思いました。

この愛すべきゆるキャラ(？)たちがイキイキと動いているところを見てみたい！それも超ヌルヌルに！！…と。

というわけで、今回はSpineを使って「いらすとや」をヌルヌルと動かしていきます！
※Spineについては前回の記事「Spineを使って２Dキャラクターを３Dのように動かす」を参照ください。

まずは素材選び

これがなくては始まりません。
いらすとやをボケーっと眺めて隅々まで閲覧し今回のテーマに相応しいイラストを探します。

選定のポイント

1. ループのGIFアニメーションとして動かせそうなもの
2. spineの機能を程よく使用できそうなもの
3. 動かしたら面白そうなもの！

そして上記の選定ポイントを踏まえた上で選び出した素材がこちらです！

いかがでしょうか。
ループアニメーションになるために生まれてきたとしか思えないこのイラスト！とくに車輪とかクルクル回したくなりますね！

パーツ分け

それでは早速作業開始です。
Photoshopを使って、稼働しそうな部位をちまちま切り分けていきます。
静止画の状態では重なって見えなくても動けば見えそうな箇所は都度描きたして補っていきます。

結果、分けられたパーツがこちら。

セッティング

１.各パーツにボーンを配置

ここからはSpine上での作業になります。
骨の構造を考えつつボーンを配置します。

２.メッシュ設定

１つのパーツを２つ以上のボーンで制御したい場合はメッシュを設定しておきます。パーツをメッシュ化おくことで、パーツの一部分のみ変形させるなどの複雑な変形をさせることが可能になります。

３.ウェイト付け

メッシュ化したパーツは複数のボーンにより制御することができるようになります。パーツの中のどの箇所が各ボーンにどれくらい影響を受けるか割り当てておきます。

今回のこだわりセッティング

ここまでのセッティングでも割とそれっぽく動いてくれます。しかし、今回は「本気でアニメーションさせてみた」がテーマ！もう一歩踏み込んで設定を作りこんでいきます！！

手足の制御

IKコンストレイントという機能を使用すると、腕や足といった２つのボーンで構成される関節部分の制御を１つのボーンでより簡単によりそれっぽく動かせるようなります。
今回はこちらの機能を使って手足の制御を行います。
※SpineのIKコンストレイントで一括制御できるボーンは２つまでです。

顔の制御

トランフォームコンストレイントという機能を使用すると、１つのボーンに追従して複数のボーンを同時制御することができるようになります。
設定次第では単純に追従させるだけでなく、逆方向へ動くような制御も可能なため、この機能を応用するとより幅広い表現が可能になります。
今回はこちらの機能を使い、頭の角度に合わせて目や口がいい感じに追従するように設定していきます。

ついに完成！

動かしたい全ての部位に各設定を施し終わったら、いよいよアニメーション作成です。
各ボーンをちまちま動かしていきます。

ちまちま。
ちまちま。
ちまちま。
ちまちま。

そして完成したものがコチラ！！

なにこれ超イキイキ

元のイラストの良さもあって、なんとも言えない病みつきな世界観に仕上がったんじゃないでしょうか！止まっている状態でも十分シュールな画像ですが、ループアニメーションになることでよりシュールさが増したように感じます。
Spineの機能にも程よく触れることができますし、もし好評でしたら是非シリーズ化していきたいです！

というわけで、今回はここまで！
最後まで読んでいただきありがとうございました！！

この顔がまた笑

さいごに

Nagisaでは一緒に働ける仲間を募集しています。
「Nagisa、ちょっと気になるかも…」なんて思ってくださったあなた！
オフィスに遊びに来てみませんか！？
一同歓迎いたします！！