初めに
本記事では、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 を使い、他の４つの機能を使って微調整をしていきます。頂点ごとに 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 の設定をする
- アニメーションを作る
- 公式ドキュメントにバージョンごとに詳細な説明があります
