2D Animation パッケージスターティングガイド

2D スプライト用のスケルタルアニメーションを簡単に作成する方法をお探しですか？それなら、この度公開になった Unity の 2D Animation パッケージをお試しください！これを使用すれば、2D スプライトのリギングやボーンのウェイトのペイント、スケルタルアニメーションの作成を、すべてエディター内で行えます！さらに、インバースキネマティクス（IK）にも対応しています。パッケージは 2018.1 以降プレビュー版として入手可能となっていますので、今すぐ機能をお試しいただけます。プロジェクトでの効率的な使用方法を知りたい方は、ぜひこの先を読み進めてください。

2D Animation は現在プレビュー版として公開されており、Unity の パッケージマネージャー経由でプロジェクトにインストール可能です。パッケージマネージャーはバージョン 2018.1 以降の Unity から利用可能です。インバースキネマティクスもご使用予定の方は 2D IK パッケージも入手してください（これらに関する情報は、今月公開予定の別のブログ記事でお届けします）。

アニメーションを開始するのに必要なものがいくつかあります ― 1 つ目は言うまでもなく、アニメーション化したいスプライトです。これはどんなものでも構いません ― キャラクター、モンスター、オブジェクトでも何でも！

2D Animation 用にスプライトをインポートするに当たって念頭に置くべきことが 2 つあります。まず、このパッケージは現段階ではレイヤーには非対応です。つまり、リグに複数のばらばらのスプライトメッシュを使用させたい場合（例えば腕や脚など）は、それらを 1 つのレイヤー上に直接配置する必要があります。将来的なバージョンではレイヤーにフル対応となり、PSD などのファイル形式からのレイヤーのインポートが可能となる予定です。また、現段階では SVG ファイルインポートを含む Unity の新しい Vector Graphics パッケージとの統合はされていません。こちらも対応に向け準備中です。

上記を踏まえた上で、スプライトをインポートしてみましょう。本記事で使用するサンプルは 「Ríkr the Viking」です。このキャラクターは実験用サンプルとして間もなくご利用できるようになります。これを複数のスプライトに分割し、1 つのレイヤー上に再配置しました。

2D リギングはすべてスプライトエディター内で行います。この機能にアクセスするには、キャラクターのスプライトアセットを選択し、インスペクターウィンドウの「Sprite Editor（スプライトエディター）」ボタンを押してください。

スプライトエディターの左上の角にドロップダウンメニューがあり、「Sprite Editor」が選択された状態になっています。これを「Bone Editor」に変更すると、リグのボーンの作成を開始できます。右下の角にボーン編集ツールのセットが表示されます。

最初のボーンを追加するには、Create Bone ツール（B キー）を選択してください。ここで Bone Editor 内のどこかを左クリックすると、Root ボーンの開始点が設定されます。再度左クリックすると、そのボーンの終点と次のボーンの開始点が設定されます。右クリックするとボーンの作成がキャンセルされます。

スケルトンの Root ボーンを作成する時、どのようなアプローチで Root ボーンを配置するのがご自身のユースケースに最適かを考慮すると良いでしょう。一般的には 2 つのアプローチがあります。1 つ目は Root ボーンをメッシュの外の任意の点に配置する方法で、通常はキャラクターの足の間に配置し、いわゆる原点としてこれを使用します。2 つ目はキャラクターの腰に配置して腰骨としても機能させる方法です。ここで主に考慮すべきは、ルートモーションを実装する予定があるかどうかです。通常は、Root ボーンをスケルトンのその他の部分から分離することで、ルートモーションを使用したい時には単純に原点を動かしてキャラクター全体を動かせるようにする方が簡単です。このワークフローは、腰の位置は変化するが Root の位置は変化しないアニメーションを作成したい場合にも役立ちます。

