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

Unity
マイケル
マイケル
みなさんこんばんは!
マイケルです!
エレキベア
エレキベア
クマ〜〜〜〜
マイケル
マイケル
今日はAnima 2Dの使い方について紹介するよ!
エレキベア
エレキベア
Anima 2Dって何クマ?
マイケル
マイケル
Anima 2Dは、2Dのボーンアニメーションを作成できるUnityパッケージだよ!
たとえばこの間作ったゲームのボスキャラを動かす時にも使ってたんだ!


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

バナキング
↑Anima 2Dを用いたアニメーション
エレキベア
エレキベア
意外とぬるぬるな動きクマね
マイケル
マイケル
なめらかな動きもできるし、
3Dモデルでボーンアニメーションを作ったことがある人なら
イメージもつけやすいしすぐに習得できるよ!
エレキベア
エレキベア
そういえば前作ってたクマね


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

マイケル
マイケル
今回は

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

の順で解説していくよ!
エレキベア
エレキベア
クマ〜〜〜〜〜〜

スポンサーリンク

キャラクター素材の準備

マイケル
マイケル
今回動かしていくキャラはこちら!
\にぎりめし君/
にぎりめし君
エレキベア
エレキベア
(小学生が書いたようなキャラクマ・・・)
マイケル
マイケル
今回はこの「にぎりめし君」を以下のように、
手足などの動かしたい部位ごとに分けて画像を書き出します!
Screenshot 2020 07 15 1 00 08
Screenshot 2020 07 15 0 58 00
Screenshot 2020 07 15 0 58 20


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

Screenshot 2020 07 15 0 59 15
マイケル
マイケル
部位ごとの画像の他に、全体の画像も用意しておくと
のちのちパーツを組み合わせるのが楽になります!
マイケル
マイケル
そして次にこのバラバラの画像を、
Unityで扱いやすくするためAtlas画像(※1)という形式に
変換します!


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

エレキベア
エレキベア
アトラスオオカブトみたいクマね
マイケル
マイケル
こちらを作成するには、
無料で使える「Texture Packer」というWEBツールが便利です!
Screenshot 2020 07 15 1 19 32


Texture Packer Online

マイケル
マイケル
使い方は簡単で、下記のように
画像をドラッグして間隔や配置を指定してあげるだけで、
いい感じに並べてくれます!
Screenshot 2020 07 15 1 03 47
Atlas Nigirimeshi
マイケル
マイケル
これでキャラクター素材の準備は完了です!
エレキベア
エレキベア
簡単だったクマ〜〜〜〜

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

マイケル
マイケル
画像の準備ができたら、次はUnity側での作業となります!

Anima 2Dのインポート

マイケル
マイケル
まずは、UnityにAnima 2Dをインストールしましょう。
Asset Storeで検索して、インポートします!
Screenshot 2020 07 15 22 01 22
Screenshot 2020 07 15 22 01 56
マイケル
マイケル
Examplesはサンプルなので必要ない場合は外しましょう!
エレキベア
エレキベア
ワクワククマね

Unityでの読み込み

マイケル
マイケル
続いて、先ほど作ったAtlas画像(と全体の画像)をUnityにインポートします!
Screenshot 2020 07 15 22 17 05
マイケル
マイケル
Atlas画像については、複数画像で構成されているため
SpriteModeを「Multiple」に変更しておきましょう!
Screenshot 2020 07 15 22 25 44

Atlas画像をSliceする

マイケル
マイケル
設定が終わったら、Atlas画像を各パーツに分割します。
インスペクターから「Sprite Editor」を開いて、
Sliceタブより「Slice」ボタンを押下しましょう!
Screenshot 2020 07 15 22 59 25
マイケル
マイケル
すると下記のように各パーツが短形で囲まれて分割されます。
もし細かく分割されすぎて、1つにまとめたい場合には
短形を1つ「Cmd + Delete」で削除して、二つ分の範囲にまとめましょう!
Screenshot 2020 07 15 23 08 13
マイケル
マイケル
分割したら、各パーツの名前を分かりやすいようにそれぞれ付けましょう!
エレキベア
エレキベア
目だったらEYE、足だったらFOOTみたいな感じクマね
マイケル
マイケル
各パーツに名前をつけたらProjectウィンドウにもどって、
Atlas画像を右クリックして、「Create -> Anima 2D -> SpriteMesh」を押下します。
すると、同じフォルダ階層に各パーツ画像が出力されるので、フォルダを作ってまとめておきましょう!
Screenshot 2020 07 15 23 24 15

SpriteMeshを配置する

マイケル
マイケル
次に、分割したパーツをScene上に配置していきます。
Scene上にGameObjectを作成して、更にその配下にMesh用のGameObject
後ほど追加するBone用のGameObjectを作成します!
Screenshot 2020 07 15 23 32 37
マイケル
マイケル
作成したら、Mesh用のObjectの中に切り出したSpriteMeshを配置していきます!
この時下書き画像を敷いておくと合わせやすいです。
Screenshot 2020 07 15 23 35 45
マイケル
マイケル
配置して重ね順も調整したら、下書き画像は削除して完了です!
エレキベア
エレキベア
にぎりめし君が組み上がったクマね

Boneの作成

