9. Building Ebitengine Games for Web Browsers

Watch the associated video on YouTube or MakerTube

Introduction #

In this tutorial we will learn how to build Ebitengine games to run in web browsers.

The code for this tutorial is available here. Please consider donating if you find this tutorial helpful.

WebAssembly is a portable binary code format. It enables us to compile and distribute applications as a single binary file.

We can compile Go applications as a WebAssembly file, which can then be distributed and ran using most web browsers.

The go build and go run commands have two environment variables for setting the compilation target:

By default, we compile an application for the operating system and architecture of the host machine.

For a full list of available GOOS and GOARCH pairs, run the following command:

go tool dist list

Note that while the Go compiler may support a platform, this does not imply Ebitengine also supports the platform.

Refer to Ebitengine’s platform documentation for a list of supported platforms.

We can compile our application as a WebAssembly file by setting the environment variables as follows:

GOOS=js GOARCH=wasm go build -o gettingstarted.wasm

This will compile the application as a .wasm file in the current directory.

If we are using Linux, we can also compile our application for Windows as follows:

GOOS=windows go build -o gettingstarted.exe

This will compile the application as a .exe file in the current directory.

wasmserve is a tool for quickly testing an application targeting WebAssembly.

To install wasmserve, run the following command:

go install github.com/hajimehoshi/wasmserve@latest

This will build wasmserve at ~/go/bin/. Once built, cd in a terminal to the directory of your Go application and run:

wasmserve .

This starts a local web server. Each time we visit http://localhost:8080, wasmserve will build and serve the application.

To test any new code changes, simply refresh the page.

To distribute our game we need three files:

The original files are linked above, but we need to make a few changes to wasm_exec.html before using it with our game.

The updated HTML file is named index.html. This file (and wasm_exec.js) may be found in the web directory.

Once we have uploaded these files to a web server, anyone can play our game using only a web browser.

Note that we can not play our game locally by visiting index.html via a file:// URL. Use wasmserve to test locally.

Stay tuned for the next tutorial, Architecture of the Ebitengine Game Engine.

Please consider donating if you found this tutorial helpful.