Bone Editor ではこの他にも各種のボーン編集ツールが利用可能です。その 1 つが Free Bone ツール（N キー）です。これを使うと、親ボーンを保持しているが直接それに接続されていないボーンを作成することができます。Free Bone ツールは、スプライトの実際のメッシュに接続されていない原点に Root ボーンがある場合や、スプライト内の要素が複数の部分に分割されている場合に役立ちます。この例では、キャラクターの腕や脚をスケルトンのその他の部分に接続するために自由ボーン（free bone）を使用します。後にアニメーションを作成する際に、それぞれの自由ボーンを（キャラクターのボディに対して）丁度良い位置に動かすことで、1 つの完全なスプライトが形成されているように見せることができます。

この他のツールとしては、既存のボーンを 2 つのより小さな均等なボーンに分割する Split（S キー） と、あるボーンを別のボーンの親にする Parent（P キー）、そして現在アタッチされている既存のボーンを動かして自由ボーンに変える Move（M キー）があります。間違ってボーンを作成してしまっても問題ありません。ボーンを選択して削除キーを押すか、ツールパネルの削除ツールを使用すればそのボーンを削除できます。

スケルトンの編集が完了したら、スプライトエディター UI の右上にある「Apply」ボタンを必ずクリックしてしてください！これを行わないと作業内容が失われてしまいます。

（注）ボーンには説明的な名前を付けることをお勧めします。複雑なスケルトンの場合は特に、後でそのヒエラルキーをナビゲートする際に、探しているものが見付けやすくなります。

リグが完成したら、スプライト用のメッシュの生成を行えます。後に追加するボーンのウェイトとメッシュの組み合わせによって、リグ内でボーンを動かしたり回転させたりした時にスプライトがどのようにデフォームするかが決まります。前述した左上のドロップダウンメニューで「Skin Weights and Geometry Editor」を選択してください。

ここからは、頂点とエッジを追加することでスプライトメッシュを手動で作成していきます。これを行うツール（Create Vertex、Create Edge、Split Edge）は上部のツールバーにあります。ただしこの作業には、特にスプライトの輪郭が細かく複雑な場合は、かなり時間がかかることがあります。このため、事前定義されたパラメーターによって自動でメッシュを生成するオプションが提供されています。

上部のツールパネルで、「Generate」のドロップダウンメニューをクリックしてください。

ここでメッシュの Outline Detail を設定できます。これは、輪郭がどの程度精密にグラフィックに合致するかを決定します。

Alpha Tolerance は、メッシュの作成時に透明度をどの程度考慮するかの設定です。通常、値が高い場合はより正確にピクセルに合致するメッシュ（通常は頂点数が大幅に多くなる）になりますが、高く設定し過ぎると、スプライトの半透明部分がメッシュから除外されてしまう場合があります。また極度に細かいメッシュはパフォーマンスの問題を引き起こす可能性もあるのでご注意ください。

Subdivide の値によって、メッシュの内側に作成される頂点の数（およびポリゴン数）が決まります。これは、フェイシャルアニメーションやデフォームされた要素をグラフィックの内部に作成したい場合に役立ちます。また、カスタムのライティングシェーダーを使う場合に、これを使用してメッシュのテッセレーションの質を向上させることができます。

基本的にここで推奨されるワークフローは、自動生成されたメッシュをベースとして使用し、必要な箇所は編集ツールを使って手動で詳細を追加・削除するというものです。

メッシュが作成されたら、それにボーンのウェイトを加える必要があります。これにより、メッシュの各頂点が各ボーンの影響をどの程度受けるかが決まります。ボーンのウェイトの編集を開始するには、上部のパネル内で編集モードを「Geometry」から「Weights」に切り替えてください。

ここで、Sprite Editor の右下部分に新しいツールパネルがあることに気付かれるでしょう。これを使用して手動でボーンのウェイトをペイントできますが、メッシュの場合と同様、「Auto」ツールでウェイトを自動的に生成することも可能です。

ウェイトの編集中は、動いた時にメッシュの各部がどのようにデフォームするかプレビューで確認することができます。スケルトン内の任意のボーンをクリックで選択した上で動かしたり回転させたりすると、メッシュにどのように影響するかがプレビューできます。上部のツールバーのスライダーを調整すれば、ペイントされたウェイトとボーンの可視性を下げることもできます。こうすることでシーン内でのスプライトの見た目により近い形で確認できます。

