ゲームアニメーションを改善するための5つのヒント

こんにちは、私の名前はデイブ・ブレハです。私はヴォルネイスクラ・スタジオで働いています。 過去3年間、私はSprykeを作成しました。Sprykeは、深海のサイバーフィッシュが土地の不思議を探索することについて、楽しく洗練されたプラットフォーマーです。



Sprykeチームの唯一の正規メンバーとして、私は創造的および技術的プロセスの多くの部分を担当しました。 いくつかのタスクは退屈ですが、ほとんどは楽しいものです。 私の好きな側面はアニメーションでした。長年にわたって開発してきた5つのアニメーションのヒントを皆さんと共有したいと思います。

最初のヒント：時々「量」は「品質」を意味する

「少ないほど」というフレーズは使い古された決まり文句になり、私の提案はとんでもないように思えるかもしれません。 ちょっと待って。 時には少ない...少ない！



品質に代わるものはありません。アーティストとして、私たちは常にそのために努力しなければなりません。 現実世界の解剖学、物理学、照明に関する知識は、ゲームグラフィックスの改善に役立ちます。 知識の欠如は彼女を傷つけます。 しかし、最も重要な品質の構成要素の1つは単純な量であることがわかります。 そして、これは特にアニメーションに当てはまります。



基本的なレベルでは、アニメーションは量です。 アニメーターは何百もの静止画像を作成するため、相互に接続されているため、脳はそれらを個別に処理できなくなります。 したがって、動きの魔法が作成されます。 同じ原則が高品質のアニメーションの作成にしばしば適用されます。



たとえば、これらのバブルを取ります。 彼らはよく似合いますよね？ （もちろん、それは素晴らしいSprykeゲームから取られているからです！）





それで、私は何について話しているのですか？ そうそう、泡。 見栄えはよくなりますが、バブル自体の基本的なグラフィックは非常にシンプルです。基本的には、単なる円です。 彼らは量のために美しく見えます。 しかし、バブルの数だけでなく、これらのバブルで同時に発生する多数のプロセスも原因です。 それらを詳細に見てみましょう：





（1）異なる透明度とサイズの泡。



（2）+わずかに異なる形状。



（3）+ランダム化された変動と最初のサイズの縮小。



（4）+ランダム化された三角運動（つまり、曲線に沿って）;



（5）+いくつかのソース。



（6）+水中での光の屈折。気泡はプレーヤーと衝突すると移動し、小さな気泡に分かれます。



このプロセスの各段階は単純です（ゆらぎと逸脱には幾何学に関する少しの知識が必要ですが、特に複雑なことは何も必要ありません）。 これらのステップはどれも、印象的でも信じられるものでもありません。 しかし、それらをすべて組み合わせて、複雑で説得力のある全体を作成します。 ステップ6に到達したとき、意識がこのすべてを個別に追跡できないほど多くのことが起こっており、アニメーションの個々のコンポーネントが1つの美しくダイナミックな全体にマージされます。



この原則は、バブルなどの複数のオブジェクトだけに適用されるわけではないことを強調したいと思います。 「量が品質を生み出す」という同じアプローチが、あらゆるアニメーションに適用されます。 自然のほとんどのオブジェクトは、さまざまな、ほとんど目立たない方法で移動します。 動かずに立っている人を注意深く見ると、まばたきや嚥下から腰の動きまで、小さな動きがたくさんあります。 歩く人を観察します-腕と足だけでなく、体と顔のほぼすべての部分が特別な方法で動きます。



一般的な場合、アニメーション中に発生する回数が多いほど、見た目は機械的でなくなり、より有機的で興味深いものになります。 このアプローチは、このドアなどの機械オブジェクトにも適用できます。





このドアのアニメーションでは、約12のプロセスが実行されます。そのほとんどは非常に単純です。パーツが上下に移動し、ライトが点滅し、画面が点灯して色が変わり、煙の粒子の基本的な効果もあります。 しかし、これらの単純な動きは互いに対照的であるという事実（一部の要素は上下に移動し、他の要素は側面に移動し、一部はちらつき、他は燃焼します）と、それらのアクションのわずかに異なる時間のために、それらは一緒に複雑な全体を作成します。



アニメーションに複雑さを追加できる範囲は、使用するアニメーション方法に一部依存します。 この点で、エンジンのアニメーションはより制限されています（ランダム化や動的応答など、他の利点がありますが、バブルの例を参照してください）。



