こんにちは！私はPixonic、AlexeyMorevのシニアUIデザイナーです。そしてこの記事では、私たち一人一人がゲームで見ることができるUIアニメーションに焦点を当てます。
ゲームインターフェイスは、ボタン、アイコン、進行状況バー、背景、カード、ポップアップウィンドウなど、ユーザーがゲームを操作および制御するのに役立つ要素のコレクションです。インターフェイス要素との対話を容易にするために、それらはアニメーション化されます。
そのようなアニメーションがどのように作成されるか、どのプログラムで作成されるか、アニメーション開発のどの段階が存在するか、そしてなぜそれらが一般的に必要とされるのかを説明します。
それでは、始めましょう！
まず、アニメーションとは何か、どのような種類のアニメーションが存在するかを定義しましょう。
簡単に言えば、アニメーションは画像に命を吹き込む一連のフレームです。フル（フルアニメーション）と簡易（リミテッドアニメーション）に分かれています。フルアニメーションの例としては、ディズニーのアラジン、ジャングルブック、リトルマーメイドなどのフルレングスのアニメーションフィルムがあります。簡略化されたアニメーションの例としては、リックアンドモーティ、グラビティフォールズ、エクストリームスペース、等
フルアニメーションの場合、1秒あたり24〜25フレームのタイミングで描画され、キャラクターや環境などの細部がアニメーション化されます。簡略化されたアニメーションでは、1秒あたりのフレーム数が少なくなり、キャラクターや環境の重要でない要素の一部がまったくアニメーション化されず、静的なままになる場合があります。インターフェイスであれ漫画であれ、アニメーションを作成する際には、これらの原則に従う必要があることに注意してください。
シンプソンズの漫画の例を使用した完全で簡略化されたアニメーション
ご覧のとおり、スプラッシュスクリーンのフルレングスバージョンでは、アニメーションがよりスムーズで詳細になっていますが、ショートレングスのオープニングでは、フレーム数が減り、キャラクターの詳細がアニメーション化されていないことがわかります。
私たちはアニメーションが何であるかを理解しました。ここで、次の質問に進むのが論理的です。UIで使用するアニメーションのタイプは何ですか。そして、彼女も必要ですか？
最初に2番目に答えます。アニメーションが必要ですか？ウィンドウが開いた、賞品を受け取った、ボタンが押されたなど、すべてが明確に見えます。どんな種類のアニメーションを使うこともそれほど重要ではありませんよね？
確かにそのようではありません。アニメーションのおかげで、ゲームのビジュアルコンポーネントを多様化できるだけでなく、ユーザーが画面上で何が起こっているのか、どこをクリックするのか、どのアクションを実行するのかを理解するのに役立ちます。これは、ゲームでUIアニメーションを使用する主な理由の1つです。つまり、現時点で最も重要な要素にプレーヤーの注意を引くためです。
2番目の理由は、全体的なダイナミクスとプレイスタイルを表示するアニメーションの機能です。 UIアニメーションは、ゲームのダイナミクスと一致する必要があります。これは、さらに大きな没入感に貢献します。ペースの速いゲームで遅すぎるアニメーションを使用すると、プレーヤーを苛立たせ、全体的なエクスペリエンスに影響を与えます。
使用するアニメーションの種類は、リソースと機能にのみ依存します。あなたとあなたのチームが完全なアニメーションの実装に余裕があり、ゲームの視覚スタイルがそれを可能にする場合は、そうする方が良いです：それははるかにジューシーでより美しくなります。それ以外の場合は、簡略化されたアニメーションを使用することをお勧めします。
同じポップアップの例を使用して、完全で単純化された最小限のアニメーションでどのように見えるかを見てみましょう。
フルアニメーション
簡略化されたアニメーション
最小限のアニメーション
UIアニメーションを作成するのは誰か、開発プロセスはどのように機能するか
通常、アニメーションの開発には3人の関係者がいます。
- デザイナーまたはアーティストがアニメーションリファレンスを作成します。
- テクニカルデザイナーは、この参照をゲームエンジンに転送します。
- プログラマーは、特定のトリガーに従って、適切なタイミングでアニメーションを表示します。
スタジオが特にアニメーターを雇うこともありますが、多くはありません。通常はデザイナーで十分です。
アニメーションの作成は、考える、参照を作成する、実装するという3つの段階に大別できます。
第一段階：アイデア
アニメーションを画面上で起こっていることに有機的に適合させるには、アニメーション化する必要があるものと、アニメーションの前後に何が起こるかを決定する必要があります。
上記のポップアップアニメーションの例を使用して、アニメーションを作成するプロセスを段階的に見ていきましょう。
作業の開始時に、同様のトピックとスタイルに関する調査ゲームを実施し、次に、参照として使用する最も成功した興味深いオプションを選択します。したがって、私たちは時間を節約し、ホイールを最初から作り直すのではなく、私たちの前にすでに行われたことから始めます。次に、アニメーションオブジェクトで何が起こるかを詳細に説明します。これは、重要なことを忘れないようにするため、およびドキュメントをさらに作成するために、主に自分自身のために行われます。
次のポップアップを例として取り上げ、その上でのアニメーション作成のシーケンス全体を分析してみましょう。
アイデアを簡単に説明しましょう。
- ゲームにプレーヤーが長期間不在だった後のポップアップの出現。
- スムーズでありながら十分に速いアニメーションを作成します。
- フルフレームアニメーションを使用します。
- 各要素をアニメーション化します。
- 恐竜の大砲をアニメートします。
- 恐竜の下にアニメーションの輝きを追加します。
目標が明確になり、明確に定式化されたら、第2段階に進むことができます。
2番目のステップ：参照を作成する
独自のアニメーションリファレンスを作成します。これは、さらにデモンストレーション、改良、変更されます。
このために、Adobe Animate、After Effects、Spineなどのプログラム。この段階では、どのプログラムでアニメーション化するかは重要ではないため（このエディターには多くのエンジンにアニメーションがエクスポートされるため、Spineは例外です）、より便利で高速なものを選択します。 Photoshopで要素をフレームごとにアニメーション化することもできますが、これはすでにエキゾチックです。 After Effectsはアニメーションの点で最も柔軟なエディターであるため、私はAfter Effectsでの作業を好みます。つまり、思いついたほとんどすべてのアイデアを実装できます。
すべてのUI要素が適切に動作するように、タイミングを考慮することを忘れないでください。非同期化、遅延なし、正しい順序で。
アニメーション自体の長さを忘れてはなりません。たとえば、ウィンドウの表示に1秒以上かかり、ゲーム内で頻繁に表示される場合、プレーヤーはすぐに引き出されたアニメーションに飽きてイライラします。同時に、要素の出現が非常にまれであり、このイベントがプレーヤーに喜びをもたらす場合（たとえば、チェスト、賞品、またはアチーブメントを受け取る）、外観のアニメーションをより長く、よりカラフルにすることができます。
ステージ3：実装
ここでは、リファレンスで使用されているすべてのグラフィックを最適化します。スライス粒子、グロー、背景、恐竜、その他の小さなもの、つまりすべての視覚効果です。
最適化されたスライスの例
プロジェクトには他にも多くの要素があり、すべてのメガバイトが重要であるため、このような要素のスライスは、最終的なアニメーションのサイズを縮小するために必要です。スライスされた要素を最適化しないと、美しいアニメーションが遅くなる状況が発生する可能性があります。その後、ゲームを開発したエンジンのアニメーターを使用して、リファレンスステージで行ったのと同じアニメーションを繰り返します。
エンジンですべてを一度に実行できないのはなぜですか？答えは明らかではありませんが、非常に単純です。たとえば、After Effectsでアニメーションを作成する場合、アニメーションプログラムとその機能しかありません。UIに正しく表示されるように、ゲーム内でカメラを構成する必要はありません。グラフィックを最適化し、すべてをコンポーネントに分割する必要はありません。要素を簡単に置き換えたり、アニメーションを完全に再考して完全に変更したりすることもできます。ゲームエンジンですべてを一度に作成すると、ファイルの最適化に多くの時間を浪費し、技術的に圧迫され、最初の段階でアニメーション用のグラフィックをスライスするのに多くの時間を費やしますが、最終的には完全に異なることが判明する場合があります。
結論
最後に、資料を要約し、いくつかの短いヒントを示します。アニメーションを扱うときは、事前によく考え、タイミングを観察し、可能な限り完全なアニメーションを使用し、他のプロジェクトのアニメーションを参照して参照することを忘れないでください。
この記事を楽しんだら、次の記事では、UIでディズニーアニメーションの原則をどのように使用できるかについて計画しています。原則自体について詳しくは、こちらをご覧ください。