ボーンのウェイトは通常、メッシュよりも精密な調整を必要とします。大抵の場合は、各ボーンがどの頂点を動かすかを細かく設定する必要があります。下部のツールバーにある「Brush」および「Slider」ツールはまさにこのためにあります！

Brush ツールを使うと、メッシュの個々の頂点に直接ウェイトをペイントできます。ブラシのサイズは変更可能で、このサイズによって、影響を受ける頂点の数が決まります。「Hardness」および「Step」は、特定の頂点に影響を与えるボーンが複数ある場合に、あるボーンのウェイトで別のボーンのウェイトをどの程度上書いていくかを決定します。

「Add And Subtract」モードで、ウェイトのペイントを開始できます。ウェイトを加えたいボーンを Sprite Editor ウィンドウでクリックして選択するか、Brush ツールのドロップダウンメニューから選択してください。

Slider ツールではボーンウェイトをより広い範囲に分配できます。これも Brush ツール同様、選択モードによって機能の仕方が変わります。

「Add And Subtract」モードでは、（この例では）選択されたボーンの影響をメッシュ全体に追加することができます。これに対し「Grow And Shrink」モードは、既に設定されているボーンの影響領域を拡大したり縮小したりするので、ボーンの周囲の頂点に制限されます。

「Smooth」モードはスケルトン内のすべてのボーンウェイトの間における遷移を均等化するために使用されます。このモードを Brush ツールで使うと、同じことが局所的な範囲に対して行えます。

スプライトのリギングを行うに当たっては、大抵の場合、その各部同士がどのように重なり合うかを制御する必要があるでしょう。例えば「キャラクターの右腕を体の前に表示し、左腕は後に持っていきたい」などです。2D Animation では、ボーンのレンダリング順の設定が可能です。これを Bone Depth と呼びます。

Bone Depth は Weights エディターでボーン毎に設定されます。ボーンのレンダリング順を変更するには、そのボーンをエディターのウィンドウで選択してください。ウィンドウの左下部分にインスペクターがポップアップ表示されます。ここでレンダリングの優先度を設定できます。値が高いと、メッシュの中でそのボーンに関連付けられた部分が値の低い部分より前面に置かれます。デフォルトでは、すべてのボーンの Bone Depth は 0 になっています。

リギングされたメッシュのセットアップとボーンのウェイトのペイントが完了したら、それをシーン内で使用できます。まずリギングされたスプライトアセットをシーン内にドラッグし、それに Sprite Skin コンポーネントを追加してください。スプライトにスケルトンが含まれていれば、「Create Bones」（ボーンを作成する）オプションが使用できます。これにより、スケルトンがシーン内でインスタンス化されます。

ここからは、自由にボーンを動かしたり回転させたりして目標とするキャラクターのポーズを作っていくことができます。ボーンを回転させるには、それを選択して Rotate ツールを使用する（E）か、ボーンの端をつかんで目的の方向にドラッグしてください。ボーンを動かしたり親から切り離したりする場合は Moveツール（W）を使用するか、元の位置で掴んでドラッグします。ボーンをリセットしてリグ内のデフォルトの位置に戻すには、インスペクター内の「Reset Bind Pose」を使用してください。また複数のボーンを選択してそれらをグループとして一度に回転させることもできます ― これは毛髪や植物の根など、ひとまとまりのシェイプを作成したい時に便利です。

それでは、新しく作成したスケルトンを使用して、完全な 2D アニメーションを作成する方法を確認していきましょう！

