脊椎アニメーション、ヒントとコツ、擬似3D効果

ゲームに特化した骨格アニメーションを作成するプログラムであるSpineと私の経験を共有したいと思います。

公式ガイドを見た後、多くの質問が発生します。ワークフローの各段階でこのプログラムを使用する場合の落とし穴について説明します（例としてSpine-Unityを使用）、作業を最適化する方法、3Dなどの人気のあるチップについても説明します効果。 記事には大量のgifが含まれます。

UPD：Spineバージョン3.6の最近のリリース後、記事の最後に記載されているJsonチップは、一般的な開発にのみ関連しています。 開発者は、「そのまま」と呼ばれるこの機能を追加しました。


すぐに予約します。ドラゴンボーン、Spriter、Creature、Marionetteスタジオ、Puppet 2Dプラグインなど、ゲームでアニメーションを作成する他のソリューションがあります。おそらく他にもあります。私はSpineでアニメーターとして働いています。

作業スキーム

ゲームのためにどのキャラクター/アニメーションを作成すべきかについての情報と理解が得られたら、必要な素材が描かれます-続行できます。

一般的な作業スキームは次のとおりです。

最初のステップは、グラフィックエディターから作業材料を準備することです。 次に、アセット（アセット、テクスチャ）がSpineにインポートされ、アニメーション化されます。 出力で、Jsonを取得します。このファイルには、ボーン、スロットなどの変換のすべてのキーフレームが記録されています。 このファイルはエンジンにインポートされ、特別なスケルトンデータが作成され、Spineゲームオブジェクトのシーンに追加されます。アニメーションはメッシュレンダラーを使用して視覚化され、起動はコードまたは標準のユニティアニメーターを使用して制御できます。

spineの直接的なワークフローは次のとおりです。

1. テクスチャのインポート
2. リギング（スケルトンのセットアップ）
3. スキニング（メッシュを設定し、骨にバインドする）
4. アニメーション
5. JSONのエクスポートと検証

例として、そのようなキャラクターのアニメーションを作成してみましょう。

テクスチャのインポート

テクスチャを準備する段階では、キャラクターの投影がどれだけ必要か、フレームごとに作業のどの部分が行われるか、プログラムによって何が行われるか、キャラクターを正しくカットしてアセットを準備する方法を理解することが重要です。

よくある間違い：



また、キャラクターが角度を変更すると、投影の数が不十分になります。

多くの場合、キャラクターは同一の画像（腕、脚、目など）とペアになっています。 この場合、1つのテクスチャのみを保存し、2回以上使用することをお勧めします。

この場合、1回の投影で十分であり、アーティストはアセットを適切にペイントしました。 脊椎へのインポートを開始できます。

テクスチャをインポートするプロセスは、レイヤーからPNGスクリプトを使用して大幅に高速化できます。これにより、Photoshopの各レイヤーが個別のpng画像に保存されます。テクスチャの場所に関する情報を含むJsonファイルを書き込み、脊椎にインポートすると、既製の組み立て済みキャラクターが得られます。


ただし、この方法にはいくつかの欠点があります。スクリプトは圧縮せずに画像を保存するため、実用的ではありません。 file-generate-imageアセットを介してレイヤーを再保存するだけで、画像の重量が約10倍減少します。

次に、スプ​​ライトを水平または垂直位置に配置することを忘れないでください。不要なものはすべて消去してください。 スクリプトは、Photoshopでの位置に画像を保存します。



プロジェクトでフレームごとのアニメーションが必要な場合（例：火、特殊効果など）-事前にマテリアルを描画する必要があります。 次に、Adobe After Effectsとae_to_spineスクリプトを使用して、数クリックでフレームのシーケンスをSpineに転送できます。


私は事前に命名の概念を考えることをお勧めします、材料はしばしば「レイヤー1（コピー）5」の形式で来ます。これはあまり実用的ではありません。プロジェクトの各テクスチャに対して、アトラスを梱包するときに問題を引き起こさないように一意の名前を付ける必要があります。 フォーマットオプションCharacterVyasya_Skin_a_Hand_R_1は非常に適しています。

ここでは、 検索と置換ツールが非常に役立ちます。これにより、多数のオブジェクトの名前をすばやく変更し、パスを指定できます。

索具

キャラクターのスケルトンを設定するときは、ゲームで作業するプロセスで、アニメーションを調整、修正する必要がある可能性が高いという事実を考慮する必要があります。そのため、編集プロセスをできるだけシンプルかつ高速にするために、できるだけ柔軟にすることが望ましいです。

追加のコントロールボーンの導入は、X軸とY軸に沿って動きを分割するのに役立ちます（脊椎に個別の次元機能が欠落しているため）。