マイケル
マイケル
画像の配置まで完了したので、次は動かすためのボーンを作成していきます!
先ほど作ったBoneオブジェクトの中に、体の中心となるGameObjectを一つ作成して、Spriteの中心になるよう調整します。
Screenshot 2020 07 15 23 48 36
マイケル
マイケル
そして作った中心のObjectを右クリックして
「2DObject -> Bone」よりボーンを作成します。
Screenshot 2020 07 15 23 50 47
マイケル
マイケル
Lengthや位置をオブジェクトに合わせて調整した後、名前をつけます。
色が見えにくい場合はColor項目で変更しましょう!
エレキベア
エレキベア
Lengthで長さが変わるクマね
マイケル
マイケル
続けて、作成したBoneの下に新たにBoneを作成します。
作成直後は親のBoneと繋がっている状態ですが、
Child項目の設定をNoneにしてあげることで自由に動かすことができるようになります!
Screenshot 2020 07 16 0 03 02
マイケル
マイケル
同様の手順で、全体のBoneを作成しましょう!
Screenshot 2020 07 16 0 13 28
マイケル
マイケル
これでBoneの作成は完了です!
エレキベア
エレキベア
にぎりめし君の骨格が出来上がったクマね

BoneとSpriteの紐付け

マイケル
マイケル
次に、作成したBoneとSpriteの紐付けを行なっていきます!
マイケル
マイケル
SpriteMeshを選択して、下記のように
InspectorのBonesに動きを紐づけたいBoneを登録します!
Screenshot 2020 07 16 23 03 23
マイケル
マイケル
各SpriteMeshに対してBoneを設定したら、
SpriteMeshを選択した状態で「Window -> Anima 2D -> SpriteMesh Editor」
SpriteMesh Editorを開きます!
Screenshot 2020 07 16 23 13 19
マイケル
マイケル
ここから、MeshのSliceや、バインドの設定をします!
左上のSliceボタンを押下して、適当な値を入力してApplyボタンを押下しましょう!
Screenshot 2020 07 16 23 18 48
Screenshot 2020 07 16 23 18 55
マイケル
マイケル
すると、上記のように自動でMeshをスライスしてくれます!
これでBoneを動かした時により細かくMeshが変形するようになります!
マイケル
マイケル
スライスしたら、次は左上のBindボタンを押下します。
すると下記画像のように、Boneに色がついてSpriteMeshと紐づいた状態になります!
Screenshot 2020 07 16 23 23 34
マイケル
マイケル
Overlayにチェックを入れるとカラーで割り当てられている範囲が表示されます。
その後はWeight toolのメーターを調整して、割り当てる範囲を調整しましょう!
Screenshot 2020 07 16 23 24 11
マイケル
マイケル
ここまでのSliceとバインドの手順を各SpriteMeshにも同様に設定すると、
Boneに追従してSpriteMeshも動くようになっているはずです!!
エレキベア
エレキベア
自由に動かせてたのしいクマ〜〜〜〜
Screenshot 2020 07 16 23 36 24
マイケル
マイケル
ここまで作成したら、デフォルトのポーズを保存しておきましょう!
Projectより右クリック「Create -> Anima 2D -> Pose」でPoseファイルを作成します。
Screenshot 2020 07 16 23 45 51
マイケル
マイケル
作成したらキャラクターのオブジェクトに「Pose Manager」コンポーネントを追加して、PosesにPoseファイルを指定します。
「Save」ボタンを押すと保存完了です!
Screenshot 2020 07 16 23 46 41
マイケル
マイケル
これで、Loadボタンでいつでも元のポーズに戻すことができるようになりました!

Animationの作成

マイケル
マイケル
ここまでできたらあとは好きなように動かしてアニメーションを作成するのみ!
「Window -> Animation -> Animation」で、Animationウィンドウを開きましょう!
Screenshot 2020 07 16 23 55 46
マイケル
マイケル
CreateボタンでAnimationファイルを作成したら、
通常のアニメーション作成と同様、キーを登録していきましょう!
Screenshot 2020 07 17 0 07 19
にぎりめしアニメ1
マイケル
マイケル
このように自在に動かすことができました!
マイケル
マイケル
ちなみに、下記のように目のSpriteMeshに対して複数のSpriteMeshを割り当てて、
切り替えることもできます!
Screenshot 2020 07 17 0 18 01
にぎりめしアニメ2
マイケル
マイケル
これでまばたきも再現できるようになりました!
エレキベア
エレキベア
生きてるみたいクマ〜〜〜〜
マイケル
マイケル
ここまででアニメーション作成の説明は以上です!
エレキベア
エレキベア
おつかれクマ〜〜〜〜

おわりに

マイケル
マイケル
というわけで今回は
Anima 2Dを使ったボーンアニメーションの作成でした!
マイケル
マイケル
どうだったかな?
エレキベア
エレキベア
キャラクターを動かせて楽しかったクマ〜〜〜
マイケル
マイケル
絵に書いたキャラクターが動くなんて、感動ものだよね!
エレキベア
エレキベア
自分で作ったキャラも動かしてみたいクマ〜〜〜!!
マイケル
マイケル
エレキベアならきっとできるよ!
いろんなの作って動かしてみようね!
エレキベア
エレキベア
がんばるクマ〜〜〜〜!!
マイケル
マイケル
それでは今日はこの辺で!
アディオス!!

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

コメント