優れたHTML5ゲームの作り方 ～ディズニー『オズへの道』ゲーム技術を徹底解説(1)

️そして、最近公開された映画「オズ」の設定を借用し（この設定は古典的な物語「オズの魔法使」から来ており、この映画を見た学生は深く感動するでしょう）、同等の壮大なゲーム世界を構築しています。 。同時に、ディズニーは Google と協力して、Chrome ブラウザのパフォーマンスと HTML5 テクノロジーのショーケースとして利用しました。 WebGL 3D、カメラ、3D効果音など、さまざまな先端技術を使用し、デスクトップ端末やモバイル端末に対応し、品質も優れたこのようなHTML5ゲームにおいて、その実装原理や技術を理解することは、私たちにとって非常に参考になるはずです。 。

ゲーム開発や海外アプリケーションにおける HTML5 の応用を皆さんにもっと理解していただくために、この記事を翻訳したいとずっと思っていましたが、この記事は長すぎるため、読者向けに部分的にしか公開できません。

このチュートリアルは、最近の HTML5 入門記事の中でも難易度は上級と考えられており、ある程度の経験を持つ開発者が読んで学習するのに適しています。

寻寻 「オズ ロードを探して」は、ディズニーが Google Chrome にもたらした新しい体験です。カンザス サーカスを抜け、巨大な嵐の中を通ってオズ王国へ向かうインタラクティブな旅にあなたを連れて行きます。

私たちの目標は、ブラウザーの技術的機能を組み合わせて、ユーザーが映画と強力なつながりを形成できる、楽しく没入型のエクスペリエンスを作成することです。

このゲームの作業は非常に膨大なので、いくつかの章を列挙し、興味深いと思われる技術的な話を書き出すことしかできません。チュートリアルの難易度は、進むにつれて徐々に上がります。

より良いエクスペリエンスを作成するために熱心に取り組んでいるスタッフがたくさんいますが、リストするには多すぎます。ウェブサイトにアクセスして、ページ全体のストーリーを体験してください。

PC 上の「オズ ロードを探して」プレビュー c は没入型の豊かな世界です。 3D と従来の映画制作のインスピレーションを組み合わせて、現実の複数のレイヤーを持つシーンを作成しました。最も顕著なテクノロジーは、Three.js を使用した WebGL の導入であり、CSS3 機能を使用してシェーダーと DOM アニメーション要素をカスタマイズします。これに加えて、getUserMedia API (WebRTC) はインタラクティブなエクスペリエンスを強化し、ユーザーがカメラから直接独自の画像を追加できるようにし、WebAudio は 3D サウンド効果をもたらします。

しかし、このテクノロジー体験の魔法は、すべてがどのように統合されるかです。これは主な課題の 1 つでした。視覚効果とインタラクティブな要素をどのようにブレンドして一貫したシーンを作成するかということです。この視覚的な複雑さは管理するのが非常に難しく、一度にどのシーンを開発する必要があるかを判断するのは困難です。結果 視覚効果と最適化の問題を解決するために、大量のコントロール パネルを使用して、チェックしている時点のすべての関連設定をキャプチャしました。明るさ、垂直深度、ガンマなど、シーン内のすべてをブラウザーでリアルタイムに修正できます。重要なパラメータの値を調整し、参加して何が最適かを発見することで、誰でもこのエクスペリエンスを試すことができます。私たちの秘密を共有する前に、それが崩壊を引き起こす可能性があることを思い出していただきたいと思います。重要なものを閲覧していないことを確認し、Web サイトの URL にアクセスするときに ?debug=on を追加してください。 Web サイトが読み込まれるまで待ちます。アクセスしたら、Ctrl+I を押すと、右側にドロップダウン メニューが表示されます。 「カメラパスを終了」オプションのチェックを外すと、A、W、S、D キーとマウスを使用して空間内を自由に移動できます。

