WebAssemblyのブラウザゲームが起動しない？Wasmの読込と配信を見直す

1. ゲーム全体をWasmにするか、一部の処理だけ使うか

WebAssemblyの公式Use Casesは、ゲームを用途に含め、アプリ全体をWasmで作る形だけでなく、JavaScriptやHTMLと組み合わせる形も示しています。小さな計算処理だけを再利用する構成もあります。Wasmを採用したら、メニューや紹介ページまで同じ仕組みに移す必要があるとは限りません。

この記事の設計提案は、まず重いと疑っている処理の入力と出力を紙に書くことです。盤面探索なら盤面を渡して候補手を受け取り、音声の変換ならサンプルを渡して処理結果を受け取ります。境界が明確なら、JavaScript版と比較しやすくなります。小さな関数を大量に往復させるより、まとまった仕事として呼べるかを考えましょう。

エンジンがWasmを生成する場合は、その起動コードを独自に置き換える前にエンジンの配信手順を読みます。初期化には追加のファイルや設定が関係することがあります。自作モジュールを読み込む話と、既製エンジンの生成物を配信する話を分けることで、修正する場所を絞れます。

2. application/wasmを返しているか確認する

MDNのinstantiateStreaming()資料は、取得するレスポンスからWasmをコンパイルしてインスタンスを作るAPIとして説明しています。配信のMIME型がapplication/wasmでない場合や、宣言したimportと渡した値が一致しない場合は、初期化の失敗につながります。ファイルを置くだけでなくレスポンスも確認する項目です。

次の例は自作モジュールを初期化する部分です。importsはそのモジュールが必要とする項目を用意します。Wasmの形式やエンジンを問わずそのまま貼り付ける雛形ではありません。取得に失敗したときと初期化に失敗したときの記録を分けると、ネットワーク設定の問題とプログラム側の問題を切り分けやすくなります。

async function loadWasm(imports) {
  const response = await fetch('/assets/game.wasm');
  if (!response.ok) throw new Error('Wasmの取得に失敗');
  const result = await WebAssembly.instantiateStreaming(response, imports);
  return result.instance;
}
// application/wasm、importの定義、エラー表示を別途確認する。

3. 待ち時間を四つの段階に分ける

利用者には「準備中」の一言でも、開発記録では取得、コンパイルと初期化、素材の準備、最初の画面の構成を分けます。APIの呼び出しを始めた時刻と完了した時刻を記録し、同じ配信先で初回と再訪を比べます。ここでいう段階は当ブログの観測案であり、内部の全処理を完全に分離して測れると保証するものではありません。

大きなモジュールの取得が主因なら、不要な機能を外したビルドや配信圧縮を検討します。素材準備が主因なら、最初に必要な画像や音に絞る方が効果的かもしれません。原因を確認せず、Wasmの計算部分だけを書き直しても開始までの待ち時間は変わらないことがあります。ネットワークが切れた場合の再試行も、同じ開始経路で確かめましょう。

• Wasmと関連ファイルの取得に成功するか
• MIME型と公開時の設定が合っているか
• 最初の画面までの準備段階を記録できるか
• 失敗後に戻る、または再試行できるか

4. データのコピーと、計算結果の寿命を決める

計算のために盤面を丸ごと渡すなら、配列の形式、長さ、結果の持ち主を決めます。ゲームが進んだ後に古い計算結果が返ってきた場合は、盤面の版や要求番号を比べて採用するか判断します。処理を速くすることと、正しい状態の結果を使うことを一緒に設計する必要があります。

まずは少量のデータで正しい結果を確認し、次に通常の量、最後に負荷の大きい量へ広げます。比較の条件には、呼び出し回数と受け渡す量も書きます。Wasmの導入で読み込みが増えた場合は、その負担と計算時間の改善を同じ作品で評価します。新しい仕組みを追加する理由を「再利用したい処理がある」「確認した負荷を減らせる」のように説明できれば、実装の範囲も決めやすくなります。

盤面探索の例なら、結果が返ったときに要求時の盤面番号と現在の番号を比べる設計ができます。すでに次の手へ進んでいれば古い候補を使わず、必要なら再計算します。この確認は計算の速さに関係なく必要です。数値の比較を始める前に、同じ入力が同じ期待結果になるかと、古い結果を安全に扱えるかを確かめましょう。