WebAssembly(c++)でニコ生ゲームを作ろう　その2

その1での予告通り今回はマルチプレイゲームでwasmを実行する方法についてまとめる。

サーバー向けビルド
wasm読み込み
まとめ

サーバー向けビルド

以前の記事でも書いた通りマルチプレイモードのゲームではサーバー上でもゲームが1つ動いている。このサーバーは恐らくnodeサーバー（？）なので、サーバー用wasmバイナリというものを別途作成して実行する必要がある。

普通にjavascriptでマルチゲーム作っている時も、DOMやキャンバス、window.addEventListener()などブラウザでしか使えないAPIを使う場合は、サーバー側でこれらが実行されないように処理を分けると思うがそれと同じことである。ただし、wasmの場合はemscriptenのビルド結果のjsファイルにWebGLやキャンバス処理などがエクスポートされるので、サーバー/クライアント兼用のスクリプトにするのが難しい。それでファイルごと分けざるを得ないということだ。

サーバー用ビルドをするにはemccのビルドオプションでターゲット環境をshellにする。ただし、ここはかなり怪しい。本来nodeでいいはずだと思うのだがそれだとニコ生で動かなかったのでshellにしてみたらたまたま動いただけである。実はnodeでもうまくいく方法はあるのかも。

// 前回はweb向けにビルドしていたがサーバー向けはshell
emcc -sNO_EXIT_RUNTIME=1 -sENVIRONMENT=shell server.cpp -o server.js

wasm読み込み

サーバー側だと読み込み方法も変わってくる。

前回はwasmをtextアセットに偽装してfetchで読み込むようにしていたが、以前の記事で書いた通り、nodeサーバーからCDNサーバーへはアクセス権が無いのでfetchで読むことができない。そこで、（やや手抜きな気もするが）wasmバイナリをbase64 エンコードしてjsに埋め込むことにする。デコードする処理も一緒に埋め込むことで、実質バイナリデータをソースに埋め込んでいることになり、CDNサーバーへの通信なしでwasmの読み込みができる。もちろん、もっといい方法が思いついたらこの方法でなくてもよい。

以下に自分の場合の実現方法を書いておくが、あくまで参考である。各自どのような開発環境を構築するかによってそれぞれ異なるだろう。

自作のbase64化プログラムを作成
- 厳密なbase64 エンコードではなくややオリジナル
- テキスト化できれば何でもよい
- 注意点としてakashic export時のminifyで長すぎる文字列リテラルはエラーとなってしまうので、8KBごとに分割すると良い
  const encoded = '8KBの文字' + '8KBの文字' + ...;のようにすればエラーは出なくなった
- 実装例（クリックで展開）
  gist.github.com
makefileのビルドルールにエンコードコマンドを追加
これはemscriptenで生成した.wasmと.jsの.wasmをbase64エンコードしてもう一つの.jsと結合しscriptフォルダにコピーするビルドルール
```
../script/server_wasm.js: $(BIN_DIR)/server_wasm.wasm $(BIN_DIR)/server_wasm.js
    @call $(WASM2JS) $(BIN_DIR)/server_wasm.wasm tmp.js
    copy /y /b tmp.js+$(BIN_DIR_FOR_WIN)\server_wasm.js ..\script\server_wasm.js
```
2行目の`$(WASM2JS)`が1.で書いた自作のbase64化プログラムのパス
base64をUint8Array型にデコードしてModule.wasmBinaryにセットする
自分の場合は1.のbase64化プログラムでデコード処理も一緒に出力するようにしている*1
デコードした結果はvar Module = { wasmBinary: decode_bin };というようにModule.wasmBinaryにセットしておくことで、emscriptenがfetchしないで直接このバイナリをロードしてくれるようになる