Publish your game on the web

Since you can compile a Macroquad game to WebAssembly it’s possible to run the game in a web browser. These are instructions on how to create a web page to run your game. This web page can be published on a web account so that people can play your game directly in the browser without having to download anything.

Install WASM build target

Start by installing the build target for WebAssembly using the command rustup.

rustup target add wasm32-unknown-unknown

Build a WebAssembly binary

Using the WebAssembly target you can build a WASM binary file that can be loaded from a web page.

cargo build --release --target wasm32-unknown-unknown

The WASM binary file will be placed in the directory target/wasm32-unknown-unknown/release/ with the extension .wasm.

Copy WebAssembly binary

You need to copy the WebAssembly binary to the root of your crate, in the same place where the assets directory is placed.

If you have named your crate something else than my-game, the name of the binary will have the same name, but with the file extension .wasm.

cp target/wasm32-unknown-unknown/release/my-game.wasm .

Create an HTML page

You will need an HTML page to load the WebAssembly binary. It needs to load a Javascript file from Macroquad which contains code to run the WebAssembly binary and communicate with the browser. You also need to add a canvas element that Macroquad will use to draw the graphics. Remember to change the name of the WebAssembly binary file in the load() call from my-game.wasm to the name of your game if you have changed it.

Create a file with the name index.html in the root of your crate with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>My Game</title>
    <style>
        html,
        body,
        canvas {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: absolute;
            background: black;
            z-index: 0;
        }
    </style>
</head>
<body>
    <canvas id="glcanvas" tabindex='1'></canvas>
    <!-- Minified and statically hosted version of https://github.com/not-fl3/macroquad/blob/master/js/mq_js_bundle.js -->
    <script src="https://not-fl3.github.io/miniquad-samples/mq_js_bundle.js"></script>
    <script>load("my-game.wasm");</script> <!-- Your compiled WASM binary -->
</body>
</html>

Test the game in a browser

You should be able to start a web server and open the game in a web browser.

Install a simple web server

This is only to be able to test the game locally before you upload it to a proper web hosting account. To serve your game locally on your computer you can install a simple web server with the following command:

cargo install basic-http-server

Run the web server

This command will start the web server and print an address where you can reach the web page. Open your web browser and load the URL, this will be something similar to http://localhost:4000. The game should now run in your browser instead of as a native application.

basic-http-server .

Publish your game

If you have access to a web hosting account, you can publish the files there to let other people play your game. You need to upload the HTML file, the WASM file, and the assets directory.

index.html
my-game.wasm
assets/*

Note

This is a reminder that there are instructions at the end of chapter 1 on how to automatically publish the game on GitHub without using a web account. In that case you need to use the updated deploy.yml from chapter 10 – Graphics.

Agical