Spryke自体は事前にレンダリングされたアニメーションを使用するため、エンジンで実際に可能なものと比較して複雑さを増すことができます。 事前にレンダリングされた適切なアニメーションを作成するには、ノードを使用してキャラクターをリグできるToon Boom Harmony Premiumなどのプログラムを強くお勧めします。







フィッシュスパイクは、ゲームのサイズが70x70ピクセルを超えることはありませんが、30を超える可動部品で構成され、約250の個別のノードを使用して制御および接続されます。 これにより、さまざまなポーズで非常に柔軟で詳細な動きを作成できます。

2番目のヒント：いフレームはアニメーションを改善できる

私たちが知っているように、アニメーションの魔法のほとんどは意識と無意識の境界で起こります。 これは漠然とした領域であり、アニメーションは潜在意識に「溶け」、その部分の合計よりも大きくなります。 しかし、場合によっては、効率化のためのアニメーション要素を意識によってまったく追跡すべきではありません。



アニメーションの魅力と魅力をさらに高めるための優れたテクニックは、ワーナーブラザーズのアニメーターによって完全にマスターされています。 ここでのコツは、衝突または速い動きの瞬間を選択し、誇張して似顔絵の状態でポーズを示す1つのフレームを挿入することです。 意識的に観察すると、このフレームは過度で不正確に見えます。 しかし、アニメーションで「感じる」と、アニメーションの残りの部分がより高いレベルになります。





おびえたカタツムリの1つのゆがんだフレームは、静止状態（つまり、意識的な表示）でもっともらしいとは思えません。 しかし、スローモーションバージョンを手で閉じて左側だけを見ると、どのように「間違っている」かがわかりません。 代わりに、アニメーションにもう少し快適さを追加します。





この誇張されたコヨテクックのショット（私はC なコヨーテにちなんで命名した！）で、私は体のさまざまな部分をゆがめて、イラストが実際に「バースト」するようにしました。 しかし、そのような不連続性はアニメーションでは実際には認識されないため、このフレームは単にその瞬間のドラマを強調するだけです。

3番目のヒント：ファジーでぼやけたフレームは貴重なミリ秒を節約できる

また、漫画フレームを使用してトリックを使用してアニメーションに魅力を追加できるため、ファジーな「ぼやけた」フレームを使用してさらにダイナミクスを追加できます。 この手法により、少数のフレームで非常に高速な動きを作成することができ、応答性が最重要である多くのゲームシナリオに完全に適合します。



トリックは、モーションの2つの外部フレームを取得し、それらを結合して、中央に挿入されるぼやけた3番目のフレームにします。



ここで、いくつかの原則を覚えておく必要があります。 まず、ファジーフレームは、開始フレームと終了フレームの平均ではなく、混合のように見える必要があります。 つまり、オーバーラップする領域は、開始フレームと終了フレームの両方で覆われている領域にほぼ対応する必要があります（これにより、ぼやけたフレームでオブジェクトが通常より大きくなりますが、これは正常です）。



第二に、目などのキャラクターの小さな重要な要素に特別な注意を払う必要があります。 初期フレームと最終フレームの目の位置が非常に異なっていて、それを中間フレームの中央に配置すると、滑らかさを失ったけいれんするアニメーションが得られます。 したがって、この中央のフレームでは、次の例のように、最初の位置から最後の位置まで目を「塗り付ける」必要があります。





意識的に見たときの中間の動きのこのフレームは不吉ですが、アニメーション中に非常に迅速かつ動的な遷移を提供します（これを確認するには画像の右側を閉じてください！）。 これにより、スパイクが非常にすばやく壁に触れたような感覚が生まれます。 グリースが塗られた目は、目が初期位置から最終位置にスムーズに移行するのに役立ちます。

4番目のヒント：9人の老人がビデオゲームをプレイしなかったことを思い出してください

アニメーションの12の原則について聞いたことがない場合は、それらに慣れておく必要があります。 これらは、ディズニーアニメーションの巨匠、いわゆる「ナインディズニーオールドメン」によって開発された論理的な原則です。 しかし、特定のビデオゲームのコンテキストでは、これらの原則のいくつかに従うことが問題になる場合があります。



非常に効果的な予測原理を採用してください。 この原則は、ほとんどの動きの前に反対方向の動きが先行していることを前提としています。最初にボールを前方に投げた野球のピッチャーが手を取り戻します。 悲鳴を上げる人は、最初に息を吸って顔の筋肉を絞る。 このようなリードの動きをアニメーションに含めることで、それらをより信じられやすく楽しいものにします。



