マイケル
みなさんこんばんは！
マイケルです！
マイケルです！
エレキベア
クマ〜〜〜〜
マイケル
今日はAnima 2Dの使い方について紹介するよ！
エレキベア
Anima 2Dって何クマ？
マイケル
Anima 2Dは、２Dのボーンアニメーションを作成できるUnityパッケージだよ！
たとえばこの間作ったゲームのボスキャラを動かす時にも使ってたんだ！
たとえばこの間作ったゲームのボスキャラを動かす時にも使ってたんだ！
↑Anima 2Dを用いたアニメーション
エレキベア
意外とぬるぬるな動きクマね
マイケル
なめらかな動きもできるし、
3Dモデルでボーンアニメーションを作ったことがある人なら
イメージもつけやすいしすぐに習得できるよ！
3Dモデルでボーンアニメーションを作ったことがある人なら
イメージもつけやすいしすぐに習得できるよ！
エレキベア
そういえば前作ってたクマね
【Blender】エレキベアの３Dモデルを作ってみた！ 〜テクスチャ・アニメーション編〜
マイケル
今回は
・キャラクター素材の準備
・ボーンアニメーション作成
の順で解説していくよ！
・キャラクター素材の準備
・ボーンアニメーション作成
の順で解説していくよ！
エレキベア
クマ〜〜〜〜〜〜
キャラクター素材の準備
マイケル
今回動かしていくキャラはこちら！
＼にぎりめし君／
エレキベア
（小学生が書いたようなキャラクマ・・・）
マイケル
今回はこの「にぎりめし君」を以下のように、
手足などの動かしたい部位ごとに分けて画像を書き出します！
手足などの動かしたい部位ごとに分けて画像を書き出します！
↑レイヤー名をファイル名にして「右クリック -> PNGとしてクイック書き出し」で書き出せる
マイケル
部位ごとの画像の他に、全体の画像も用意しておくと
のちのちパーツを組み合わせるのが楽になります！
のちのちパーツを組み合わせるのが楽になります！
マイケル
そして次にこのバラバラの画像を、
Unityで扱いやすくするためAtlas画像(※１）という形式に
変換します！
Unityで扱いやすくするためAtlas画像(※１）という形式に
変換します！
※１ Atlas画像・・・複数の画像を１つの画像にまとめたもの。
エレキベア
アトラスオオカブトみたいクマね
マイケル
こちらを作成するには、
無料で使える「Texture Packer」というWEBツールが便利です！
無料で使える「Texture Packer」というWEBツールが便利です！
マイケル
使い方は簡単で、下記のように
画像をドラッグして間隔や配置を指定してあげるだけで、
いい感じに並べてくれます！
画像をドラッグして間隔や配置を指定してあげるだけで、
いい感じに並べてくれます！
マイケル
これでキャラクター素材の準備は完了です！
エレキベア
簡単だったクマ〜〜〜〜
ボーンアニメーション作成
マイケル
画像の準備ができたら、次はUnity側での作業となります！
Anima 2Dのインポート
マイケル
まずは、UnityにAnima 2Dをインストールしましょう。
Asset Storeで検索して、インポートします！
Asset Storeで検索して、インポートします！
マイケル
Examplesはサンプルなので必要ない場合は外しましょう！
エレキベア
ワクワククマね
Unityでの読み込み
マイケル
続いて、先ほど作ったAtlas画像(と全体の画像)をUnityにインポートします！
マイケル
Atlas画像については、複数画像で構成されているため
SpriteModeを「Multiple」に変更しておきましょう！
SpriteModeを「Multiple」に変更しておきましょう！
Atlas画像をSliceする
マイケル
設定が終わったら、Atlas画像を各パーツに分割します。
インスペクターから「Sprite Editor」を開いて、
Sliceタブより「Slice」ボタンを押下しましょう！
インスペクターから「Sprite Editor」を開いて、
Sliceタブより「Slice」ボタンを押下しましょう！
マイケル
すると下記のように各パーツが短形で囲まれて分割されます。
もし細かく分割されすぎて、1つにまとめたい場合には
短形を１つ「Cmd + Delete」で削除して、二つ分の範囲にまとめましょう！
もし細かく分割されすぎて、1つにまとめたい場合には
短形を１つ「Cmd + Delete」で削除して、二つ分の範囲にまとめましょう！
マイケル
分割したら、各パーツの名前を分かりやすいようにそれぞれ付けましょう！
エレキベア
目だったらEYE、足だったらFOOTみたいな感じクマね
マイケル
各パーツに名前をつけたらProjectウィンドウにもどって、
Atlas画像を右クリックして、「Create -> Anima 2D -> SpriteMesh」を押下します。
すると、同じフォルダ階層に各パーツ画像が出力されるので、フォルダを作ってまとめておきましょう！
Atlas画像を右クリックして、「Create -> Anima 2D -> SpriteMesh」を押下します。
すると、同じフォルダ階層に各パーツ画像が出力されるので、フォルダを作ってまとめておきましょう！
SpriteMeshを配置する
マイケル
次に、分割したパーツをScene上に配置していきます。
Scene上にGameObjectを作成して、更にその配下にMesh用のGameObjectと
後ほど追加するBone用のGameObjectを作成します！
Scene上にGameObjectを作成して、更にその配下にMesh用のGameObjectと
後ほど追加するBone用のGameObjectを作成します！
マイケル
作成したら、Mesh用のObjectの中に切り出したSpriteMeshを配置していきます！
この時下書き画像を敷いておくと合わせやすいです。
この時下書き画像を敷いておくと合わせやすいです。
マイケル
配置して重ね順も調整したら、下書き画像は削除して完了です！
エレキベア
にぎりめし君が組み上がったクマね
Boneの作成
マイケル
画像の配置まで完了したので、次は動かすためのボーンを作成していきます！
先ほど作ったBoneオブジェクトの中に、体の中心となるGameObjectを一つ作成して、Spriteの中心になるよう調整します。
先ほど作ったBoneオブジェクトの中に、体の中心となるGameObjectを一つ作成して、Spriteの中心になるよう調整します。
マイケル
そして作った中心のObjectを右クリックして
「2DObject -> Bone」よりボーンを作成します。
「2DObject -> Bone」よりボーンを作成します。
マイケル
Lengthや位置をオブジェクトに合わせて調整した後、名前をつけます。
色が見えにくい場合はColor項目で変更しましょう！
色が見えにくい場合はColor項目で変更しましょう！
エレキベア
Lengthで長さが変わるクマね
マイケル
続けて、作成したBoneの下に新たにBoneを作成します。
作成直後は親のBoneと繋がっている状態ですが、
Child項目の設定をNoneにしてあげることで自由に動かすことができるようになります!
作成直後は親のBoneと繋がっている状態ですが、
Child項目の設定をNoneにしてあげることで自由に動かすことができるようになります!
マイケル
同様の手順で、全体のBoneを作成しましょう！
マイケル
これでBoneの作成は完了です！
エレキベア
にぎりめし君の骨格が出来上がったクマね
BoneとSpriteの紐付け
マイケル
次に、作成したBoneとSpriteの紐付けを行なっていきます！
マイケル
SpriteMeshを選択して、下記のように
InspectorのBonesに動きを紐づけたいBoneを登録します！
InspectorのBonesに動きを紐づけたいBoneを登録します！
マイケル
各SpriteMeshに対してBoneを設定したら、
SpriteMeshを選択した状態で「Window -> Anima 2D -> SpriteMesh Editor」で
SpriteMesh Editorを開きます！
SpriteMeshを選択した状態で「Window -> Anima 2D -> SpriteMesh Editor」で
SpriteMesh Editorを開きます！
マイケル
ここから、MeshのSliceや、バインドの設定をします！
左上のSliceボタンを押下して、適当な値を入力してApplyボタンを押下しましょう！
左上のSliceボタンを押下して、適当な値を入力してApplyボタンを押下しましょう！
マイケル
すると、上記のように自動でMeshをスライスしてくれます！
これでBoneを動かした時により細かくMeshが変形するようになります！
これでBoneを動かした時により細かくMeshが変形するようになります！
マイケル
スライスしたら、次は左上のBindボタンを押下します。
すると下記画像のように、Boneに色がついてSpriteMeshと紐づいた状態になります！
すると下記画像のように、Boneに色がついてSpriteMeshと紐づいた状態になります！
マイケル
Overlayにチェックを入れるとカラーで割り当てられている範囲が表示されます。
その後はWeight toolのメーターを調整して、割り当てる範囲を調整しましょう！
その後はWeight toolのメーターを調整して、割り当てる範囲を調整しましょう！
マイケル
ここまでのSliceとバインドの手順を各SpriteMeshにも同様に設定すると、
Boneに追従してSpriteMeshも動くようになっているはずです！！
Boneに追従してSpriteMeshも動くようになっているはずです！！
エレキベア
自由に動かせてたのしいクマ〜〜〜〜
マイケル
ここまで作成したら、デフォルトのポーズを保存しておきましょう！
Projectより右クリック「Create -> Anima 2D -> Pose」でPoseファイルを作成します。
Projectより右クリック「Create -> Anima 2D -> Pose」でPoseファイルを作成します。
マイケル
作成したらキャラクターのオブジェクトに「Pose Manager」コンポーネントを追加して、PosesにPoseファイルを指定します。
「Save」ボタンを押すと保存完了です！
「Save」ボタンを押すと保存完了です！
マイケル
これで、Loadボタンでいつでも元のポーズに戻すことができるようになりました！
Animationの作成
マイケル
ここまでできたらあとは好きなように動かしてアニメーションを作成するのみ！
「Window -> Animation -> Animation」で、Animationウィンドウを開きましょう！
「Window -> Animation -> Animation」で、Animationウィンドウを開きましょう！
マイケル
CreateボタンでAnimationファイルを作成したら、
通常のアニメーション作成と同様、キーを登録していきましょう！
通常のアニメーション作成と同様、キーを登録していきましょう！
マイケル
このように自在に動かすことができました！
マイケル
ちなみに、下記のように目のSpriteMeshに対して複数のSpriteMeshを割り当てて、
切り替えることもできます！
切り替えることもできます！
マイケル
これでまばたきも再現できるようになりました！
エレキベア
生きてるみたいクマ〜〜〜〜
マイケル
ここまででアニメーション作成の説明は以上です！
エレキベア
おつかれクマ〜〜〜〜
おわりに
マイケル
というわけで今回は
Anima 2Dを使ったボーンアニメーションの作成でした！
Anima 2Dを使ったボーンアニメーションの作成でした！
マイケル
どうだったかな？
エレキベア
キャラクターを動かせて楽しかったクマ〜〜〜
マイケル
絵に書いたキャラクターが動くなんて、感動ものだよね！
エレキベア
自分で作ったキャラも動かしてみたいクマ〜〜〜！！
マイケル
エレキベアならきっとできるよ！
いろんなの作って動かしてみようね！
いろんなの作って動かしてみようね！
エレキベア
がんばるクマ〜〜〜〜！！
マイケル
それでは今日はこの辺で！
アディオス！！
アディオス！！
【Unity】Anima 2Dを使ってボーンアニメーションを作成する【にぎりめし君】 〜完〜
