マインスイーパーをモチーフにした近接ゲームです。
squoosh.app を提供したチームが戻ってきました！今回は、PROXX（proxx.app）というウェブベースのゲームを作成しました。PROXX は、伝説のマインスイーパー ゲームにヒントを得た近接ゲームです。このゲームは宇宙を舞台に、ブラックホールがどこにあるのかを突き止めることです。デスクトップからフィーチャー フォンまで、あらゆる種類のデバイスで動作します。ユーザーは、スクリーン リーダーを使用しても、マウス、キーボード、D-pad を使用してゲームをプレイできます。
ベースライン
このゲームを作成する前に、アプリケーションについて次の目標と予算を設定しました。
- コア エクスペリエンスが同じ: すべてのデバイスが同じように機能する必要がある
- ユーザー補助: マウス、キーボード、タップ、D-pad、スクリーン リーダー
- パフォーマンス:
- 25 KB 未満の初期ペイロード
- 低速の 3G で 5 秒の TTI（Time to インタラクティブ）
- 一貫性のある 60 fps のアニメーション
ウェブワーカー
ゲームは、4 つのメイン エンティティ、コアゲームロジック、UI サービス、状態サービス、アニメーション グラフィックで構成されています。最初からメインスレッドで大量のアニメーション グラフィックを実行する必要があることはわかっていたため、メインスレッドを可能な限り無料に保つために、ゲームロジックと状態サービスをウェブワーカーに移動しました。
ビルド時のプリレンダリング
UI は Preact で構築されています。これにより、25 KB 未満の初期ペイロードでも高い目標を達できます。最初の読み込みをスムーズに行うために、最初のビューを事前レンダリングすることにしました。ビルド時に Puppeteer を使用して事前レンダリングを行い、トップページにアクセスし、事前に DOM にデータを入力できるようにします。作成された DOM は HTML にシリアル化され index.html として保存されます
アニメーション用のキャンバス、ユーザー補助用の（非表示）DOM
ゲームのグラフィックは、WebGL を使用してキャンバスにレンダリングされます。1 つのキャンバスが背景のアニメーションを担い、もう 1 つのキャンバスが上のゲームグリッドに使用されます。また、ユーザー補助機能用のボタンを含む HTML テーブルも用意しています。この表は、両方のキャンバスの上にありますが、非表示になっています（不透明度: 0）。ゲーム状態のキャンバス レンダリングが表示されていますが、プレーヤーは非表示の DOM テーブルを操作しているため、イベント リスナーをアタッチしてブラウザのフォーカス管理を利用できます。
DOM 要素をキャンバス内に維持することで、ブラウザに組み込まれているユーザー補助機能を活用できるようになります。たとえば、ゲームテーブルに role="grid" を設定することで、スクリーン リーダーは、実装しなくても、フォーカスされたセルの行と列を読み上げることができます。
バンドルとコード分割のためのロールアップ
アプリの合計サイズは gzip で 100 KB になります。このうち 20 KB は初期ペイロード（index.html）用です。このプロジェクトには Rollup.js を使用します。メインスレッドとウェブワーカーの間で依存関係を共有しています。Rollup では、これらの共有依存関係を別のチャンクにまとめ、1 回だけ読み込むことができます。webpack などの他のバンドラは共有依存関係を複製し、二重読み込みが発生します。
フィーチャー フォンのサポート
KaiOS スマートフォンなどのフィーチャー フォンは急速に普及しています。これらはリソースに限りがあるデバイスですが、可能な限りウェブ ワーカーを使用するというアプローチにより、これらのスマートフォンでも高い応答性を実現できるようになりました。フィーチャー フォンでは入力インターフェースが異なるため（D-pad と数字キー、タッチスクリーンはなし）、キーベースのインターフェースも実装しました。
次のステップ
Google I/O 2019 に間に合うよう、このゲームの作成は素晴らしいものでしたが、忙しい時間でした。そのため、十分な時間をお休みしますが、ゲームのこれらの各領域について、より詳細なドキュメントをもう一度提供する予定です。
それまでの間、Mariko が I/O でこのプロジェクトについて行った講演をご確認ください。
コードは proxx GitHub リポジトリで参照できます。
乾杯！Surma、Jake、Marico