【Unity】アニメーションのお勉強(Bone編)

長らく体重管理アプリに取り掛かっていて、
本題のゲーム作成の勉強が進まなかった、今日この頃なんですが…

体重管理アプリも一応?完成と言う事で、
本題のゲーム作りの勉強を再開して行こうと思います。

今、作ってみたいゲームがあって、
アクション系の横スクロールゲームを作りたいなと思っています。

有名どころなんかだとマリオでしょうか。

マリオみたいなものは、作れる気はしないのですが、
とりあえず動き物を作ってみたいなと思っています。

最近のアクション系は、モーション付きのキャラが普通になっていて、
昔のようにドット絵のキャラが動くだけとは違います。

そこで、キャラのモーションを付ける勉強をしてみようと思います。

以前、アニメーションを勉強した時は、
モーション毎のスプライトをパラパラ漫画のように
差し替える事で動きを付けていましたが、
モーションのスプライトが大量に必要になります。

絵が描けないケロには、無理な話なので諦めていたのですが、
Boneを設定すると動かす事ができるって事を知りまして、
勉強してみる事にしました。

まず、Boneとはなんぞや?って事なんですが、
単純に❞骨❞でっす。

スプライトに骨格を設定する事で動きを自由に付けられる
との事なんですが、

早速、導入して試して行こうと思います。

まずスプライトをインポートするのですが
アニメーションIK①.jpg
アンドロイドのpngを使おうと思います。

ただ、一枚絵だと細かな動きが作りにくいので、
アニメーションIK②.jpg
パーツ毎に分解した一枚絵を使います。

続いて、2DAnimationをインポートします。
ウィンドウ→パッケージマネージャーと開いて、
アニメーションIK⑬.jpg
2DAnimationの右下にあるインポートをクリックします。
バージョンが新しいUnityならすでにインポート済みになっている場合も…

準備ができたので、スプライトの設定をしていきます。
インポートしたpngを選択してInspectorから
アニメーションIK③.jpg
テクスチャタイプ 2DとUI
スプライトモード 複数
に設定して、SpriteEditorをクリックします。
アニメーションIK④.jpg
SpriteEditorが起動したらスライスします。

パーツ毎に四角く切り抜くので、パーツを離して絵にしておけば
自動スライスで、勝手にパーツ毎のサイズに切り分けてくれます。
スライス後は右上の適用するをお忘れなく。

さて、パーツの分割ができたので、
ここから本題の骨をセットして行きます。

SpriteEditorの左上に
アニメーションIK⑤.jpg
SpriteEditorタブがあるので開いて、SkinningEditorを開きます。
アニメーションIK⑥.jpg
何やらメニューが開きましたが、ここから骨を設定していきます。

骨は動かしたい部分に関節のようにセットしてい行きます。
分かり易い腕から設定して行きます。

メニューからCreateBoneをクリックして、骨をセットする腕をダブルクリックします。
アニメーションIK⑦.jpg
オレンジ色に縁取りされて選択されます。

骨は親骨から子骨へ繋げて設定して行きます。
例えば、肩を回す動作をしたのに手や腕が着いてこないと
ダメですよね。

なので、肩に親骨をセットして続けて腕・手と順に繋いでいきます。
アニメーションIK⑧.jpg
肩の中心あたりでクリックして肘まで骨を伸ばします。
肘辺りでクリックすると骨が作成されます。
これが親骨になります。

続けて、肘から手首まで、手首から指先までと骨を設定します。
設定し終わっても骨がカーソルについて出てくると思うので右クリックして終わります。
アニメーションIK⑨.jpg
設定し終わったら、こんな感じになってると思います。

腕に骨をセットしましたが、まだスプライトに定着してません。
このまま終わると骨を動かしても腕は動きません。

骨を定着させる為に
アニメーションIK⑩.jpg
AutoGeometryをクリックして右下に出てくるメニューのGenerateボタンをクリックします。

腕と骨周りにメッシュが整形されたと思います。
アニメーションIK⑪.jpg
これで骨にスプライトが連動するようになります。

試しに骨をドラッグして動かしてみて下さい。関節が動くようになってます。

注意点は、二つあります。
骨の始点にあるドットをドラッグすると骨が移動するのでスプライトが変形します。
骨を回転させると骨に連動したメッシュが変形するので、当然スプライトも変形します。