ここではすべての設定について詳しく説明しませんが、試してみることをお勧めします。キーはさまざまなシナリオでさまざまな設定を表示します。最後の嵐のシーンには追加のキー セットがあります: Ctrl+A で、再生中のアニメーションを切り替えます。このシーンで Esc キーを押すと (マウス ロック機能を終了するため)、もう一度 Ctrl+I を押して嵐のシーンの特別な設定に入ります。周りを見回して、以下のような素敵なポストカードを撮りましょう。 私たちへの需要が十分であることを確認するために、Dat.gui という優れたフレームワークを使用しています (過去のチュートリアルの使用方法はここで参照できます)。これにより、訪問者に公開される設定を迅速に変更できます。绘は風景を描くのと少し似ています

多くの古典的なディズニー映画やアニメーションの作成シーンでは、異なるレイヤーを結合する必要があります。外装のレイヤー、ユニット アニメーションのレイヤー、物理設定のレイヤー、およびガラス上にペイントすることで得られるトップ レイヤーがあります。これはマット ペイントと呼ばれる手法です。

静的なビジュアルをはるかに超えたいくつかの「レイヤー」があるとしても、私たちが作成するエクスペリエンスの構造は多くの点で似ています。実際、それらはより複雑な計算に基づいて物事の見え方に影響を与えます。ただし、少なくとも全体像レベルでは、ビューを別のビューに合成して扱います。上部には UI レイヤーがあり、その下には 3D シーンがあり、さまざまなシーン コンポーネントで構成されています。 最上位のインターフェース層は DOM と CSS 3 を使用して作成されます。イベント通信では、バックボーン ルーター + onHashChange HTML5 イベントを使用して、どの領域がアニメーションに応答するかを制御します。 (プロジェクトのソース コード: /develop/coffee/router/Router.coffee)。

。このプロジェクトでは、インターフェイスは 70 を超える画像 (3D テクスチャを除く) で構成されており、Web サイトの遅延を軽減するためにすべてプリロードされています。最新のスプライト シートはここで見ることができます:

通常の表示

Retina ディスプレイ

ここでは、スプライト シートの活用方法、Retina デバイスでの使用方法、およびメイク方法に関するヒントをいくつか紹介します。インターフェイスは可能な限りシンプルで整然としています。 R p スプライト テーブルを作成します

必要なスプライト形式を作成するために TexturePacker を使用します。この場合、非常に優れており、アニメーション スプライトの作成に使用できる EaselJS を採用します。 S 的 生成された Sprite テーブルが生成されると

Sprite テーブルが作成されると、次のような JSON ファイルが表示されるはずです:

{
   "images": ["interface_2x.png"],
   "frames": [
       [2, 1837, 88, 130],
       [2, 2, 1472, 112],
       [1008, 774, 70, 68],
       [562, 1960, 86, 86],
       [473, 1960, 86, 86]
   ],

   "animations": {
       "allow_web":[0],
       "bottomheader":[1],
       "button_close":[2],
       "button_facebook":[3],
       "button_google":[4]
   },
}

その中に:

画像は、スプライトテーブル

フレームは各 UI 要素の座標 [x, y, width, height]

<br> アニメーションは各コンテンツの名前

<br>

高い値を使用していることに注意してください-定義画像を作成してスプライトシートを作成し、画像を半分のサイズにリサイズして通常バージョンを作成します。これを使用するには JavaScript コードのみが必要です。 Re R

<br>

RREEEE

コードの使用方法は次のとおりです:

Rreee

var SSAsset = function (asset, p) {
  var css, x, y, w, h;

  // pide the coordinates by 2 as retina devices have 2x density
  x = Math.round(asset.x / 2);
  y = Math.round(asset.y / 2);
  w = Math.round(asset.width / 2);
  h = Math.round(asset.height / 2);

  // Create an Object to store CSS attributes
  css = {
    width                : w,
    height               : h,
    'background-image'   : "url(" + asset.image_1x_url + ")",
    'background-size'    : "" + asset.fullSize[0] + "px " + asset.fullSize[1] + "px",
    'background-position': "-" + x + "px -" + y + "px"
  };

  // If retina devices

  if (window.devicePixelRatio === 2) {

    /*
    set -webkit-image-set
    for 1x and 2x
    All the calculations of X, Y, WIDTH and HEIGHT is taken care by the browser
    */

    css['background-image'] = "-webkit-image-set(url(" + asset.image_1x_url + ") 1x,";
    css['background-image'] += "url(" + asset.image_2x_url + ") 2x)";

  }

  // Set the CSS to the p
  p.css(css);
};

