Typescripting WASM

Aug 6, 2021ยท

2 min read

Play this article

Notice

There will be no code, whatsoever, in this article. Sorry! I'll even be a small one! But quite a few links for you.

The Article

I been super interested in WebAssembly (WASM) for quite some years, ever after I found Rust. Though, I've never managed to get into Rust - thus not WASM.

Does this have to be true though? Not exactly. I recently found this super language called AssemblyScript. It's like Typescript (TS), but for WebAssembly! Actually it's not quite as scary as it may sound, especially for small scripts.

I decided it was time to optimize my game, and what better way, than to use WASM. I've heard so much great stuff about performance and speed with it.

So, let's get into it!

My game is small, and written in Javascript (JS), and I like to make stuff with it. Even games! Believe me, it's a great experience, I've made quite a few games, most of which can be found on my Github - but that's not important.

Anyways, let's get going.

I've made the game in smaller components, just the way I like it, thus making it easier to switch out any of them if needed.

I had one component which I knew I'd do with WASM instead of plain ol' JS. Namely the dither.js-component.

Before ...

Or rather afterwards, but let's imagine I started by doing this.

... I did a small performance test using the Chrome Dev-Tools, with a 4x CPU slow-down.

Now, I'm not an expert - by any means - in the performance tab of the Dev-Tools, but I can read some numbers.

It ended up with an idle - only number I looked for - time of 291ms, which is fine, but I wanted to do better! So I wrote a dither function in the new AssemblyScript I found.

Then it was time to do another performance test. This time the idle, with the same settings, has gone up to 356ms!

That's an increase of ~22%!

That's it. Thanks for reading!


{ Best, Mads Bram Cordes }

Did you find this article valuable?

Support Mads B. Cordes by becoming a sponsor. Any amount is appreciated!

ย