2D Animation パッケージを使ったスプライトのリギング

1. 2D Animation パッケージを使ったスプライトのリギング

2019.4、2D Animation パッケージ 3.2.6 で検証しました

2Dスプライトを扱う際、開発者は、3D キャラクターモデリングでよく行われるリギングプロセスと同様に、リグのボーン構造をスプライトに埋め込むことで、キャラクターを「リギング」したいと思うことがあります。 リグを 2D アートワークに適用すると、2D スプライトキャラクターを、関連するボーン構造のピボットポイントの範囲に沿って動かしたり、変形させたりして、さらにアニメーションさせることができます。

2D Animation パッケージは、3D モデルをアニメーション用にリギングするように、スプライトをリギングすることができます。2D Animation パッケージについては、パッケージマネージャーからダウンロードする必要があります。Package Manager ウィンドウを開くには、上部のドロップダウンから、Window > Package Manager と選択します。

2D Animation パッケージを含むすべてのパッケージが表示されるようになりました (画像 01)。左列の 2D Animation を選択し、右下の Install を選択すると、2D Animation パッケージがインストールされます。

画像 01：Unity エンジンの Package Manager ウィンドウ

2. 2D キャラクターのスプライトのリギング

2D キャラクターのスプライトアセットのリギングを開始するには、すでにキャラクターが準備されており、プロジェクトの Assets フォルダに保存されている必要があります。このチュートリアルでは、「Plunkah」という名前の 2D キャラクターのスプライトを使用します。このスプライトは、Package Manager ウィンドウから 2D Animation Samples を選択してダウンロードするか (画像 02)、Unity Asset Store からダウンロードすることができます。

画像 02：インポート可能な 2D Animation Samples を表示する Package Manager ウィンドウ

3. Skinning エディターの概要

Skinning エディターは、キャラクターのリギングプロセスでスケルトンを作成するために使用します。 スケルトン、つまり「ボーン」（リグとも呼ばれます）は、スプライト自体に結合されます。スプライトのグラフィックスは「スキン」のようなもので、Skinning エディターの名前の由来となっています。Skinning エディターは、Sprite エディターのサブセットです。

Skinning エディターは、Bones（画像 03）、Geometry（画像 05）、Weights（画像 06）の 3 つのコントロール要素のグループで構成されています ー 以下で説明します。

画像 03：ボーンを制御するツール

Bones（ボーン）

Preview Pose：このツールを使うと、ボーンを動かしたり回転させたりして、リギングがポージングやアニメーションにどのように影響するかを確認することができます。ボーンの接続、切断、再配置を行うことができますが、これらの変更は永続的ではなく、プレビュー中のみ有効です。

Edit Joints： このツールで、ボーンの移動、再配置、切断、再接続を行います。

ジョイントを切り離さずにボーンを動かすには、ボーンのルートか先端をクリックしてドラッグします。

ジョイントを切断するには、ボーンが離れるまでクリックアンドドラッグします。ジョイントを再接続するには、そのルートをクリックして接続されていない他のボーンの先端までドラッグするか、その先端をクリックして接続されていない他のボーンのルートまでドラッグします。

Create Bone： このツールを使うと、ボーンを作成することができます。他のツールからこのツールに切り替えた場合、ボーンはデフォルトで、以前に選択されたボーンチェーンのルートの子となり、ヒエラルキーの中で新しいブランチを開始します。または、既存のボーンの先端をクリックして、それを新しいボーンの親にすることもできます。親のない新しいボーンを作りたい場合は、右クリックまたは ESC キーを押して、あらゆる接続を解除してください。左クリックでボーンのルートを配置し、もう一度クリックして先端を配置します。ボーンを作成すると、名前を付けたり、スプライトのボーン毎に設定できる表示順の優先順位を設定することができます (画像 04)。

画像 04：Depth のソートでは、スプライトのようにリグのパーツを重ねることができます。

Split Bone：このツールを使うと、既存のボーンを 2 つのより小さな均等なボーンに分割します。

画像 05：ジオメトリ制御

Geometry（ジオメトリ）

