はじめに
2Dキャラクターそれぞれの部位に対応するボーンを配置することで、より自然なアニメーションを実現することができます。
本記事では、キャラクターのアニメーションを作成する前段階として、画像にボーンを入れて調整する方法について紹介します。
学べること
- ボーンの入れ方
- ボーンの調整の仕方
それでは、やってみましょう!
プロジェクトの準備
Unity Hub から2Dを選択して、新規作成します。
2Dには、今回必要となるunity 2d animation の他、2Dゲーム作成に役立つ様々なアセットが最初から入っているので、後から追加する手間が省けて便利です。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_598/https://umistudioblog.com/wp-content/uploads/2023/08/image-10-1024x598.png)
画像の準備
今回はこちらの記事で作成したキャラクターを動かします。画像のインポート方法についても書いているので、よかったらご覧ください。
今回使う画像は、動かしやすいように手、足、体それぞれが分かれています。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_548/https://umistudioblog.com/wp-content/uploads/2023/09/image-8-1024x548.png)
ボーンを入れよう
インポートした画像のインスペクターから、Open Sprite Editorをクリックします。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_496,h_474/https://umistudioblog.com/wp-content/uploads/2023/09/スクリーンショット-2023-09-04-22.24.53-1024x978.png)
Sprite Editorを開いたら、左上からSkinning Editorに切り替えます。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_602,h_486/https://umistudioblog.com/wp-content/uploads/2023/09/image-9-1024x827.jpg)
左からCreate Boneを選択して、好きなところにクリックでボーンを入れていきます。右クリックで解除できます。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_622/https://umistudioblog.com/wp-content/uploads/2023/09/image-11-1024x622.jpg)
ボーンの名前付け
ボーンを作成したばかりだと、どのボーンかがわかりづらいので、名前を入れていきます。
Edit boneから1つ1つ名前を変更します。右上のVisibilityをクリックすると、各ボーンの名称や色の一覧が表示されるので、わかりやすいように名前を変更します。
こんな感じで名前をつけてみました。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_388,h_409/https://umistudioblog.com/wp-content/uploads/2023/09/image-11.png)
ボーンと画像の関連付け
作成したボーンから画像を動かせるようにします。
Auto Geometryをクリックして、ボーンを何も選択していない状態で右下のGenerate For All Visibleをクリックすると、自動的に良い感じに動かせるように設定してくれます。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_599/https://umistudioblog.com/wp-content/uploads/2023/09/スクリーンショット-2023-09-06-8.19.04-1024x599.jpg)
試しに手を動かすと、体も一緒に変形してしまいました。これを直すには、ボーンの影響範囲を調整する必要があります。
ボーンの影響を調整する
パーツが1つ1つ分れている画像の場合は、簡単にボーンの影響を画像ごとに設定できます。左側のBone Influenceをクリックし、右側のVisibilityのSpriteを選択します。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_599/https://umistudioblog.com/wp-content/uploads/2023/09/image-13-1024x599.jpg)
bodyという名称のスプライトを選択すると、右下には、bodyが影響を受けるボーンがリストアップされています。手足からの影響は受けたくないので、body以外を削除していきます。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_399,h_272/https://umistudioblog.com/wp-content/uploads/2023/09/image-13.png)
これで腕だけが動くようになりました。
画像を滑らかに変形する調整方法
腕を曲げてみると、画像の変形がおかしくなっていることがわかります。画像を滑らかに変形するには、影響力を広げることも必要です。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_624/https://umistudioblog.com/wp-content/uploads/2023/09/image-14-1024x624.png)
左からWeight Slider を選択し、編集したいボーンを選択します。
右下のWeight Slider のモードをSmoothにし、Amountを増やしていくと滑らかに変形されるようになります。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_624/https://umistudioblog.com/wp-content/uploads/2023/09/スクリーンショット-2023-09-10-12.23.46-1024x624.png)
ボーンの微調整
Weight Brushから、各頂点ごとに影響力を変えることも可能ですが、これは最小的な微調整で行いましょう。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_205,h_211/https://umistudioblog.com/wp-content/uploads/2023/09/image-15.png)
おわりに
2Dキャラクター画像にボーンを入れて調整する方法の紹介でした。部位ごとに画像が分かれていると、調整するのが簡単ですが、分かれていなくても変形させたり、アニメーションを作ることは可能です。
さらにクオリティを上げたアニメーションを作ることができるアセットはこちらです。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_683/https://umistudioblog.com/wp-content/uploads/2023/09/2077815d-7bd9-47dc-a1fb-09e3f7ca7c28-1024x683.webp)