Browser (WebAssembly)

Introduction

You can make web browser games using Bevy. This chapter will help you with the things you need to know to do it. This page gives an overview of Bevy's Web support.

Your Bevy app will be compiled for WebAssembly (WASM), which allows it to be embedded in a web page and run inside the browser.

Performance will be limited, as WebAssembly is slower than native code and does not currently support multithreading.

Not all 3rd-party plugins are compatible. If you need extra unofficial plugins, you will have to check if they are compatible with WASM.

Project Setup

The same Bevy project, without any special code modifications, can be built for either web or desktop/native.

However, you will need a "website" with some HTML and JavaScript to load and run your game. For development and testing, this could be just a minimal shim. It can be easily autogenerated.

To deploy, you will need a server to host your website for other people to access. You could use GitHub's hosting service: GitHub Pages.

Additional Caveats

When users load your site to play your game, their browser will need to download the files. Optimizing for size is important, so that your game can load fast and not waste data bandwidth.

Some minor extra configuration is needed to be able to:

Quick Start

First, add WASM support to your Rust installation. Using Rustup:

rustup target install wasm32-unknown-unknown

Now, to run your Bevy project in the browser.

wasm-server-runner

The easiest and most automatic way to get started is the wasm-server-runner tool.

Install it:

cargo install wasm-server-runner

Set up cargo to use it, in .cargo/config.toml (in your project folder, or globally in your user home folder):

[target.wasm32-unknown-unknown]
runner = "wasm-server-runner"

Now you can just run your game with:

cargo run --target wasm32-unknown-unknown

It will automatically run a minimal local webserver and open your game in your browser.

wasm-bindgen

wasm-bindgen is the tool to generate all the files needed to put the game on your website.

Run:

cargo build --release --target wasm32-unknown-unknown
wasm-bindgen --out-dir ./out/ --target web ./target/

./out/ is the directory where it will place the output files.

You need to put these on your web server.

Higher-level Tools

Here are some higher-level alternatives. These tools can do more for you and automate more of your workflow, but are more opinionated in how they work.