The Bevy Book

Appearance

Wasm/Web 部署 ​

Bevy 可以编译为 WebAssembly，在浏览器中运行。这是让玩家无需安装就能试玩的最快方式。

编译目标 ​

添加 wasm32 编译目标：

console
rustup target add wasm32-unknown-unknown

构建命令：

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

wasm-bindgen ​

wasm-bindgen 将 Rust 编译的 .wasm 文件转换为浏览器可用的 JS + WASM 对：

console
cargo install wasm-bindgen-cli
wasm-bindgen --out-dir ./out --target web ./target/wasm32-unknown-unknown/release/my_game.wasm

产出文件：

  • my_game.js：JS 胶水代码
  • my_game_bg.wasm：WASM 二进制

HTML 入口 ​

创建一个最小的 HTML 文件加载 WASM：

html
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>My Game</title></head>
<body>
  <canvas id="bevy" width="800" height="600"></canvas>
  <script type="module">
    import init from './my_game.js';
    init();
  </script>
</body>
</html>

Bevy 会自动查找页面中的 <canvas> 元素。可以通过 WindowPlugin 配置 canvas ID。

wasm-opt ​

wasm-opt（来自 Binaryen）进一步压缩 WASM 包体：

console
wasm-opt -Oz -o optimized.wasm my_game_bg.wasm

通常能再减小 10%—20% 的体积。

专用构建 profile ​

本书的 workspace 定制了 wasm-release profile：

toml
[profile.wasm-release]
inherits = "release"
opt-level = "z"
lto = "fat"
codegen-units = 1
strip = true

配合 cargo build --profile wasm-release --target wasm32-unknown-unknown 使用。

WebGL2 vs WebGPU ​

Bevy 默认在 Web 上使用 WebGL2（通过 webgl2 feature）。WebGPU 是更新的图形 API，性能更好但浏览器支持尚不普遍。启用 webgpu feature 可以切换。

托管方案 ​

WASM 游戏是纯静态文件，可以部署到任何静态托管服务：

  • GitHub Pages：免费，适合开源项目
  • itch.io：游戏平台，支持 HTML5 游戏
  • Netlify / Vercel：免费额度足够小型游戏
  • Cloudflare Pages：全球 CDN，速度快

调试 ​

浏览器的开发者工具可以查看 WASM 的控制台输出。bevy::log 在 Web 上会输出到浏览器控制台。

Chrome 的 Performance 面板可以分析 WASM 的性能瓶颈。Firefox 的 Profiler 同样支持。