Thread by @shrm_kingdom

I’m currently working on a poc for my app.

It uses @BevyEngine, @dimforge’s rapier physics engine both compiled to #WebAssembly and #React for the GUI. I had to do some nasty things to make this work. Read below

#rustlang #gamedev #html5 #blockchain #nft #gaming #playtoearn

So first of all there are basically two approaches how you could implement a GUI for your WASM game. Either write it in the same language as the game itself. This would result in it being rendered via WebGL in the same canvas, or you could somehow try to connect a JavaScript lib

I chose the 2nd approach, because it allows me to develop the GUI much faster. I love Rust, but prototyping and reloading cycles are way faster with JavaScript. Bundling that WASM debug file with @webpack takes a painful amount of time, which brings me to another point.

If you know the JavaScript ecosystem, then you probably know that there are hundred tools to fix the same thing. When it comes to bundlers Webpack is probably the most mature one, but there are strong contenders like @vite_js

However @vite_js is incompatible with wasm-bindgen. A library to bridge the gap between Rust and JavaScript. This is very unfortunate, because I think loading times would be much faster.

@vite_js exposes an imported WASM file as a function, which would lazy load it and there is no way to alter this behavior. wasm-bindgen however already generates the code that would be necessary to properly load everything. You would just have to dynamically import it.

wasm-bindgen also allows me to generate the glue code to properly send JavaScript objects to Rust. The function that bootstraps my WASM code gets state objects and setter functions from React so that they can be called from WASM:

github.com/Shroom-Kingdom…

github.com/Shroom-Kingdom…

I’ve been porting an example from the @BevyEngine rapier plugin to WASM. The debug monitor that has been rendered by Bevy is instead rendered with React in the DOM. You can see the result here:

app.shroomkingdom.net

Unfortunately it doesn’t seem to work on iOS and I have not yet had the motivation to attach a debugger from Linux to my iPhone. It just doesn’t sound very appealing, but apparently I have to look into what WebKit is doing there ¯\_(ツ)_/¯

I will next investigate how to dynamically load assets within @BevyEngine WASM. The default behavior would make an HTTP request to fetch the resource. This is not possible in my use case. Instead the user would have to use an HTML input button to select his asset file.