itemstore BLOG

アプリ内課金(IAP)の実装・運用にかかる時間を大幅に削減してアプリの収益性を高めるサービス「itemstore(アイテムストア)」が、アプリ内課金に関する様々な話題や企画をお届けする公式ブログです。

夏の自由研究!無料のUnityアセット・Anima2Dでアイちゃんを動かす!

 

こんにちは。

今回は itemstore 公式キャラクターのアイちゃんに協力してもらい、 Anima2D によるアニメーション制作を紹介します。

 

f:id:cayto_pr:20180806122303p:plain

 

「絵を描くのも苦手なのに、アニメーションなんて無理!」という人にもおすすめです。

 

Anima2Dとは?

f:id:cayto_pr:20180806122300p:plain

引用:https://www.assetstore.unity3d.com/jp/#!/content/79840

 

Anima2D は Unity 5.5 から無料で使えるようになったアニメーション制作のアセットです。

 

背骨や腕などのボーンを画像に関連付けることで、ボーンの動きにあわせて画像を動かしたり、変形することができます。

 

パーツ画像を作る

それでは早速アニメーションを作っていきましょう。

始めに、アニメーションを作りやすくするために、動かす領域ごとに画像を分解します。

今回は、頭をふりながら手を振るということで、頭部分とそれ以外の部分に分けます。

 

f:id:cayto_pr:20180806122257p:plain

 

アイちゃんの生首と首のない体の画像を作るのは、夏向きの少しホラーな作業でした。。。

 

より本格的に動かす場合は、さらにばらばらにしないといけませんが、いきいきと動かすためと割り切って気にせず分解しましょう。

※アイちゃんごめんなさい。

 

パーツ画像をプロジェクトに追加する

作ったパーツ画像を Unity のプロジェクトに加えます。

パーツ画像は  Anima2D のスプライトメッシュという形に変換してシーンに配置します。

 

f:id:cayto_pr:20180806122221p:plain

 

配置したら、それにあわせてボーンを配置します。

 

f:id:cayto_pr:20180806122219p:plain

 

ボーンは、全ての骨格を作る必要はなく、例えば頭を動かしたいだけならば、頭にボーンを1本配置するだけでもOKです。

 

f:id:cayto_pr:20180806122215p:plain

 

アイちゃんの頭を動かす

まずは一番簡単な頭を左右に振るアニメーションを作ってみましょう。

 

配置したボーンを直接動かすと画像も連動して動いてくれます。

このボーンの時間ごとの位置や角度などをフレーム単位で複数記録したものがアニメーションになります。

 

f:id:cayto_pr:20180806122156g:plain

 

Unity ではアニメーションウィンドウの録画ボタンを押すことで、ボーンの位置や角度などを簡単に記録できます。

 

f:id:cayto_pr:20180806122153p:plain

 

これを複数のフレームで行い、アニメーションを作っていきます。

アニメーションは再生ボタンを押すことで確認できます。

 

アイちゃんの右腕を動かす

次に、右腕を横に振るアニメーションを加えます。

頭は1個の大きなボーンを使いましたが、右腕はひじを曲げるため上腕と前腕の2つのボーンをつなげて使います。

 

f:id:cayto_pr:20180806122117p:plain

 

Anima2D の IK という部品をボーンに追加するとシーン上に丸いアイコンができ、それを移動させるだけで、2つのボーンが腕っぽく動いてくれます。

 

f:id:cayto_pr:20180806122102g:plain

 

あとは、さきほどのようにアニメーションウィンドウの録画ボタンを押して、 IK の位置をフレームごとに記録するだけです。

 

アイちゃんのモフモフツインテを揺らす

最後に髪を揺らすアニメーションを加えます。

 

髪は頭を動かすと揺れるように、頭のボーンの先にスプリングボーンを追加します。

 

f:id:cayto_pr:20180806122059p:plain

 

スプリングボーンは周囲のボーンの動きに連動して自動的に揺れる面白いボーンです。

 

f:id:cayto_pr:20180806122043g:plain

 

比較のため、左側にだけスプリングボーンをいれてみました。

そうすると、頭の動きに連動して左側の髪だけが揺れるようになりました。

 

しかし、今回はスプリングボーンを紹介するために髪を揺らしただけなので、あまり調整しておらず、揺れ方が不自然でいびつです。

 

みなさんが作る際は、ボーンを増やしたり、スプライトメッシュやスプリングボーンをさらに調整することで、自然できれいな髪や衣服の揺れを実現できるでしょう。

 

手を振るアイちゃんの完成!

右側の髪にも同じようにスプリングボーンを加えて完成です。

Unity で実行すると、アイちゃんが髪を揺らしながら、可愛く手を振ってくれました!

夏の自由研究、大成功!

 

f:id:cayto_pr:20180806122022g:plain

 

今回のアニメーション制作の詳細は Qiita で補足していますのでぜひご覧ください。

 

qiita.com

 

 

item-store.net

 

文:さくらくらうど(@SakuraCrowd)

個人でゲームを開発しています。アプリ内課金については初心者ですが、itemstoreを利用することで簡単に課金ゲームアプリが作れることを、実際の開発を通して伝えられたら良いなと思っています。

Blog : http://sakuracrowd.blogspot.jp/

Twitter : https://twitter.com/SakuraCrowd