完全な例をここからダウンロードします。退化ピクセル密度について詳しく知りたい場合は、BORIS SMUS のこの記事を読むことができます。

3D コンテンツ パイプライン

アンビエント エクスペリエンスは WebGL レイヤーの上に構築されます。 3D シーンについて考えるとき、最も難しい問題の 1 つは、モデリング、アニメーション、特殊効果のすべての領域から最高の表現力を備えたコンテンツを確実に作成する方法です。多くの点で、この問題の核心はコンテンツ パイプラインです。つまり、事前に決定されたプログラムを使用して 3D シーンからコンテンツを作成します。

私たちはエキサイティングな世界を作成したいので、3D アーティストがそれを作成できるようにするための信頼できるプロセスが必要です。彼らは 3D モデリングおよびアニメーション ソフトウェアに可能な限り自由な表現を与える必要があり、私たちはそれらをコードを通じて画面に表示する必要があります。 <br>

過去に 3D ウェブサイトを作成するたびに、以前使用していたツールのいくつかの制限が見つかったため、私たちはこの種の問題にしばらく取り組んできました。その後、私たちは 3D Librarian と呼ばれるこの ツールを作成し、実際の作業に適用しようとしていました。

このツールにはいくつかの歴史があります。元々は Flash 用に作成され、解凍ランタイム用に最適化された単一の圧縮ファイルとして大規模な Maya シーンを変換できます。これが最適である理由は、レンダリング時とアニメーション時に操作されるのと本質的に同じデータ構造にシーンを効果的にラップするためです。この方法では、ファイルのロード時に実行する必要のある解析はほとんど必要ありません。ファイルは AMF 形式であり、Flash はネイティブに解凍できるため、Flash での解凍は非常に高速です。 WebGL で同じ形式を使用するには、CPU でもう少し作業が必要になります。実際には、アンパックされたデータの JavaScript コードの層を再作成する必要がありました。これにより、基本的にこれらのファイルがアンパックされ、WebGL に必要なデータ構造が再作成されます。 3D シーン全体を解凍すると、CPU に多少の負担がかかります。ゲームのシーン 1 を解凍するには、中級からハイエンドのマシンで約 2 秒かかります。このため、Web Workers テクノロジーを使用して「シーン設定」時 (実際にはシーンが表示される前) に実装するため、ユーザー エクスペリエンスには影響しません。

この便利なツールは、モデル、テクスチャ、骨格アニメーションなどの 3D シーンをインポートできます。後で 3D エンジンによってロードできる単一のライブラリ ファイルを作成できます。

しかし、私たちはかつて問題に遭遇し、今では WebGL を使用してそれを解決しています。したがって、3D ライブラリを使用して 3D シーン ファイルを圧縮し、WebGL が理解できる正しい形式に変換する特定の JavaScript レイヤーを作成しました。要チュートリアル: 「オズの道を探して」には繰り返しのテーマがあります。プロットの主な糸は、弱い風から強い風までつながっています。

カーニバルの最初のシーンは比較的平和でした。さまざまなシーンを経るうちに、ユーザーは徐々に強風を経験し、最終的には最後のシーンである嵐に到達します。 したがって、臨場感のある風の効果を提供することが重要です。 この効果を実現するために、3 つのカーニバル シーンをテントや風船などの柔らかいオブジェクトで埋めました。

以上が優れたHTML5ゲームの作り方 ～ディズニー『オズへの道』ゲーム技術を徹底解説(1)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。