ちょっとしたヒントがあります。骨の数が多すぎて突然ごちゃごちゃになった場合は、骨のスケール設定をひねってみてください。



スパインまたはオンラインで提供されるサンプルから既製のリグの例を参照してください。


有用な資料は、 行動 、 フォーラム 、ソーシャルネットワークの関連コミュニティでも検索できます。

スキニング

メッシュ-脊椎の主要なツールの1つであり、そのテクスチャに3Dの変形、変形、錯覚を作成する機会を与えます。

メッシュを作成するときは、頂点が少ないほど、アニメーションを簡単に制御できることに注意してください。


なぜなら メッシュの変形はCPUリソースを消費します。メッシュを作成する場合、必要最小限の原則に基づいて誘導する必要があります。これは恐竜の尾の先端のリグの例で明確に説明できます。




メッシュ階層全体がボーンとウェイトとともに複製される可能性を忘れないでください。 これにより、重複オブジェクトをリギングする際の時間を大幅に節約できます。

性能

最後に、疑問が生じます-いくつの頂点を使用できますか？
Spine開発者はこの質問に特に答えず、シーン内の要素の総数を追跡できるSpine Metricsタブを参照しますが、同時にカスタムパフォーマンステストの必要性について話します。

静的なジオメトリがGPUをロードする一方で、メッシュ変換、タイムライン、およびロードがCPUをロードすることを覚えておくことが重要です。 一般に、キーキャラクターの作業の場合、ポイントについてあまり気にしないようにアドバイスしますが、プラスまたはマイナス12個は何の役割も果たしませんが、環境からのオブジェクト（100回繰り返される）の場合、保存された各頂点にメリットがあります。

したがって、キャラクターを構成したら、アニメーションに進むことができます。

アニメーション

アニメーション自体は非常に大きなトピックであり、明らかに同じ記事で議論するためのものではありません。
ここでは、キーの平凡なヒントに限定します。

• アート部分を忘れずに、アニメーションをできるだけ表現力豊かにする
• ディズニーアニメーションガイドラインに従う
• 素材をその場所にインポートします。多くの場合、その後、ジャムが表示されます。

3D効果

これは脊椎がとても好きなものです-メッシュを使用して画像を変形し、それによって三次元効果を作成する機能。


私にとっては、疑似3Dを作成するいくつかの方法に注目しました。

1. 頂点アニメーションを直接マッシュ
2. メッシュの重要なポイントにある多くのボーン、アニメーション化されたボーン
3. ボーンを選択的に設定し、メッシュでウェイトを慎重に調整します。
4. 組み合わされた方法で、すべてがグローバルな管理下に置かれます

三次元効果を構築する原理は、幾何学的プリミティブで明確に見ることができます。



例から、メッシュ自体のポイントのアニメーションが最も柔軟性に欠けるオプションの1つであり、必要に応じてやり直しが難しいことは明らかです。 これに、統合に加えて、他のいくつかのランタイムでこの機能がサポートされていないことを追加する価値があります。 したがって、可能であればメッシュに触れず、骨の助けを借りてメッシュを制御することをお勧めします。

類推により、任意の幾何学的形状の変形を行うことができ、それによってアニメーションに表現力を追加できます。

そこで、キーフレーム、メッシュの上に数時間座って、キャラクターのアニメーションを作成しました。

テスト中

次に、アニメーションをエンジンに送信できます。 ただし、脊椎とランタイムのアニメーションの外観が大幅に異なる場合、状況がよく発生します。 アニメータープログラマーが行う各インタラクションには一定の時間がかかるため、事前にランタイムでアニメーションテストを実施することをお勧めします。

アニメーターがエンジンと友達でない場合は、 スケルトンビューアーを使用できます

最も頻繁に発生する問題：

1. いくつかのアセットを置くのを忘れた、またはその逆、エクスポートが多すぎた（作業ファイル、参照など）-ここですべてが明らか-マテリアルを配る前に、プロジェクトにあるべきものとすべきでないものを慎重に確認してください
2. アニメーションのジョイントでの不一致-ユニット内でトランジション期間を設定して、ジョイントをスムーズにしようとすることができます。 または、可能であればキーを修正します
3. テクスチャが正しく表示されません
   
4. 作業後、アニメーションは以前のようには見えません

不正なテクスチャマッピング

ほとんどの場合、これは不適切なテクスチャ構成が原因で発生します。メッシュはスプライトのサイズに明確に対応する必要があります。

ワークアウト後、アニメーションは以前のように見えません

