Unity - 2D Animation:イラストにボーンをいれてアニメーションをつくる
Index
前提知識
レイヤーに分けられた画像を Unity に取り込むには、2D PSD Importer が必要になります。本記事では、レイヤーに分けられた画像にボーンを入れます。レイヤーに分けられた画像を Unity 内に取り込む方法が分からない場合は下の記事をご覧ください。
レイヤーごとに分けられた画像が取り込めると、下の画像にようになります。

2D Animation のインストール
Window > Package Manager から 2D Animation を選び、インストールをクリックします。
Unity で Project を新規作成する際に「2D」テンプレートを選択すると、はじめからインストールされているはずです。

画像にボーンを入れて、アニメーションを作る
手順
次の手順でアニメーションを作っていきます。
- 画像に Bone(ボーン)を入れる
- Geometry の設定をする
- Weights の設定をする
- アニメーションを作る
画像に Bone(ボーン)を入れる
Sprite Editor からボーンを入れることができます。
ボーンを入れたい画像を選択し、Sprite Editor をクリックします。

Skinning Editor を開きます。


Bone(ボーン)の設定をしていきます。

| 機能 | 説明 |
|---|---|
| Preview Pose | ボーンを動かしたり、回転させたりしたときのポーズを確認できる |
| Edit Bone | 作成済みのBoneを調節 |
| Create Bone | 新規Bone作成 |
| Split Bone | Boneを2つに分ける |
設定が終わったら、Apply をクリックすることで、設定を適応することができます。また、Revert をクリックすることで設定を元に戻すことができます。

Geometry の設定をする
Geometry とは、直訳では「形状、形」を意味します。画像をレイヤーごとに三角形分割してメッシュを作ります。

※Weights を与えるまでは画像のようにカラフルではなく、透明です。
| 機能 | 説明 |
|---|---|
| Auto Geometry | 自動生成 |
| Edit Geometry | Geometryの編集 |
| Create Vertex | 頂点の作成 |
| Create Edge | 線の作成 |
| Split Edge | 線の分割 |
基本的には、最初に Auto Geometry を使い、他の4つの機能を使って微調整をしていきます。頂点ごとに Bone(ボーン) への Weight(重み)を設定できるので、頂点が多いほど細かい動きを設定できます。
Auto Geometry 選択時に次のようなメニューが表示されます。Geometry をどのように自動生成するか、調整できます。

| 機能 | 説明 |
|---|---|
| Outline Detail | アウトラインの精度 値が大きいほど輪郭に沿ったアウトラインになる |
| Alpha Tolerance | α値の閾値 この数値よりα値の小さいピクセルは透明と判断される |
| Subdivide | 数値が大きいほど分割数が多くなる |
| Weights | Bone に設定される Weight |
| Generate For Selected/Generate For All Visible | 生成 |
Weights の設定をする
Bone を動かしたとき、どの程度 Geometry に影響を与えるかを Weight(重み)という形で設定します。

| 機能 | 説明 |
|---|---|
| Auto Weights | 自動設定 |
| Weight slider | スライダーを使って Weight を調整 |
| weight Brush | ブラシを使って Weight を調整 |
| Bone Influence | スプライトに影響を与えるボーンを選択 |
| Sprite Influence | ボーンによって影響を受けるスプライトを選択 ※ver7.0以降 |
Auto Geometry 選択時に次のようなメニューが表示されます。どのように Weight を自動設定するか、調整できます。

| 機能 | 説明 |
|---|---|
| Associate Bones | チェックを入れるとスプライトに重なった Bone が自動的に関連付けられる |
| Generate/Generate All | 選択されたスプライトの Weight を生成 なにも選択していない場合はすべてのスプライトについて Weight を生成 |
| Normalize | 選択したスプライトの Weight を正規化 なにも選択していない場合はすべてのスプライトについて正規化 |
| Clear | 選択したスプライトの Weight をクリアする なにも選択していない場合はすべてのスプライトについて Weight をクリアする |
Weight Slider や Weight Blush を使って頂点ごとに Weight やモードを選択することができます。


Weight のモードは3種類あります。
| Mode | 説明 |
|---|---|
| Add And Subtract | すべてのスライダーが選択したボーンの周りのすべての頂点に影響を与える |
| Grow And Shrink | すべてのスライダーが選択したボーンによって既に影響を受けている頂点のみに影響を与える |
| Smooth | すべての頂点の重みを隣接する頂点と平均して、すべての頂点に均一な重みを与える |
Bone Influence を選択した状態でスプライトを選ぶと、そのスプライトに影響を与えるボーンが確認できます。

Bone を選択した状態で + を押すと追加、- を押すと削除することができます。
Visibility ツール
Skinning Editor には Visibility ツールがついています。Visibility ボタンをクリックすることで開くことができます。

各レイヤーごとにスプライトの表示・非表示を選択したり、ボーンの表示・非表示を選択したりできます。
アニメーションを作る
ボーンを入れ、Weight の設定をしたらアニメーションを作っていきます。
先ほどのスプライトを Hierarchy にドラッグ&ドロップし、生成します。Scene ビューで Gizmos をオンにして確認すると、ボーンが入っていることが分かります。

Window > Animation > Animation からアニメーションウィンドウを開きます。Hierarchy にあるスプライトを選択した状態で Create New Clip をクリックします。

あとはアニメーションウィンドウの赤丸ボタンを押し、どのキーフレームのときにどのポーズをとってほしいか設定していきます。


ボーンはシーンビューからツールバーを使って設定できます。Inspector の Transform の値を直接変更することも可能です。

最後に
- 次の手順でアニメーションを作る
- 画像に Bone(ボーン)を入れる
- Geometry の設定をする
- Weights の設定をする
- アニメーションを作る
- 公式ドキュメントにバージョンごとに詳細な説明があります