スプライトの変形を防ぎたいならGeometryの設定を変更すれば
マシになるみたいですが、設定については勉強不足で説明できないんですよ~
┐(´~`;)┌ かんべんシテネ

あと親骨と子骨は、離れていても関係します。
離れた部分に子骨を置いて、連動させたい場合は、一つ骨をセットします。
セットした骨をクリックして選択状態にしてから
離れた場所にセットすると
アニメーションIK⑫.jpg
黄色の線で繋がっているのが分かりますかね。
これで離れた子骨も連動させる事ができます。

ただ、スライスしたスプライトでは、
パーツ単位で骨をセットする必要があるので、このやり方はできません。
パーツ間の親子関係は、オブジェクトにしてからヒエラルキーで行います。

骨の設定で最後に
アニメーションIK⑲.jpg
胴体ですが腰と胸に骨を設定しました。
腰が親で胸が子になります。
胸は単体で角度を変えられますが腰を回すと胸も着いてくるように設定しています。

各パーツ毎に骨をセットし終わったらSpriteEditorを終了します。

続いて、アンドロイドのオブジェクトを作って行きます。
スライスしたスプライトの▷をクリックして、各パーツを開きます。
アニメーションIK⑭.jpg
各パーツをドラッグして直接シーンビューにドロップします。
全てのパーツをドロップしたら画面サイズに合わせてスケールで大きさを調整します。

ここから少し骨が折れる作業になっていきます。
まず、パーツがスプライト名のままだと分かりにくいので、
パーツ毎の名前にリネームします。
アニメーションIK⑮.jpg
このリネームをしておかないと後で苦労するので、やっておいて損はないと思います。

ここからSkinningEditorで設定した骨を呼び出します。
パーツを全て選択した状態で、
アニメーションIK⑯.jpg
タブからでもインスペクターからでもいいので、
2DAnimation→SpriteSkinコンポーネントを追加します。

アニメーションIK⑰.jpg
追加したSpriteSkinのCreateBoneをクリックすると
アニメーションIK⑱.jpg
SkinnigEditorで設定した骨が呼び出されたと思います。

ここからは、パーツの親子関係を設定して行きます。
体の根幹は胴体なので、ヒエラルキーの胴体の▷をクリックして開きます。
アニメーションIK⑳.jpg
胴体→Bone_1→Bone_2となっています。

SkinnigEditorで親子関係にした骨は、ヒエラルキー上ではこんな配置になります。
これも分かりにくいので、リネームします。
アニメーションIK㉑.jpg
骨の大親を腰にして、各パーツを子にしていきます。

まず頭と首をセットします。
すでに腰と胸は親子関係になっているので、首と頭は
胸→首→頭の順に親子関係にします。

首のヒエラルキーを開いてBone_首にリネームします。
アニメーションIK㉒.jpg
このBone_首に頭を入れます。

首と頭がセットできたらBone_胸に首を入れます。
アニメーションIK㉓.jpg
セットするこんな感じになります。

この状態でBone_胸を動かすと首・頭も連動して動くようになると思います。

この要領で
両腕は、Bone_胸の子にして、
両足は、Bone_腰の子にします。
アニメーションIK㉕.jpg
これで骨の配置は終了でっす。(;´・`)> ふぅ

最後にスプライトをシーンにアタッチした際、
腕が胴体の後ろになったりしている場合は、
アニメーションIK㉔.jpg
SpriteRendererのレイヤーを変えると対応できます。

今回は、右腕・右足→0、胴体・首・頭→1、左腕・左足→2に設定しています。

これで骨の準備ができたので、試しに骨をドラッグで操作してみて下さい。
親骨を動かすと子のオブジェクトも着いてくるようになったと思います。

さて、ここから今回の最大の難所アニメーション化でっす。
結構、骨が折れます。
細かい作業が嫌いな方は、ヽ(`⌒´)ノ ウッキー
となるかも…

まずヒエラルキーの胴体をクリックして、ウィンドウ→アニメーションを開きます。
ファイル名は好きなのでOKでっす。
アニメーションが準備できたらレコーディングします。
アニメーションIK㉖.jpg
タイムライン上にkeyを設定していきます。

今回は、歩行アニメーションもどきなので、
レコーディングボタンを押したら、0:00秒の態勢を作ります。
この時、骨をドラッグして動かすと楽にkeyが設定できます。

あとは、好きなフレームにグリッドを合わせて、
骨操作で態勢を作れば、keyが追加されていきます。

開始と終了時の骨の角度がずれるとカクカクした動きになるので、
その辺りを調整すればOKかと思います。

アニメーションのkey設定が、最初は面倒ですが、慣れれば意外と簡単になります。
なかなか細かく調整しだすとヽ(`⌒´)ノ ウッキー
となりますが、綺麗なモーションを作るならチャレンジする価値は多いにあると思います。

最後に注意点ですが、Boneを直接動かさずにkeyを設定する場合は、
プロパティに必要なBoneを追加しておかないと動きません。
ま、直接Bone操作で設定すれば問題もないと思います。


Boneが使えるようになると、モーション用のスプライトを用意しなくても
いろいろなモーションが作れるようになるので、ケロも含めて絵が描けない人には
大いに助かるのではないかと…

アクション系のゲームを作る方の参考になれば幸いかと思います。
Boneについては以上となります。

次回は、Boneを利用したIKを記事にできればと考えています。
それでは今回はこのへんで(^^)/~~デハデハ

この記事へのコメント