ユーザーを引き付けるためのゲームアニメーションテクニックを盗みます

現代のウェブサイトはアニメーションであふれています - 多くの場合、多すぎます。彼らはコンテンツを乱雑にし、ユーザーをイライラさせることができます。しかし、アニメーションには否定できない魅力があります。彼らはウェブサイトに命を吹き込み、作成するのが楽しく、信じられないほど印象的です。この問題は必ずしも量ではなく、ウェブサイトのコンテンツにアニメーションの関連性です。統合されていないアニメーションは、強制的に感じられ、価値がありません。

この記事では、ユーザーを疎外せずに洗練されたアニメーションを組み込むことを目指して、Web開発者を対象としています。ユーザーのフラストレーションを最小限に抑えながら、魅力的なアニメーションを作成するために使用したテクニックを共有します。 「迷惑なユーザー」は低いバーだと思うかもしれません。そして...あなたは正しいでしょう。

私のアプローチはやや型破りです。 Indie Game Publisher Devolver Digital（Viekoとのコラボレーション）のWeb開発者として、私は開発とデザインの両方に関与しています。当初、私はデザインに苦労しました。 SketchがPhotoshopの実装によく翻訳されることはめったになく、数え切れないほどの再起動につながります。デザインをバイパスしてコードに直接ジャンプしようとする試みは、アニメーションに依存して補償することで、同様に失敗しました。私のデザインスキルは不足していました。

その後、ショートカットを発見しました。

ウェブサイトの概念を提示するとき、私の同僚とクライアントは私のデザインスキルについて絶賛します（そして、私が食べたクッキーを送ります、申し訳ありません！）。私の秘密？

私はビデオゲームから大いに借りています。

ゲームの色、ボタン、モーダルボックス、コアコンセプト、さらにはゲームプレイのメカニズムさえエミュレートします。私はゲームをプレイし（彼らは楽しいです！）、スクリーンショットと映像をキャプチャしてから、…私は…要素を適応させます。最も重要なことは、アニメーションを適応させることです。

ビデオゲームはインスピレーションの豊富なソースを提供しますが、このアプローチは業界全体に適用できます。私にとっては、ゲームアニメーションを適応させると、各Webサイトの完全な潜在能力が解除されました。

インスピレーションのゴールドマイン

Devolver Digitalは、多様なゲームライブラリを誇っています。隠された深みのある視覚的にシンプルなゲーム、Shadow Warrior 3のようなゲーム。各ゲームはプレイヤーをユニークに引き付け、思い出に残る体験を生み出します。このエンゲージメントをウェブサイトで複製し、ユーザーがコントローラーに触れる前に接続を築くためにWebテクノロジーを活用することを目指しています。基本的に、資産、アニメーション、およびメカニックを「借りる」ために、ユーザーにゲームプレイの味を提供します。

ケーススタディ

Harpoonを振るうヒーローに関するゲームであるOlijaから始めましょう。ゲームの視覚的な流動性と物語の深さは、強調すべき重要な側面でした。ウェブサイトは、ユーザーを誘惑し、ストーリーに没頭し、コントロールの感覚を与える必要がありました。

Webサイトは利点を提供します：対話性。これは、マウスの動き、ホーバー、スクロールバー、キーボード入力を通じて活用します。私は彼らの直感的な性質のためにスクロールバーを好みます。

Olijaのデザインには、3つのビューポートの高さにまたがるゆっくりと映画クレジットスタイルのフェードアニメーションが含まれています。これにより、ペースとトーンが設定されます。ダイナミックスクリーンショットのような要素（森を駆け抜けるヒーローなど）を含む後続のセクションは、ストーリーを強化し、ゲームのスタイルを紹介します。スプライトシートに基づいたピクセルアートのアニメーションでは、変換プロパティとともにスプライトシートの位置をアニメーション化する必要がありました。

Ape Outは、アクション映画の感触で、完成したシーンを紹介するWebサイトにインスピレーションを与え、ユーザーが前のアクションを想像できるようにしました。スクロールバーはカメラの探索を制御します。それは3D WebGLキャンバスのように見えるかもしれませんが、実際には3D変換で巧妙に配置されたDivです。

GungeonのWebサイトを入力して、ノスタルジアを使用して関連するゲームを宣伝して、プレイヤーエクスペリエンスを祝います。

ユニークなゲームプレイ要素

シンプルで魅力的なゲームプレイループを備えたループヒーローは、無限にスクロールするWebサイトに影響を与えました。 Scrollbarは戦闘中に一時的に無効にされ、ゲームの進行を紹介します。戦闘の結果は動的であり、再生可能性を追加します。

Boomerang XとShadow Warrior Webサイトは、ゲームプレイ映像を直接統合し、インタラクティブな要素を作成します。 Shadow Warriorのコンテンツは、ゲーム内の影響で揺れます。 Boomerang Xのロゴは、ゲーム内のBoomerangの動きを反映しています。

Devolver Tumble TimeのTumbler Mechanicは、大きな課題を提示しました。 MatterJを使用した最初の試みは失敗しました。最終的に、3JSを使用して、望ましい流動性を達成しました。

より深いダイビング：ファントムアビス

Phantom Abyssのウェブサイトは、4MBのみのウェブサイトで、これらの手法の多くを紹介しています。微妙なアニメーション（シフトブロック、フェージングファントム、アニメーション化された滝、ダスト粒子など）が深さを追加し、ゲームの隠された複雑さを微妙に示唆しています。 SVGATORは、SVG（トーチ、髪、目）のアニメーションに使用されました。

内部からのインスピレーション

これらの例は、アニメーションへのアプローチを強調しています。 Devolver Digitalの多様なゲームカタログは、無限のインスピレーションを提供します（Ragnorium、Heave Ho、およびGato Robotoをチェックしてください）。ミニとスラッジの寿命に関するヴィエコの仕事もこのアプローチを例示しています。

主に、Vercel、NextJS、Framer Motion、React-3ファイバーを使用しています。他の多くのツールは存在しますが、これらはワークフローを簡素化しました。

豊富なツールとテクニックは圧倒的であり、革新ではなく模倣につながります。他の人の仕事を複製することに焦点を当てる代わりに、コンテンツ自体に深く接続されたアニメーションの作成を優先し、ユニークで記憶に残るユーザーエクスペリエンスを偽造する必要があります。

以上がユーザーを引き付けるためのゲームアニメーションテクニックを盗みますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。