WASM is live!

A while back, I started working on a game. I don’t have much experience making video games. I’ve never used Unity or Godot. However, one day, I was drawn to learn the Rust Programming Language by creating games using Bevy - Introduction.

Eventually I made something, and I was pretty happy with my progress. I wanted to show the world! But I ran into an error trying to compile it into a WASM. I kept receiving an error that said a rustup update would fix all my problems— but it didn’t.

Unfortunately, I gave up on the project for months. When I revisited it, I found that which rustup and which rustc varied wildly. I then ran brew list and saw that I had installed rust with brew. So instead of rustc being managed by rustup, it was being managed by brew.

How it should be:
❯ which rustup
/Users/hkievet/.cargo/bin/rustup

❯ which rustc
/Users/hkievet/.cargo/bin/rustc

How it was:
❯ which rustup
/Users/hkievet/.cargo/bin/rustup

❯ which rustc
/opt/homebrew/bin/rustc

Uninstalling rust with brew uninstall rust and freshly installing rustup fixed my issues. Problem solved!

I was able to compile my app by following the documentation at Deployment - The wasm-bindgen Guide and Browser (WebAssembly) - Unofficial Bevy Cheat Book.

Afterwards, I was left with a file structure that looks like

src/lib/components/game
├── hex-game.d.ts
├── hex-game.js
├── hex-game_bg.wasm
└── hex-game_bg.wasm.d.ts

Step 1 complete: wasm file, check! But how to host online? I made a little component in svelte:

<script lang="ts">
	import { onMount } from 'svelte';
	import init from './hex-game.js';

	onMount(async () => {
		let wasm = await init();
	});
</script>

… and added my game’s static assets to src/static/assets in my svelte project.

You can view the final results of a hosted bevy-game-compiled-to-wasm here.

I’m so relieved that I got this to work! I’m excited to start working on this project again.

Useful Resources

Bevy - Introduction

Introduction - Unofficial Bevy Cheat Book

Red Blob Games: Hexagonal Grids