Search Unity

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 スケルトンを構築する

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

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

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

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 ツールで使うと、同じことが局所的な範囲に対して行えます。

Bone Depth を変更する

スプライトのリギングを行うに当たっては、大抵の場合、その各部同士がどのように重なり合うかを制御する必要があるでしょう。例えば「キャラクターの右腕を体の前に表示し、左腕は後に持っていきたい」などです。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 インバースキネマティクスのスターティングガイドをお届けします。どうぞお見逃しなく!

#Unity2DChallenge

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

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

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

20 コメント

コメントの配信登録

コメント受付を終了しました。

  1. Aykut Karaca

    1月 6, 2019 7:18 pm

    Also, I dont see the spring bone feature which is a great feature by Anima2D. Ihope you guys integrate all other suggestions to make this a intuitive. Anima2D is great but buggy and hard to implement/change on the road.

  2. Library\PackageCache\com.unity.2d.common@1.0.11-preview.1\Editor\InternalBridge\InternalEditorBridge.cs(115,34): error CS0117: ‘KeyCombination’ does not contain a definition for ‘TryParseMenuItemBindingString’

    it’showing me this after installing animation package

  3. Great animations

  4. Lesia Kovtun

    12月 5, 2018 3:45 pm

    Hello Alice!
    Could not find how to contact you. So this way!
    My name is Lesia, I represent Tellurion Mobile game dev. I am here just to ask for republishing your this article to our game dev blog with a link to your website and you as the original author. Pls give me your answer ASAP. (Twitter – TellurionMobG) email: lesia.kovtun@tellurionmobile.com

    Have a nice day!

  5. I’m a current Spine user at the game studio where I work, and tested out the current state of your 2D Animation package. Besides IK which you mentioned yourself is underway, here are my findings so far:

    1. It’s extremely easy to accidently move bones when using a tablet. Can’t the first click on a bone be restricted to just selecting that bone?
    2. After having created a free bone (N) and then create a normal bone (B), I would expect that second bone to be a child of the free bone created before it, but instead it becomes a child of the last normal bone I have created.
    3. It’s not very intuitive to have to work with a numbered system for Bone Depth, it would be way faster to have a visual hierarchy to determine the render order. I really hope that the render order/bone depth will be animatable!
    4. After some fiddling I found out how to rotate multiple bones uniformly. But this is not possible when selecting multiple bones and then using the rotate tool (E), even though that would seem the logical way to go.
    5. I hope it will be possible to animate the individual vertics of a mesh, to create more organic looking animations.
    6. Animatable sprite swapping, so you can for instance easily animate an eye blink, by switching between an eye_open and eye_closed sprite.

    Really looking forward to this tool becoming more production ready!

  6. I’m a current Spine user at the game studio where I work, and tested out the current state of your 2D Animation package. Besides IK which you mentioned yourself is underway, here are my findings so far:

    1. It’s extremely easy to accidently move bones when using a tablet. Can’t the first click on a bone be restricted to just selecting that bone?
    2. After having created a free bone (N) and then create a normal bone (B), I would expect that second bone to be a child of the free bone created before it, but instead it becomes a child of the last normal bone I have created.
    3. It’s not very intuitive to have to work with a numbered system for Bone Depth, it would be way faster to have a visual hierarchy to determine the render order. I really hope that the render order/bone depth will be animatable!
    4. After some fiddling I found out how to rotate multiple bones uniformly. But this is not possible when selecting multiple bones and then using the rotate tool (E), even though that would seem the logical way to go.
    5. I hope it will be possible to animate the individual vertics of a mesh, to create more organic looking animations.
    6. Animatable sprite swapping, so you can for instance easily animate an eye blink, by switching between an eye_open and eye_closed sprite.
    7. Animatable FK/IK switching
    8. Onion skinning/ghosting. It would be amazing if you could make a ‘snapshot’ at a certain frame. This way you could create ghosts at specific frames when blocking in your key poses.
    9. Selection Sets, it just speeds up the workflow when you can select a bunch of bones in one go. I find the drop-down menu utilized by 3ds max very intuitive

    Really looking forward to this tool becoming more production ready!

  7. well, that is not a complete solution for 2d animations as it doesn’t support deformation and other things that tools like Spine offer. and the fact that Unity always works on multiple solutions for things like animation(anima2D and this new guy in town) and networking(Unet, and the new networking system) makes me think more about it’s capabilities for bigger projects as it’s solutions and systems change so much! that makes developers just so confused. for example if you wanna start making multiplayer games in Unity, you will have to compare more than 15 options. having multiple options is great for advanced users. so they pick the one they already know. but there should be also one built-in solution that if the users pick, they don’t have to worry about it in future. but there isn’t(for 2D animations and networking).

    1. Anima2D was never a solution we integrated in anyway. We acquired the talent behind it and gave the tool away for free. From then onwards, we’ve been building our *one built-in* solution which is this.

      Fair point that we have not gotten to feature parity as compared to other competent tools but we will get there. Let me know if you would like to help. I’m collecting a set of people that are willing to give feedback on what’s important to them in these tools.

  8. Isaac Surfraz

    11月 12, 2018 8:45 am

    This combined with the sprite shape feature makes awesome modern ubisoft style 2D possible :) great job unity team!

  9. Anima2d is not going to be Unity’s solution. Unity’s making something more native and this is part of that.

  10. Is this different than anima2d which was introduced about a year ago as part of unity core? I’m confused

    1. Yes, I was confused. Anima2D is still an asset made free by Unity, not part of unity packages

  11. Needs 3 things:

    1) Changing e.g. an open hand to a closed hand.
    2) Ability to shift single/multiple verts and animate them with falloff (i.e. keying vert frames as if with a sculpt brush)
    3) Vertex animation ^^^

    1. 4) Showing/hiding body parts
      5) Default curve/interpolation mode for movement tweens

      1. Some great ideas here. We have some of them in our roadmap. Would you like to help in shaping it? Let me know please…

        1. Me and a lot of others made a lot of helpful feature suggestions in this thread: https://forum.unity.com/threads/2d-animation-preview-packages.521778/page-2
          Maybe those are helpful?

  12. Marllon Vilano

    11月 9, 2018 7:31 pm

    I liked so much how the 2D Animation started to treat the configurations of Bones and Weights directly on Sprite Editor window, don’t needing to create other separated files as it was done in Anima 2D.

    But for a project, I’m currently working, I cannot find a way to use the built-in 2D Animation because the game has a 2D Character Customization system and it is not possible to use the same Bone Skeleton to every variation of the sprites (some of them are very different in scale and form).

    My question is: Do you are thinking something about this for a future update of 2D Animation?

    1. You have a complex/advance requirement that may be best served with the upcoming Nested Prefab feature. But before I can be sure that your use case is properly attended to, I’d like to know more. Would you like to provide direct feedback to us and help shape this feature?

      1. Marllon Vilano

        11月 13, 2018 4:40 am

        Hi Paul, it would be my pleasure to help with the feature I was talking about. How can we chat?

    2. Same stuff. We need to change character’s clothes parts in our project in runtime (change cloak from one to another, boots from one to another, gloves, etc.). As a checked, bones bind with one sprite in current implementation.