Project Setup (Cargo Make)

Make sure to first read the overview page. It contains important general information.


Cargo Make is a cargo extension that allows defining custom tasks to automate whatever you need. Compared to the wasm-pack approach, it is more automated and convenient for development, but requires more complicated configuration.

This page will show you how to set up a project that supports these features:

  • Can be built for both Web and Desktop (Linux/Mac/Windows).
  • Can easily run either version with a single command.
    • For the web version, it runs a local server and opens in your browser.

To do this easily, we will use bevy_webgl2_app_template. Remember that Cargo Make is a flexible tool, and templates are opinionated. You could write your own configuration, but that is outside the scope of this guide.

The only reason why this page is so short, is because we rely on the template to give us the complicated configuration that Cargo Make requires.

Prerequisites

You need to have support for the WASM target for the Rust compiler. If you are using rustup to manage your Rust installation, you can install it like this:

rustup target add wasm32-unknown-unknown

You also need to install cargo-make. You can do that using cargo:

cargo install cargo-make

Supporting Files

Copy Makefile.toml and index.html from bevy_webgl2_app_template into your project.

Cargo

In your Cargo.toml, we must configure the features and dependencies, in the way that is expected by the template:

[features]
default = [
  "bevy/bevy_gltf",
  "bevy/bevy_winit",
  "bevy/render",
  "bevy/png",
]

native = [
  "bevy/bevy_wgpu",
]

web = [
  "bevy_webgl2"
]

[dependencies]
bevy = {version="0.5.0", default-features=false}
bevy_webgl2 = {version="0.5.0", optional=true}

Main Source File

In src/main.rs, write your main function as follows:

use bevy::prelude::*;

fn main() {
    let mut app = App::build();
    
    app.add_plugins(DefaultPlugins);

    // when building for Web, use WebGL2 rendering
    #[cfg(target_arch = "wasm32")]
    app.add_plugin(bevy_webgl2::WebGL2Plugin);
    
    // TODO: add all your other stuff to `app` as usual

    app.run();
}

Building and Running

To run the web version of your game, you can just run:

cargo make serve

It will start a web server on localhost:4000 and open the game in your browser.

To run the native desktop version of your game:

cargo make run

To simply build the game:

cargo make --profile release build-web
cargo make --profile release build-native

Deploying

To publish your game, you need to create a website. As the bare minimum, you can create a simple HTML file (call it index.html) containing:

<html>
<head>
<title>My Bevy Project</title>
</head>
<body>
<script type="module">
  import init from "./wasm.js";
  init();
</script>
</body>
</html>

The above HTML is just enough to display your game. You can enhance and extend it as much as you want, to make a fancy website.

Upload the following files in the same directory tree as they're generated in, to your web server:

|_ target
|  |_ wasm32-unknown-unknown
|  |  |_release
|  |    |_ myproject.d
|  |    |_ myproject.wasm
|  |_ wasm.js
|  |_ wasm_bg.wasm
|_ index.html