おもちゃラボ

Unityで遊びを作ってます

【Unity】Anima2Dでユニティちゃんがネギを振るアニメを作る

Anima2Dとは2Dのキャラクタでスケルタルアニメーション(ボーンアニメーション)を作るためのツールです。
Anima2Dを使うことで、ボーンに従ったアニメーションが作れるほか、メッシュを変形させたり、IK(Inverse Kinematic)を使うこともできます。


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

これまでSpineSpriterといったようなツールがありましたが、どちらも有償でした。Anima2DはUnityTechnologies社から無償で提供されるので、ぐっと敷居が下がりましたね〜!

今回はユニティちゃんがネギを振るアニメーションを作りながらAnima2Dの使い方を学んでいきましょう。

Anima2Dを使用するための下準備をする

Anima2Dでアニメーションさせるためのスプライトは、一つのスプライトにまとめて(スプライトパック)おく必要があります。ここでは次のようなスプライトを用意しました。

f:id:nn_hokuson:20170309191246p:plain

このスプライトをプロジェクトビューにドラッグ&ドロップし、インスペクタから「Sprite Mode」を「Multiple」にします。

f:id:nn_hokuson:20170309191903p:plain:w250

続いてSprite Editorのボタンを押し、Sprite Editorで「Slice」ボタンを押してスプライトを自動で分割し、Applyボタンを押してください。

f:id:nn_hokuson:20170309191907g:plain

プロジェクトビューに戻り、ユニティちゃんのスプライトを選択した状態で右クリックから「Create」→「Anima2D」→「SpriteMesh」を選択します。Sprite Meshオブジェクトが3つ作成されます。

f:id:nn_hokuson:20170309191927p:plain:w300

スプライトとボーンを組み立てる

いま作成したSpriteMeshをシーンビューにドラッグ&ドロップしていい感じに配置しましょう。
ヒエラルキービューで空のオブジェクトを作成し、その子要素としてSpriteMeshを配置しています。
それぞれのスプライト名はBody、Arm、Negiに変更しました。

f:id:nn_hokuson:20170309191934p:plain:w450

スプライトの重なり順はインスペクタの「Order in Layer」から変更します(後から出てくるボーンの設定からも変更できます)

次にボーンを作ります。ヒエラルキービューでunitychanを選択し、右クリックから「2D Object」→「Bone」を選択します。
unitychanオブジェクトの子要素として画面上にボーンが作成されます。
インスペクタでボーンの長さと位置を調節して、ユニティちゃんの体の上に配置します。

f:id:nn_hokuson:20170309194047p:plain:w450

続いて、いま作成したボーンの子要素となるように腕のボーンを作ります。ヒエラルキービューでいま作成したボーンを選択して右クリックし、ボーンを作ってください。作成したボーンは腕付近に移動します。

同様の手順で、腕のボーンの子要素としてネギのボーンを作成します。それぞれのボーンの名前はBodyBone、ArmBone、NegiBoneにしました。

f:id:nn_hokuson:20170309191948p:plain:w450

スプライトとボーンを関連付ける

今はボーンをスプライトの上に配置しただけなので、ボーンを動かしても当然スプライトは移動しません。ボーンとスプライトが連動して移動するように、関連付けを行いましょう。

f:id:nn_hokuson:20170309191955g:plain

Bodyのインスペクタから「Sprite Mesh Instance」→「Bones」→「+」を押してください。ボーンを設定する欄が出てくるので、ここにヒエラルキービューから「BodyBone」をドラッグ&ドロップしてください。

f:id:nn_hokuson:20170309192005g:plain

同様に、ArmとnegiのスプライトにもArmBoneとNegiBoneを設定します。

ボーンの重み付けをする

ボーンとスプライトの重み付けを行います。「Window」→「Anima2D」→「SpriteMesh Editor」を起動してください。

ヒエラルキービューでBodyを選択するとエディタにBodyとBodyBoneが表示されます。この状態でBindボタンを押して、Weight tool ウインドウからOverlayにチェックを入れてAutoボタンを押してください。

f:id:nn_hokuson:20170309192019g:plain

これで、BodyのスプライトとBodyBoneのボーンが関連付けられました。同様の手順で、ArmとArmBone、NegiとNegiBoneを関連付けましょう。
シーンビューでボーンを動かすとスプライトもそれにともなって動くようになりました。

f:id:nn_hokuson:20170309192034g:plain

ネギを振るのアニメーションを作ろう

最後にユニティちゃんがネギをふるアニメーションを作りましょう。

まずはユニティちゃんオブジェクトを選択した状態で、「Window」→「Animation」を選択します。Animationウインドウから「Create」ボタンを押して「swing@unitychan」という名前のファイルを作ります。

f:id:nn_hokuson:20170309192050p:plain

Enable Recordingボタンが有効(再生ボタンが赤色)になっていることを確認しましょう。
タイムラインのカーソルを0フレーム目に移動し、腕を少し下げた位置に移動してください。これで0フレーム目にキーが打たれます。

f:id:nn_hokuson:20170309192058g:plain

次にタイムラインを20フレーム目に移動し、ボーンを回転させて腕を振り上げます。

f:id:nn_hokuson:20170309192106g:plain

最後に0フレーム目のキーフレームをコピーして40フレーム目の位置にペーストします。これでネギを振る一連のアニメーションが完成しました。

f:id:nn_hokuson:20170309192121p:plain

できたアニメーションは次のようになります。

f:id:nn_hokuson:20170309192128g:plain

まとめ

今回はUnityが無料で配布しているAnima2Dの使い方を紹介しました。Anima2Dを使えば、簡単にスケルタルアニメーションが作れました。
Anima2Dには、ここでは紹介できなかった機能がまだまだたくさんあるので、また紹介したいと思います。

今回もテラシュールブログさんの記事を参考にさせていだきました〜m(_ _)m
tsubakit1.hateblo.jp

この作品はユニティちゃんライセンス条項の元に提供されています
© Unity Technologies Japan/UCL