【Unity】Anima 2Dを使ってボーンアニメーションを作成する【にぎりめし君】

マイケル

みなさんこんばんは！
マイケルです！

エレキベア

クマ〜〜〜〜

マイケル

今日はAnima 2Dの使い方について紹介するよ！

エレキベア

Anima 2Dって何クマ？

マイケル

Anima 2Dは、２Dのボーンアニメーションを作成できるUnityパッケージだよ！
たとえばこの間作ったゲームのボスキャラを動かす時にも使ってたんだ！

【Unity】初の自作アプリ「ゴーゴーゴロヤン」を振り返る

↑Anima 2Dを用いたアニメーション

エレキベア

意外とぬるぬるな動きクマね

マイケル

なめらかな動きもできるし、
3Dモデルでボーンアニメーションを作ったことがある人なら
イメージもつけやすいしすぐに習得できるよ！

エレキベア

そういえば前作ってたクマね

【Blender】エレキベアの３Dモデルを作ってみた！ 〜テクスチャ・アニメーション編〜

マイケル

今回は

・キャラクター素材の準備
・ボーンアニメーション作成

の順で解説していくよ！

エレキベア

クマ〜〜〜〜〜〜

キャラクター素材の準備

マイケル

今回動かしていくキャラはこちら！

エレキベア

（小学生が書いたようなキャラクマ・・・）

マイケル

今回はこの「にぎりめし君」を以下のように、
手足などの動かしたい部位ごとに分けて画像を書き出します！

↑レイヤー名をファイル名にして「右クリック -> PNGとしてクイック書き出し」で書き出せる

マイケル

部位ごとの画像の他に、全体の画像も用意しておくと
のちのちパーツを組み合わせるのが楽になります！

マイケル