残念ながら、この原則はゲームデザインのニーズと矛盾する場合があります。 プレイヤーがジャンプキーを押すと、キャラクターがすぐにジャンプすることを期待します。 ジャンプの前に数フレームのリードを置いた場合、見た目が良くなり、気分が悪くなります（反応が悪くなります）。 同じことは、動きの始まりと終わりを柔らかくするという原則にも当てはまります。かなり柔らかくなるジャンプのアニメーションは美しくなりますが、反応しません。



したがって、多くのゲームでは、これらの原則は一部のアニメーションで無視されます。 Rayman Legendsのような美しくアニメーション化されたゲームでも。 注：レイマンは地面を打つことでリードし、NPCは打つことでリードしますが、レイマンのジャンプアニメーションに関しては、彼は突然視覚的な「ゴム感」を失い、チェスボードから持ち上げられたかのように地面からすぐに離れます。 これにより、アニメーションの品質が低下しますが、応答性が向上するため、ゲームのフィーリングが向上します。





レイマンのジャンプでは、応答性がアニメーションの上に置かれ、元のプリンスオブペルシャでは、逆のことが当てはまりました。 崖から飛び降りるとき、ほぼ完全に1秒のリードがあることに注意してください。 これは、物理学と解剖学の観点からは見栄えがよく、信じられますが、ジャンプするたびにプレイヤーが考慮しなければならない遅延が生じます。



これはプリンスオブペルシャのゲームの正しい決定であり、前例のないレベルのリアルなアニメーションで私たちを襲ったと思います。 しかし、今日、多くのプレイヤーはこれを受け入れません。





ジャンプジャンプをアニメートするときに、私は妥協し、ゲームプレイに干渉しない少しのリードを含めることを試みました。 その結果、私はスパイクを即座にジャンプさせましたが、アニメーションではある程度リードしました。 したがって、ジャンプキーを押した直後にジャンプするという事実にもかかわらず、スパイクの動きにはリードがあります。 これは、純粋な鉛の数フレームほど効果的ではありませんが、これは価値のある代替品であるように思えます。



これら2つのシーケンスの時間と動きは同じです。 アニメーション版では、アニメーションなしのバージョンと同じように、スパイク全体が瞬時にジャンプする様子を見ることができます。 しかし、彼女のアニメーションには少しリードがあります。彼女は少し押し出して、重心を彼女の中心から戻します。 これにより、アンテナとホタテは、スローバックされるまで、いくつかのフレームで前方に移動します。



ただし、彼女の体のほとんどが少しのリードで撃退されると、彼女の目には逆のことが起こることに注意してください。 これは、身体の残りの部分が鉛と遅延の弱い兆候を示している場合でも、瞬間的な上向きの動きを強調するのに役立つことが判明しました。





予想に加えて、動きの始まりと終わりを和らげる原理（ スローインとスローアウト 、別名イージング ）はゲームの感覚に影響を与える可能性があります。 ウィッチャー3のこれら2つのアニメーションをご覧ください。





左側のアニメーションの見栄えを否定することは困難です。動きはより説得力があり、重量と男らしさが増しています。 右側の動きはよりエネルギッシュですが、非常に非現実的で馬鹿げています。 ジェラルトは羽のように明るく見え、世界では物理学の一部がないように見えます。 ここではさまざまなプロセスが行われますが、主なものは、開始と終了のあまり目立たない軟化であり、ほとんど慣性のないジグザグのGeraltの動きにつながります。



左側はThe Witcher 3が起動したバージョンですが、顧客の要望により、CD Projekt Redはパッチを代替モーションに変更しました（右側）。 ゲームで代替の動きを最初に試したとき、私はショックを受けました-リアリズムとゲームへの没入を非常に害しました。 突然、厳しいパワーに満ちたゲームはアーケードのダークサイドのようになりました。



それは私の心を少し壊しましたが、私はこのアニメーションをゲームの残りのために残しました：新しいアニメーションはより良く感じました。 プレイヤーとしてもゲーム開発者としても、私はすべてゲームに没頭することに専念していますが、コントロールとゲーム感覚への応答性のニーズは非常に重要であり、私も彼らに干渉したくありませんでした。

5番目のヒント：メカニックを作成してから、アニメーションを作成し、メカニックを再度作成する

