The falling sand Bevy app is available to mess around with! (and how I got it on the website)
dfebs
For those who just want the goods, here’s the main attraction.
In my last post, I talked about the falling sand experiment I made with Rust’s Bevy library. I planned to get it to work on the website but I had a feeling it would be a headache. Turns out it was exactly enough of a pain for me to not immediately give up on it!
The rest will just be going into the technical details for the curious. For those who don’t care about the tech stuff, this is effectively the end of the post!
Essentially, it boils down to the following steps:
- Utilize
wasm-bindgento generate the files needed to run the game in the browser. - Create a script that launches the
.jsfile generated from the previous step. - Create an HTML file that wraps around the script.
- Place all of the above files together somewhere that can be accessed publicly in my website, then point to the HTML . This HTML file is the one I linked to above.
Here’s some details on the steps:
Utilizing wasm-bindgen to generate files
I utilized the bottom portion of the Unofficial Bevy Book which talks about wasm-bindgen. If you have a project that utilizes Rust and Bevy and follow the instructions you should be good. I should mention though that when running the wasm-bindgen command, it is not made clear in the linked book (at least at the time of writing) that you need to point to the .wasm file that is generated in the wasm32-unknown-unknown folder generated by the previous cargo build command. So for example, you’d want to run something similar to this:
wasm-bindgen --out-dir ./out/ --target web ./target/wasm32-unknown-unknown/release/falling_sand.wasmThis should generate the files (in this case inside the out directory) for the next step.
Creating a script to launch the .js file from the previous step
Inside the out folder generated from the last step, a collection of files should exist. The one we care about is the .js file. It will most likely have its own name based on whatever the name of the project is. What I did here was create a new file in that folder with an init_game.js that has just the following:
import init from './falling_sand.js';
init();…and that’s it! Well, for this step. The falling_sand.js will need to be replaced with whatever the .js file is in your case.
Create an HTML file that wraps around the script created above
From there, create an HTML file. It can be super bare bones, or you can get fancy with it. I’ll start with bare bones:
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<script type="module" src=./init_game.js></script>
</body>
</html>Note that the init_game.js script (the two-line script) that we created is located in the script tag. The following is a fancy approach I did with the falling sand game:
<html>
<head>
<meta charset="UTF-8" />
<style>
body {
background-color: black;
}
p {
color: white;
}
</style>
</head>
<body>
<p>Space: Change your brush to a different block type. The order is Sand (initial), Water, Solid</p>
<p>Left click: Place block</p>
<p>Right click: Delete block</p>
<script type="module" src=./init_game.js></script>
<script>
function modify_initial_canvas () {
const canvas = document.querySelector('canvas');
if (canvas) {
canvas.oncontextmenu = function(e) {
e.preventDefault();
e.stopPropagation();
}
}
else {
setTimeout(modify_initial_canvas, 300); // try again in 300 milliseconds
}
}
modify_initial_canvas();
</script>
</body>
</html>This fancier approach solves the problem I was having where right clicking was causing the context menu to pop up when trying to right-click in the game. In addition, I have some style stuff there too. Also as an irrelevant note, this is HTML file is different from the actual falling sand HTML because I realized there was some styles I didn’t even need.
Place the files somewhere your website can access and link to it
The title says it all. All you need to do at this point is put the files somewhere that your website can access and link to. In my case, I put it along with my public WordPress media files. This involved going into my web server files and looking to see where my public media is located and how the website links to them. Then, I linked to the HTML file in the same way. There may be a better way of doing this, but this will at the least give another approach that could be useful for certain situations. At the end of the day, if you can provide a mechanism to open the HTML file, you’re good to go.
Anyway, that’s about it! That was a lot of stuff. If you’ve gotten far, I hope this helps. If I keep doing Bevy stuff, I at least know future me will appreciate it.