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.

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with ShroomKingdom

ShroomKingdom Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!

:(