2D Animation パッケージを使用すると、3D プロジェクトの場合と同様に、2D プロジェクトでスケルタルアニメーションの作成を行えます。これを最も簡単に行うには、リギングされたスプライトを選択してアニメーションウィンドウを開いてください（Window > Animation > Animation）。このゲームオブジェクト用の Animator コンポーネントと最初のアニメーションクリップを作成するメッセージがプロンプト表示されます。「Create」をクリックし、コンポーネントの保存先フォルダーを選択し、最初のアニメーションクリップに名前を付けてください。アニメーターアセットは自動的に作成されますが、名前の変更や、任意の場所への移動が可能です。この他に、先にアニメーターを作成（Assets > Create > Animator Controller）してそれをコンポーネントとしてゲームオブジェクトにアタッチする方法もあります。その後はアニメーションクリップを作成するだけです。

アニメーションの作成作業はすべてアニメーションウィンドウ内で行われます。1 つのアニメーターに複数のアニメーションクリップを持たせることができます。新しいクリップを作成するには、アニメーションウィンドウの左上のドロップダウンメニューに表示された現在選択中のアニメーションクリップの名前をクリックして「Create New Clip」という選択肢を表示します。

アニメーション作成作業の開始時に、すべてのボーンの位置と角度のキーフレームを設定すると良いでしょう。これは、それらすべてを変化させる予定ではなくても設定することをお勧めします。そうしないと後々、シーン内でアニメーションに影響を受けていないボーンを移動したり回転させたりした場合に、それらのトランスフォームがシーンから取り残され、アニメーションが望ましくない形で変化してしまうことが多々あります。

すべてのボーンとキーフレームを設定してアニメーションの変化の記録を開始するには、まずアニメーションウィンドウで記録モードをオンにする必要があります。上部のツールバーの赤いボタンを押してください。最初のキーフレームを作成するには、ヒエラルキーウィンドウ内で該当リグのすべてのボーンを選択し、インスペクター内で「Position」および「Rotation」のトランスフォームの上で右クリックして「Add Key」（「キーを追加する」）を選択してください。これにより、選択されたすべてのボーンの位置と角度のキーがそれぞれ作成されます。すべてのボーンとそのすべての子が確実に選択されるようにするには、全選択を行う前にボーンのヒエラルキーを展開する必要があります。これはショートカットで簡単に行えます ― Alt キー（Mac の場合は Option キー）を長押ししながらルートボーンを左クリックしてください。この操作で、該当ルート内に入れ子になったすべての子の展開と折り畳みが行えます。

記録モードでは、アニメーションの再生位置を動かし、シーン内でボーンを移動させたり回転させたりすると、自動的に新しいキーフレームが作成されます。

キーフレームはアニメーションのタイムラインに沿って動かすことができます。動かしたいキーフレームを選択して任意の場所にドラッグしてください。あるいは、お馴染みのショートカット（Ctrl (Cmd) + C と Ctrl + V）でコピーアンドペーストも可能です。アニメーションの編集が完了したら記録モードを終了して再生ボタンでアニメーションをプレビューしてみましょう。

さあ、これで皆様もスケルタルアニメーションの作成を始められます！あっという間に完成した、Ríkr the Viking の歩行アニメーションをご覧ください！

2D Animation に関する詳細は、プレビュー版ドキュメンテーションでご覧いただけます。現在 GitHub の 2D Animation のレポジトリから入手可能です。

同レポジトリにはサンプルプロジェクトもいくつか提供されています。これらを色々と触ってみると、本記事で解説したワークフローの基本がご理解いただけると思います。

本ブログ記事シリーズ後編では、2D インバースキネマティクスのスターティングガイドをお届けします。どうぞお見逃しなく！

Unity では、新しい各種 2D パッケージで皆様がどんなプロジェクトを作成されているか、どんな使用体験をされているかに、とても興味があります。

このために、Unity 2D Challenge を立ち上げました。Unity の新しい 2D ツールで小さなコンテンツを制作し、賞金と Unite へのチケットを手に入れましょう！Pixel Perfect のアートでも、2D ゲームの小さなバーティカルスライスでも、どんな種類のコンテンツでもお待ちしています。応募締め切りは 12 月 17 日。さあ、今すぐ制作を始めましょう！

2D Animation フォーラム でも、皆様のプロジェクトのご紹介、ご意見・ご感想をお待ちしております！