これは、実行時にアニメーションがデフォルトの位置からではなく、現在の位置から計算されるために発生します。 つまり テクスチャを一度オンにしてオフにしない場合、すべてのアニメーションでこの位置に残ります。 他のキーでも同じです。 これはおそらくバグではなく機能ですが、残念ながら、アニメータはマテリアルをランタイムにインポートするまで実際の画像を見ることはできません。 この問題を解決するにはいくつかの方法があります。

1）各アニメーションの開始時と終了時に、すべてのオブジェクトのすべてのプロパティにキーを配置します。 一見、少し面倒ですが、こうすることで予期せぬ驚きから完全に保護されます。 フィルタとホットキーを使用すると、プロセスが高速化されます。

オブジェクトをボーンでフィルタリングするためのアイコンと、階層をすばやく展開するためのボタンが赤で強調表示されています。



デフォルトのホットキー：

アクティブなキー：L
選択したキー：ctrl + L
キードープシート：ctrl + shift + L
キーの変換、キーの回転、キーのスケール、キーのせん断、キーの色-自分で設定する必要があります

2） setToSetupPoseスクリプトを使用します 。これは、 いわば 、アニメーションをデフォルトの状態から強制的に再生します。 ただし、この方法には重大な欠点があります。セットアップポーズが即座に設定され、レンダリングによって次のフレームからのみ適切な画像に変更されます。 したがって、アニメーション間で余分なフレームがスキップされるため、不快に見えます。 対応する問題はすでに開発者ボードにあります。

ジョンソン

脊椎Jsonからエクスポートし、操作を実行し、インポートして戻すと、特定の結果が得られます。 これは非常に強力なツールです プロジェクトのすべてのコンポーネントにアクセスできるため、特定の状況でこれが非常に役立ちます。

1. 必要に応じて、いくつかのプロジェクトを実行します
2. 必要に応じて、ボーン階層をアニメーションとともにコピーします
3. 必要に応じて、古いバージョンにロールバックします
4. 思い浮かぶ他の用途

プロジェクトのマージ

たとえば、次のように、アニメーションを1つのシーンに保持する必要があることがよくあります。


これを行うには、少なくとも2つの方法があります。手とスクリプトを使用する方法です。

手

対応するカテゴリ（スロットのスロット、ボーンのサイコロ、アニメーションのアニメーションなど）で、1つのjsonから別のjsonにコードをコピーします。 競合を避けるために、あるjsonの名前が別のjsonの名前と一致しないように、オブジェクトの名前を正確に保つことが重要です。 これを事前に実現する最も簡単な方法は、名前のすべてのオブジェクトに_skel1_および_skel2_型の一意のインデックスを割り当てることです。 この方法は少し時間がかかりますが、私はまだ失敗していません。

スケルトン合併ツール

善良な人々は、マージのための特別なツールを書きました。 リンクを読んでダウンロードできます。 それを使用することは非常に便利です;オブジェクトの自動名前変更は有効になっていますが、私はしばしばエラーに遭遇しました。

アニメーションでオブジェクトを複製する

脊椎にはコンポジションのネストはありません（After EffectsのプリコンポジションまたはFlashのシンボルに類似しています）が、上記のように、すべての依存関係を保持しながらオブジェクトを複製することは可能ですが、この場合アニメーションキーはコピーされません。 アニメーションを再度行わないために、ボーンの複製に再割り当てできることを推測することは難しくありません。これは、Jsonで名前を削除するだけで済みます。 繰り返しますが、これは各ボーンに独自のインデックスがあれば簡単です。

古いバージョンにロールバックする

新しいバージョンで保存されたプロジェクトは、古いプロジェクトと互換性がありません。 時にはこれが問題になることがあり、それを解決する方法がいくつかあります。

JSONのハンズキルバージョン

 "skeleton": { "hash": "", "spine": "3.4.02", "width": 0, "height": 0, "images": "" }, 

バージョン間にわずかなギャップがあり、アニメーションアルゴリズムに基本的な違いがない場合に役立ちます。

JSONロールバックツール

あなたは仕事の原理に精通し、リンクからダウンロードできます。

まとめ

• 実行しているタスクを明確に示します。
• スクリプトを使用して速度を上げる
• 柔軟なリグを作成し、メッシュで無理をしない
• 送信する前にランタイムでマテリアルをテストする
• これにより時間を節約できる場合は、jsonに気軽にアクセスしてください。

ご注意いただきありがとうございます。この時点より前に記事を読んで質問やコメントがある場合は、コメントのすべてをお読みください。

PS記事はアニメーターのためにほとんどの部分でアニメーターによって書かれました。あなたがプログラマーであり、「小さな手」を持っているなら、コメントでコメントできます。