はじめに
2Dキャラクターそれぞれの部位に対応するボーンを配置することで、より自然なアニメーションを実現することができます。
本記事では、キャラクターのアニメーションを作成する前段階として、画像にボーンを入れて調整する方法について紹介します。
学べること
- ボーンの入れ方
- ボーンの調整の仕方
それでは、やってみましょう！
プロジェクトの準備
Unity Hub から2Dを選択して、新規作成します。
2Dには、今回必要となるunity 2d animation の他、2Dゲーム作成に役立つ様々なアセットが最初から入っているので、後から追加する手間が省けて便利です。
画像の準備
今回はこちらの記事で作成したキャラクターを動かします。画像のインポート方法についても書いているので、よかったらご覧ください。
今回使う画像は、動かしやすいように手、足、体それぞれが分かれています。
ボーンを入れよう
インポートした画像のインスペクターから、Open Sprite Editorをクリックします。
Sprite Editorを開いたら、左上からSkinning Editorに切り替えます。
左からCreate Boneを選択して、好きなところにクリックでボーンを入れていきます。右クリックで解除できます。
ボーンの名前付け
ボーンを作成したばかりだと、どのボーンかがわかりづらいので、名前を入れていきます。
Edit boneから１つ１つ名前を変更します。右上のVisibilityをクリックすると、各ボーンの名称や色の一覧が表示されるので、わかりやすいように名前を変更します。
こんな感じで名前をつけてみました。
ボーンと画像の関連付け
作成したボーンから画像を動かせるようにします。
Auto Geometryをクリックして、ボーンを何も選択していない状態で右下のGenerate For All Visibleをクリックすると、自動的に良い感じに動かせるように設定してくれます。
試しに手を動かすと、体も一緒に変形してしまいました。これを直すには、ボーンの影響範囲を調整する必要があります。
ボーンの影響を調整する
パーツが１つ１つ分れている画像の場合は、簡単にボーンの影響を画像ごとに設定できます。左側のBone Influenceをクリックし、右側のVisibilityのSpriteを選択します。
bodyという名称のスプライトを選択すると、右下には、bodyが影響を受けるボーンがリストアップされています。手足からの影響は受けたくないので、body以外を削除していきます。
これで腕だけが動くようになりました。
画像を滑らかに変形する調整方法
腕を曲げてみると、画像の変形がおかしくなっていることがわかります。画像を滑らかに変形するには、影響力を広げることも必要です。
左からWeight Slider を選択し、編集したいボーンを選択します。
右下のWeight Slider のモードをSmoothにし、Amountを増やしていくと滑らかに変形されるようになります。
ボーンの微調整
Weight Brushから、各頂点ごとに影響力を変えることも可能ですが、これは最小的な微調整で行いましょう。
おわりに
2Dキャラクター画像にボーンを入れて調整する方法の紹介でした。部位ごとに画像が分かれていると、調整するのが簡単ですが、分かれていなくても変形させたり、アニメーションを作ることは可能です。
さらにクオリティを上げたアニメーションを作ることができるアセットはこちらです。