Auto Geometry：このツールを使うと、スプライトのメッシュの頂点が自動的に作成され、既存のボーンが頂点に割り当てられ、ボーンのウェイト (重み付け) 情報が生成されます。ボーンのウェイトは頂点ごとに設定され、ボーンが頂点に与える影響の度合いを決定します。頂点は、影響を受けているボーンに合わせて色付けされ、複数のボーンに影響を受けている頂点は、それぞれのボーンの色がブレンドされます。メッシュ頂点のテッセレーションは自動的に行われ、ボーンの数や位置ではなく、スプライトのジオメトリのアウトラインに基づいて行われます。

Edit Geometry：このツールを使うと、エッジや頂点の移動や削除が可能になります。境界のエッジを削除してメッシュが開いた状態になった場合、Unity は頂点と他の境界のエッジのみを保持します。内側のエッジ情報は、サーフェスが再び閉じられるか、Auto Geometry が使用されるまで失われます。

Create Vertex：このツールは、頂点を作成すると、その頂点と隣接する頂点を結ぶエッジが自動的に作成されます。

Create Edge：このツールで、既存の 2 つの頂点の間にエッジを作成したり、既存の 1 つの頂点とクリックした場所に配置された新しい頂点を作成したりすることができます。

Split Edge： これを使うと、マウスに近いエッジを分割し、クリックした場所に新しい頂点を作成し、元のエッジの両方の端点と接続します。

Weights（ウェイト）

Auto Weights：このツールで、ボーンウェイトを自動的に生成、正規化、または削除するパネルが開きます。

Weight Slider (画像 07) ：このツールを使うと、選択された頂点はスライダーで調整することができます。頂点を 1 つずつクリックして選択することができます。Ctrl を押しながらマウスの左ボタンをクリックすると、複数の頂点を選択することができます。また、矩形の投げ縄ツールをドラッグして、目的の頂点を囲むことでグループを選択することもできます。Shift を押しながら投げ縄ツールをドラッグすると、選択範囲に追加することができます。Shift キーを押さずに投げ縄ツールをドラッグすると、素早く選択範囲をクリアすることができます。

画像 07：Weight Slider の制御ツール

この例では、ルートが選択されたボーンですが、現在 bone_3 からのみ影響を受ける頂点を編集しています。Amount スライダーを使ってルートからの影響を追加すると、ルートが Vertex Weight リストに追加され、bone_3 の影響量は 1 から減少し、すべてのボーンの影響が 1 になるようになります。Normalize がチェックされていると、各ボーンのウェイトが均一にスケーリングされ、それらの合計が 1 になるようになります。チェックされていない場合、ウェイトの加算が 1 より小さくなることがあり、その結果、頂点があまり動かなくなります。これが望ましい場合もありますが、理想的な設定はご自身の使用状況によって異なります。Normalize の設定にかかわらず、ウェイトの合計が 1 を超えることはありません。

Weight Brush (画像 08)：Brush ツールを使うと、ボーンを選択し、その影響範囲を従来のデジタルペイントブラシを使ってペイントすることができます。ブラシのサイズ、硬さ、ステップは、Photoshop などのペイントプログラムと同じように動作します。

画像 08：Weight Brush は、ペイントプログラムのペイントブラシと同じように動作する。

4. Skinning エディターの使い方

1. 2D スプライトのリギングを開始するには、Project ウィンドウでプロジェクトに追加されたスプライトを選択し、ドロップダウンメニューから次のように選択します：Window > 2D > Sprite Editor の順に選択し、ドロップダウンの三角マークを選択し、Skinning エディターに入ります (画像 09)。

画像 09：Sprite エディターのウィンドウに Skinning エディターのドロップダウンが表示されています。

2. Edit Bone ボタンを選択し、キャラクターのスプライトをダブルクリックして、ボーンを表示させます (画像 10)。

画像 10：Skinning エディターウィンドウで、Edit Bone ボタンが選択されている状態。

3. 既存のボーンをボックスをドラッグして投げ縄ツールで選択し、Delete を押してスケルトンを消去します。(Mac OS X では、Command (⌘) + delete を押し続けます)

