[ebiten] Windows+ebiten のゲームをブラウザで動作させるまで

最近、ebitenでのゲーム制作を始めました。PC・スマホ両対応にしたいので、まずはブラウザで動作できるようにして、スマホでの動作確認をします。

以下のサイトが参考になりますが、自分はWindows環境(シェルは git bashを使ったbash)なので、少し手こずりました。その情報を共有します。

WebAssembly - Ebitengine
Ebitengine is an open source game engine for the Go programming language. Ebitengine's simple API allows you to quickly and easily develop 2D games that can be ...

WasmServe でとりあえず動かしてみる

上記サイトのOption 1.ですね。作ったゲームが main.go であるなら、

go run github.com/hajimehoshi/wasmserve@latest ./main.go

と入力し、http://localhost:8080/ にアクセスすればゲームをブラウザで動作させることができます。

ファイルが main.go だけではないのなら、

go run github.com/hajimehoshi/wasmserve@latest .

とかになりそうです。

ちなみに自分が遭遇したエラーなのですが、実行時にその環境の環境変数が長すぎるとエラーになります。

自分は暫定的に、めっちゃ長いけど使っていない環境変数を削除することで対応し、動くようになりました。

コンパイルして wasmファイルを作る

手順に書いてあるとおりに、以下のコマンドを実行します。

env GOOS=js GOARCH=wasm go build -o yourgame.wasm .

こんな感じのコマンドで wasm ファイルを生成します。github.com のパスの部分は自分のプログラムに変えてください。

yourgame.wasm が生成されます。

wasm_exec.js を持ってくる

yourgame.wasm はそのままでは動かず、コンパイルした環境に対応した wasm_exec.js が必要です。

それはGOROOT以下にあるので、

cp $(go env GOROOT)/misc/wasm/wasm_exec.js .

というコマンドで取ることができるのですが、自分のWindows環境ではハマりました。

$ go env GOROOT
C:\Program Files\Go

パスがこの形式で帰ってきてしまうし、空白を含んでいるので、そんなパスないよと言われてしまいます。

仕方ないのでベタ書きしましょう。

cp "C:/Program Files/Go/misc/wasm/wasm_exec.js" .

これで良いです。

HTMLファイルを作る

上記サイトの Creating an HTML に書いてあるとおりのHTMLファイルを作り、yourgame.wasm をwasm_exec.js と同じディレクトリに置きましょう。

MIMEタイプを変更する

それらをHTTPサーバーに置いて配信すれば良いのですが、自分の環境では以下のエラーが出ました。

192.168.0.4/:1 Uncaught (in promise) TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.

wasm ファイルは application/wasm のMIMEタイプであることが求められているのに、別のタイプになっているようです。

今回、自分の立てたHTTPサーバーはnginx を使っていたので、設定ファイルを追加して対応しました。

/etc/nginx/conf.d/mime.conf

types {
    application/wasm wasm;
}

拡張子 wasm のファイルは application/wasm として配信するように設定します。

apacheなどの場合は、.htaccessに記載すれば良いと思います(やり方は違うので、調べてください)。

これでゲームが無事動作しました!