为 Web 构建（WASM）

关于本教程

本教程是免费且开源的，所有代码使用 MIT 许可证——因此您可以随意使用它。我希望您会喜欢这个教程，并制作出很棒的游戏！

如果你喜欢这个并且希望我继续写作，请考虑支持我的 Patreon。

实践中的 Rust

Web Assembly 是一个很酷的系统，可以让你运行从非基于网络的语言编译的代码，并在浏览器中运行它们。它有一些限制：

  • 你是沙盒化的，所以无法访问用户计算机上的文件。
  • 线程在 WASM 中的工作方式不同，因此没有帮助的情况下，正常的多线程代码可能无法工作。
  • 你的渲染后端将是 OpenGL，至少在 WebGL 完成之前是这样。
  • 我还没有编写从网络访问文件的代码，所以你必须嵌入你的资源。教程章节通过各种rltk::embedded_resource!调用来实现这一点。至少，你需要使用include_bytes!或类似的方法将资源存储在可执行文件中。（或者你可以帮我编写一个文件读取器！）

WASM 是用于在您的浏览器中运行可玩章节演示的工具。

为网络构建

制作游戏 WASM 版本的过程比我想要的要复杂一些，但它是可行的。我通常会将其放入批处理文件（或 shell 脚本）中以自动化该过程。

你需要的工具

首先，Rust 需要安装“目标”来处理编译为 WebAssembly（WASM）。目标名称是 wasm32-unknown-unknown。假设你使用 rustup 设置了 Rust，可以通过输入以下命令来安装它：

rustup target add wasm32-unknown-unknown

你还需要一个名为 wasm-bindgen 的工具。这是一个非常令人印象深刻的工具，可以扫描你的 WebAssembly 并构建使代码在 Web 上运行所需的各个部分。我使用命令行版本（有办法将其集成到你的系统中 - 希望这将成为未来章节的主题）。你可以通过以下方式安装该工具：

cargo install wasm-bindgen-cli

注意：当你更新 Rust 工具链时，需要重新安装 wasm-bindgen。

第一步：为 WASM 编译程序

我建议为 WASM 执行release构建。调试版本可能会非常大，没有人愿意在下载一个巨大的程序时等待。导航到项目的根目录，然后输入：

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

第一次这样做时，会需要一段时间。它需要重新编译你用于 WebAssembly 的所有库！这会在target/wasm32-unknown-unknown/release/文件夹中创建文件。会有几个包含构建信息和类似的文件夹，以及重要的文件：yourproject.d（调试信息）和yourproject.wasm——实际的 WASM 目标文件。（将yourproject替换为你的项目名称）

第二步：确定文件存放位置

为了简单起见，我将使用一个名为 wasm 的目标文件夹。你可以使用任何你喜欢的名称，但需要在接下来的说明中更改名称。在你的根项目文件夹中创建该文件夹。例如，mkdir wasm。

第三步：组装网页文件

现在你需要使用 wasm-bindgen 来构建与浏览器集成的所需 Web 基础设施。

wasm-bindgen target\wasm32-unknown-unknown\release\yourproject.wasm --out-dir wasm --no-modules --no-typescript

如果你查看 wasm 文件夹，你会看到两个文件：

  • yourproject.js - 项目的 JavaScript 绑定
  • yourproject_bg.wasm - 包含 JavaScript 文件所需绑定的wasm输出版本

我通常将这些文件重命名为 myblob.js 和 myblob_bg.wasm。你不必这样做，但这让我每次都能使用相同的模板 HTML。

第四步：创建一些样板 HTML

在你的 wasm 文件夹中，你需要创建一个 HTML 页面来托管/启动你的应用程序。我每次都使用相同的样板代码：

<html>
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
  </head>
  <body>
    <canvas id="canvas" width="640" height="480"></canvas>
    <script src="./myblob.js"></script>
    <script>
      window.addEventListener("load", async () => {
        await wasm_bindgen("./myblob_bg.wasm");
      });
    </script>
  </body>
</html>

第五步：托管它！

你不能从本地文件源运行 WASM（可能是出于安全原因）。你需要将其放入一个 Web 服务器，并从那里运行。如果你有网络托管，将你的wasm文件夹复制到你想要的位置。然后你可以在浏览器中打开 Web 服务器的 URL，你的游戏就会运行。

如果你没有网络托管，你需要安装一个本地网络服务器，并从那里提供服务。