4. Create Bone ボタンを選択します。キャラクターのスキンに沿ってクリックしながらドラッグして新しいボーンを作成し、終了したら ESC キーを押します。クリックしてもボーンのルートが配置されない場合は、スプライトをダブルクリックして編集モードにしてください。1 本目のボーンのルートをキャラクターのボディの中央下部に配置します。このボーンがスプライトのハンドルになります。さらに中央のずい柱に沿って進み、最後のボーンはキャラクターの頭のほぼ中央の葉っぱの部分に配置します (画像 11)。ポーズのラインに沿うようにしましょう。

画像 11：1 本目のジョイントのチェーンは、キャラクターの茎の動きを制御します。

5. 右クリックまたは ESC キーを押してチェーンを解除し、キャラクターのポーズの別の部分（腕、脚、葉、巻きひげなど）をクリックして、中央のずい柱の近くから始め、ボーンを 2、3 本追加してスケルトンに加えます。

6. 残りの 3 本の手足にも手順 5 を繰り返します (画像 12)。

画像 12：キャラクターのスプライトの最終的なリグ

キャラクターのスプライトのスケルトンは配置されていますが、Preview Pose を選択してボーンを動かしても、キャラクターは動きません。これは、メッシュがまだ生成されていないか、スケルトンにバインドされていないためです。今からそれを行います。

7. Auto Geometry ボタンを選択します。ポップアップの Geometry パネルで、Generate for Selected を選択します (画像 13)。

画像 13：ワンクリックで、Auto Geometry はメッシュを作成し、スケルトンに結合し、ボーンへの近接度合いに応じて頂点のウェイトを自動的に設定します。

8. Sprite / Skinning エディターウィンドウの上部にある Apply を選択すると、これらの変更が適用されます (画像 14)。

画像 14：Apply ボタンが強調表示されている Skinning エディターウィンドウ

9. Preview Pose ボタンを選択すると、ボーンの移動や回転を行うことができます。Preview Pose 中に行ったスケルトンの変更は一時的なもので、モードを切り替えると失われてしまうことにご注意ください。

Weight スライダーコントロールを使って、頂点のウェイトを調整してみましょう。頂点がボーンの影響を受ければ受けるほど、ウェイトマップ内のボーンの色が濃くなることを覚えておいてください。最後に Apply を有効にしてから行った変更は、Revert を選択することで元に戻すことができます。

必要であれば、Auto Geometry を使って、適度にフィットしたリグにリセットすることができます。

スプライトのリギングが完了し、設定に問題がなければ、最後に Apply を選択して、Sprite エディターを閉じます。

これで、リギングされたスプライトのアニメーションを開始する準備がほぼ整いました。

10. リギングしたスプライトを Hierarchy ビューにドラッグして、ゲームオブジェクトを作成します。

11. Sprite Skin コンポーネントをスプライトに追加するには、まず Hierarchy ウィンドウでスプライトを選択し、Add Component ボタンを選択して、Sprite Skin を検索します (画像 15)。

画像 15：Sprite Skin コンポーネントは、Skinning エディターで作成したリグを使ってスプライトを変形させます。

Sprite Skin コンポーネントは、Skinning エディターで設定されたジョイントを検出しますが、対応するボーンがありません (画像 16)。

画像 16：Sprite Skin コンポーネントで、ボーンの作成がまだ必要であることを示しています。

Create Bones ボタンを選択すると、Sprite Skin の Root と Bones が表示されます (画像 17)。

画像 17：ボーンは Transforms の階層構造として形成され、Skinning エディターのジョイント階層のレイアウトと一致しています。

ボーンが Hierarchy に表示されるようになりました (画像 18)。他のゲームオブジェクトと同様に、それらを選択、回転、変形することができ、それに応じてスプライトのメッシュも変形します。

画像 18：各ジョイントは、Skinning エディターで設定したものを反映する階層構造のトランスフォームで表されるようになりました。

5. まとめ

これでアニメーションを開始する準備が整いました！リグをアニメーションさせるには、スキンメッシュと同じように、ボーンの位置と回転をキーフレームで調整します。詳しくは、「Animating a Sprite with the 2D Animation Package」というタイトルのチュートリアルをご覧ください。