そして次にこのバラバラの画像を、
Unityで扱いやすくするためAtlas画像(※１）という形式に
変換します！

※１ Atlas画像・・・複数の画像を１つの画像にまとめたもの。

エレキベア

アトラスオオカブトみたいクマね

マイケル

こちらを作成するには、
無料で使える「Texture Packer」というWEBツールが便利です！

Texture Packer Online

マイケル

使い方は簡単で、下記のように
画像をドラッグして間隔や配置を指定してあげるだけで、
いい感じに並べてくれます！

マイケル

これでキャラクター素材の準備は完了です！

エレキベア

簡単だったクマ〜〜〜〜

ボーンアニメーション作成

マイケル

画像の準備ができたら、次はUnity側での作業となります！

Anima 2Dのインポート

マイケル

まずは、UnityにAnima 2Dをインストールしましょう。
Asset Storeで検索して、インポートします！

マイケル

Examplesはサンプルなので必要ない場合は外しましょう！

エレキベア

ワクワククマね

Unityでの読み込み

マイケル

続いて、先ほど作ったAtlas画像(と全体の画像)をUnityにインポートします！

マイケル

Atlas画像については、複数画像で構成されているため
SpriteModeを「Multiple」に変更しておきましょう！

Atlas画像をSliceする

マイケル

設定が終わったら、Atlas画像を各パーツに分割します。
インスペクターから「Sprite Editor」を開いて、
Sliceタブより「Slice」ボタンを押下しましょう！

マイケル

すると下記のように各パーツが短形で囲まれて分割されます。
もし細かく分割されすぎて、1つにまとめたい場合には
短形を１つ「Cmd + Delete」で削除して、二つ分の範囲にまとめましょう！

マイケル

分割したら、各パーツの名前を分かりやすいようにそれぞれ付けましょう！

エレキベア

目だったらEYE、足だったらFOOTみたいな感じクマね

マイケル

各パーツに名前をつけたらProjectウィンドウにもどって、
Atlas画像を右クリックして、「Create -> Anima 2D -> SpriteMesh」を押下します。
すると、同じフォルダ階層に各パーツ画像が出力されるので、フォルダを作ってまとめておきましょう！

SpriteMeshを配置する

マイケル

次に、分割したパーツをScene上に配置していきます。
Scene上にGameObjectを作成して、更にその配下にMesh用のGameObjectと
後ほど追加するBone用のGameObjectを作成します！

マイケル

作成したら、Mesh用のObjectの中に切り出したSpriteMeshを配置していきます！
この時下書き画像を敷いておくと合わせやすいです。

マイケル

配置して重ね順も調整したら、下書き画像は削除して完了です！

エレキベア

にぎりめし君が組み上がったクマね

Boneの作成

マイケル

画像の配置まで完了したので、次は動かすためのボーンを作成していきます！
先ほど作ったBoneオブジェクトの中に、体の中心となるGameObjectを一つ作成して、Spriteの中心になるよう調整します。

マイケル

そして作った中心のObjectを右クリックして
「2DObject -> Bone」よりボーンを作成します。

マイケル

Lengthや位置をオブジェクトに合わせて調整した後、名前をつけます。
色が見えにくい場合はColor項目で変更しましょう！

エレキベア

Lengthで長さが変わるクマね

マイケル

続けて、作成したBoneの下に新たにBoneを作成します。
作成直後は親のBoneと繋がっている状態ですが、
Child項目の設定をNoneにしてあげることで自由に動かすことができるようになります!

マイケル

同様の手順で、全体のBoneを作成しましょう！

マイケル

これでBoneの作成は完了です！

エレキベア

にぎりめし君の骨格が出来上がったクマね

BoneとSpriteの紐付け

マイケル

次に、作成したBoneとSpriteの紐付けを行なっていきます！

マイケル

SpriteMeshを選択して、下記のように
InspectorのBonesに動きを紐づけたいBoneを登録します！

マイケル

各SpriteMeshに対してBoneを設定したら、
SpriteMeshを選択した状態で「Window -> Anima 2D -> SpriteMesh Editor」で
SpriteMesh Editorを開きます！

マイケル

ここから、MeshのSliceや、バインドの設定をします！
左上のSliceボタンを押下して、適当な値を入力してApplyボタンを押下しましょう！

マイケル

すると、上記のように自動でMeshをスライスしてくれます！
これでBoneを動かした時により細かくMeshが変形するようになります！

マイケル

スライスしたら、次は左上のBindボタンを押下します。
すると下記画像のように、Boneに色がついてSpriteMeshと紐づいた状態になります！

マイケル

Overlayにチェックを入れるとカラーで割り当てられている範囲が表示されます。
その後はWeight toolのメーターを調整して、割り当てる範囲を調整しましょう！

マイケル

ここまでのSliceとバインドの手順を各SpriteMeshにも同様に設定すると、
Boneに追従してSpriteMeshも動くようになっているはずです！！

エレキベア

自由に動かせてたのしいクマ〜〜〜〜

マイケル

ここまで作成したら、デフォルトのポーズを保存しておきましょう！
Projectより右クリック「Create -> Anima 2D -> Pose」でPoseファイルを作成します。

マイケル

作成したらキャラクターのオブジェクトに「Pose Manager」コンポーネントを追加して、PosesにPoseファイルを指定します。
「Save」ボタンを押すと保存完了です！

マイケル

これで、Loadボタンでいつでも元のポーズに戻すことができるようになりました！

Animationの作成

マイケル

ここまでできたらあとは好きなように動かしてアニメーションを作成するのみ！
「Window -> Animation -> Animation」で、Animationウィンドウを開きましょう！

マイケル

CreateボタンでAnimationファイルを作成したら、
通常のアニメーション作成と同様、キーを登録していきましょう！

マイケル

このように自在に動かすことができました！

マイケル

ちなみに、下記のように目のSpriteMeshに対して複数のSpriteMeshを割り当てて、
切り替えることもできます！

マイケル

これでまばたきも再現できるようになりました！

エレキベア

生きてるみたいクマ〜〜〜〜

マイケル

ここまででアニメーション作成の説明は以上です！

エレキベア

おつかれクマ〜〜〜〜

おわりに

マイケル

というわけで今回は
Anima 2Dを使ったボーンアニメーションの作成でした！

マイケル

どうだったかな？

エレキベア

キャラクターを動かせて楽しかったクマ〜〜〜

マイケル

絵に書いたキャラクターが動くなんて、感動ものだよね！

エレキベア

自分で作ったキャラも動かしてみたいクマ〜〜〜！！

マイケル

エレキベアならきっとできるよ！
いろんなの作って動かしてみようね！

エレキベア

がんばるクマ〜〜〜〜！！

マイケル

それでは今日はこの辺で！
アディオス！！

【Unity】Anima 2Dを使ってボーンアニメーションを作成する【にぎりめし君】　〜完〜