前言#
昨天我们完善和优化了我们的扫雷小游戏
坏蛋Dan：rust基础学习--基于Bevy实现扫雷小游戏day7
今天我们来结合webAssembly将我们的小游戏打包成.wasm的形式，让它可以运行在浏览器中。
构建WASM程序#
关于rust程序如何打包编译成.wasm程序的这一块知识，我之前是有写过相关入门文章的，感兴趣的可以看一下
由于我们的项目是一个workspace，所以里面的crate是需要单独打包的。
我们先来打包board_plugin
回到board_plugin/Cargo.toml文件中
// ...
+ # Dependencies for WASM only
+ [target.'cfg(target_arch = "wasm32")'.dependencies.getrandom]
+ version="0.2"
+ features=["js"]我们只需要bevy的其中一个feature，所以这里我们修改下bevy的依赖。
然后加了一个只会在wasm编译目标下才会加载的依赖rand。
然后回到mine_sweeper中的Cargo.toml文件中
// ...
+ # Dependencies for WASM only
+ [target.'cfg(target_arch = "wasm32")'.dependencies.getrandom]
+ version="0.2"
+ features=["js"]这里额外加了个x11的feature只针对native场景避免编译成wasm有问题。
最后我们回到根目录，在里面创建一个.cargo的文件夹，然后在里面创建config.toml文件。
[target.wasm32-unknown-unknown]
runner = "wasm-server-runner"
[alias]
serve = "run --target wasm32-unknown-unknown"然后执行cargo install wasm-server-runner
然后我们执行cargo serve，会跑一个服务器。
但是这里我跑起来之后发现assets加载不正常，然后搜了下，发现官网就有说
另外官网提供了从零开始的wasm构建：bevy/examples at latest · bevyengine/bevy (github.com)
我们把文件复制过去
然后重新跑一下,然后发现还是没卵用，然后发现路径不对，得是examples/wasm/assets，然后我到wasm-server-runner的github上看了下issue，发现其实它是会自动建立连接的：Add custom static resources · Issue #9 · jakobhellermann/wasm-server-runner (github.com)
那就更怪了，看了下请求，发现是直接在根路径的。。
但是它服务器在哪咱都不知道。。。。
然后我发现有个老哥提了一个commit被merged了：Custom serve directory by daxpedda · Pull Request #19 · jakobhellermann/wasm-server-runner (github.com)
我们可以加一个环境变量WASM_SERVER_RUNNER_DIRECTORY用来定位
我们来设置一下，我这是window的powserShell
$Env:WASM_SERVER_RUNNER_DIRECTORY="D:\vscode\rust-study\game\my_mine_sweeper\target\wasm32-unknown-unknown\debug\examples\wasm\assets"重新运行下cargo serve
终于可以了。
感觉好累，还不如按照之前学的方式，再自己搞个node服务器。。。
总结#
那么我们这个扫雷小游戏旅程就结束啦~
学了一些东西，但是依旧不是系统性的，想自己独立搞一个还是有些难度。
参考#
- ^Bevy Minesweeper: WASM build https://dev.to/qongzi/bevy-minesweeper-part-11-3aim
发布于 2023-02-16 21:53・IP 属地广东