PROXX のご紹介

近接するゲーム（マインスイーパー）です。

Mariko Kosaka
X

squoosh.app を開発したチームが帰ってきました。今回は、PROXX（proxx.app）というウェブベースのゲームを作成しました。PROXX は、伝説的なゲーム「マインスイーパ」にインスパイアされた近接ゲームです。ゲームは空間に置かれており、あなたの仕事はブラックホールがどこにあるかを見つけることです。パソコンからフィーチャー フォンまで、あらゆるデバイスで動作します。ユーザーは、スクリーン リーダーを使用する場合でも、マウス、キーボード、D-pad を使用してゲームをプレイできます。

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

Google のベースライン

このゲームを構築する前に、アプリの次の目標と予算を設定しました。

  • コア機能は同じ: すべてのデバイスで同じ動作をする必要があります
  • アクセス可能: マウス、キーボード、タップ、D パッド、スクリーン リーダー
  • パフォーマンス:
PROXX を搭載した Google Pixelbook
Google Pixelbook の PROXX。

ウェブワーカー

このゲームは、コアゲーム ロジック、UI サービス、状態サービス、アニメーション グラフィックの 4 つの主要エンティティで構成されています。アニメーション化されたグラフィックをメインスレッドで実行する必要があることは最初からわかっていたので、メインスレッドをできるだけフリーに保つために、ゲームロジックと状態サービスをウェブワーカーに移動しました。

ビルド時のプリレンダリング

UI は Preact で構築されています。これにより、最初のペイロードを 25 KB 未満に抑え、積極的な目標を達成できます。最初の読み込みをスムーズに行うため、1 つ目のビューをプリレンダリングすることにしました。Puppeteer を使用してビルド時にプリレンダリングを行い、トップページにアクセスして、preact が DOM に入力できるようにします。生成された DOM は HTML にシリアル化され、index.html として保存されます。

アニメーション用のキャンバス、ユーザー補助用の（非表示の）DOM

ゲーム グラフィックは、WebGL を使用してキャンバスにレンダリングします。1 つのキャンバスは背景アニメーションを担当し、もう 1 つのキャンバスは上部のゲームグリッドを担当します。また、ユーザー補助機能用のボタンを含む HTML 表もあります。この表は、両方のキャンバスの上に重ねて表示されますが、非表示になります（不透明度: 0）。表示されているのはゲーム状態のキャンバス レンダリングですが、プレーヤーは非表示の DOM テーブルを操作しているため、イベント リスナーをアタッチしてブラウザのフォーカス管理を利用できます。

DOM 要素をキャンバス内に残しておくことで、ブラウザに組み込まれているユーザー補助機能を活用できます。たとえば、ゲームテーブルに role="grid" を設定すると、フォーカスされているセルの行と列を実装しなくても、スクリーン リーダーがフォーカスされたセルの行と列を読み上げることができます。

バンドルとコード分割のローラップ

アプリの合計サイズは、gzip 圧縮で 100 KB になります。そのうち 20KB は 初期ペイロード（index.html）用ですこのプロジェクトでは Rollup.js を使用しています。メインスレッドとウェブワーカーの間に共有依存関係があります。Rollup では、これらの共有依存関係を別々のチャンクに配置できます。このチャンクは 1 回だけ読み込む必要があります。webpack などの他のバンドルツールは、共有依存関係を複製するため、二重読み込みが発生します。

フィーチャーフォンのサポート

KaiOS スマートフォンなどのスマート フィーチャー フォンが急速に普及しています。これらのデバイスはリソースが非常に制限されていますが、可能な限りウェブワーカーを使用するアプローチにより、これらのスマートフォンでも非常にレスポンシブなエクスペリエンスを実現できました。フィーチャー フォンには異なる入力インターフェース（十字キーと数字キー、タッチスクリーンなし）が搭載されているため、キーベースのインターフェースも実装されています。

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

次のステップ

Google I/O 2019 に合わせて、このゲームの開発はとても忙しく、大変忙しくなりました。そのため十分な休息時間を設ける予定ですが、ゲームのこれらの各領域に関する詳細なドキュメントは、今後再び発表する予定です。

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

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

今後ともどうぞよろしくお願いいたします。Surma、Jake、Mariko