アニメーションは単にメカニクスの上に重ねられるだけでなく、基本的にメカニクスを変更します。



ゲームデザインに関する重要な知識：最初のマリオのような古いゲームでさえ、グラフィックスなしで、ブロックから作成されました。 これらのいブロックで遊ぶことが面白くなったら、すぐに改善を検討する必要があります。 そうしないと、美しいグラフィックと面白いゲームプレイを混同し、その結果、見た目よりもずっと見栄えの良いゲームを作成できます。



Sprykeはブロック形式で3〜4か月を費やしました。 特に軽快で魅力的な動きのプラットフォーマーを作りたいと思っていたので、この正方形のブロックの動きがエキサイティングに面白くなるまで、慣性、加速、ジャンプ曲線、天井にぶつかり空中をホバリングするメカニズムを無限に実験しました。



この段階では、スパイクのキャラクターが何であるかさえ想像していませんでした。彼女の外観は、このブロックの抽象的なメカニズムの要件から徐々に成長しました。 動きが速い場合、最適な形状は50x50ピクセルの正方形になることが明らかになりました。 したがって、スプレーの設計を始めたとき、あらゆる方向に活発に移動するためには、スプレーが小さく、形状がボールに似ていることがわかっていました。



その後、キャラクターと彼のキャラクターが形になり始めるまで、私たちは彼女のデザインを何度も繰り返し、その後、私は彼女のさまざまな動きをアニメーション化しました。



この段階で興味深いことが起こりました。プレイテスターは、メカニックがどれほど良くなったかに気付き始めました。 彼らは、管理がはるかに敏感になったと言いました。 ただし、実際には、メカニズムは変更されていません。アニメーション以外は変更されていません。 頭の中にあるアニメーションを考え出すことで、メカニックの感覚が補完されることに気付きました。プレイテスターはこの機会を奪われました。



違いは、以下の比較で見ることができます。 アニメーションがないと、スパイクはボウリングのボールのように見えます。 彼女は、磁化されると天井にくっついて、ジャンプすると地面にひどく落ちます。 彼女のジャンプ自体は、ある種の人工放物線のように見えます。 まったく同じ動きをアニメーション化すると、スパイクは柔らかくて遊び心のあるものになります。 彼女のジャンプはより自然に見えます（もう少し長くなることもあります）。足を踏み入れると、彼女は春に地面から押し出されるようです。





技術的には、メカニックでは何も変わっていませんが、可能です。 アニメーションはゲームの雰囲気を変え、Sprykeはまったく異なるゲームのように見えました。



アニメーションは非常に強力にゲームの雰囲気を変えるので、デザインプロセスが完了した後にデザインプロセスを停止する意味はありません。 代わりに、メカニックの改訂を行う価値があります。上から見てください。メカニックの初期ビジョンは維持されていますか？ 複数の変数を変更する必要がありますか？ アニメーションは、メカニズムを修正することでさらに強調できる興味深いものを明らかにしましたか？



私たちの場合、ほとんどのスパイクの動きは素晴らしく感じられました-プロセスは、最初のステージのメカニズムを再発明するよりも改善するようなものでした。 主な例外は、高騰するメカニズムです。 Sprykeには、危険を回避したりプラットフォームに到達したりするために、秋には常に速度を落とすための高騰するメカニズムがありました。 しかし、このメカニズムをバブルでアニメーション化した後、彼女は自分の人生を癒しました。 ホバーは非常に異なって見えたため、間違っているように見えました。 既存のメカニズムでは、空中でオンにできるのは速度の低下だけでしたが、この新しいバブルアニメーションには、より軽くて弾力性のあるものが必要でした。



その結果、空中をホバリングするメカニズムをゼロからやり直しました。 自分の衝動を使ってエアクッションの上を滑るように滑って、キャラクターを押すことができる新しい物理的なコンポーネントを作成しました。 新しい「インスタント」バブル（instabubble）は非常に心地よい感覚を与えました。これは「ジャーク」という言葉でしか説明できません。



Instabubbleは、Sprykeの最もユニークな要素の1つであり、最も楽しい基本的なゲームメカニクスです。 そして彼女はアニメーションから生まれました！ または、より正確には、関数がその形状を決定し、結果のフォームの機能を改善できるようにするプロセスから生まれました。 最初のメカニズム。 それからアニメーション。 そして再びメカニズム。





まあ、それだけです。 あなたが私のヒントを楽しんだことを願っています、それらがあなたに役立つようにしましょう！