PROXX のご紹介

マインスイーパーをモチーフにした近接ゲームです。

Mariko Kosaka

squoosh.app を提供したチームが戻ってきました!今回は、PROXX(proxx.app)というウェブベースのゲームを作成しました。PROXX は、伝説のマインスイーパー ゲームにヒントを得た近接ゲームです。このゲームは宇宙を舞台に、ブラックホールがどこにあるのかを突き止めることです。デスクトップからフィーチャー フォンまで、あらゆる種類のデバイスで動作します。ユーザーは、スクリーン リーダーを使用しても、マウス、キーボード、D-pad を使用してゲームをプレイできます。

フィーチャー フォンの PROXX。

ベースライン

このゲームを作成する前に、アプリケーションについて次の目標と予算を設定しました。

  • コア エクスペリエンスが同じ: すべてのデバイスが同じように機能する必要がある
  • ユーザー補助: マウス、キーボード、タップ、D-pad、スクリーン リーダー
  • パフォーマンス:
PROXX を搭載した Google Pixelbook
Google Pixelbook の PROXX。

ウェブワーカー

ゲームは、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 と数字キー、タッチスクリーンはなし)、キーベースのインターフェースも実装しました。

黄色のフィーチャー フォンで PROXX をプレイしている男性
フィーチャー フォンの PROXX。

次のステップ

Google I/O 2019 に間に合うよう、このゲームの作成は素晴らしいものでしたが、忙しい時間でした。そのため、十分な時間をお休みしますが、ゲームのこれらの各領域について、より詳細なドキュメントをもう一度提供する予定です。

それまでの間、Mariko が I/O でこのプロジェクトについて語った講演をご覧ください。

コードは proxx GitHub リポジトリで確認できます。

乾杯!Surma、Jake、Marico