Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

Hello,

I have also been taking notes while building this here:

http://www.rossis.red/wasm.html

I'm happy to answer your questions about it.



Very nice write-up, thanks!

BTW, I also ran into issues with ScriptProcessorNode when generating audio, and ended up using `createBufferSource` with a scheduled playback time. I wrote a little about it here: https://binji.github.io/2017/02/28/binjgb-on-the-web-part-2....


Thanks for sharing! Your article is what I was looking for and didn't find when I was working on the audio :) That is an interesting approach which I will definitely try.


Really cool project. Just tried on my Moto E 2nd gen with Chrome and it was smooth as butter. Are you storing images as svg inside the wasm blob? Seems like you're not batching draw calls? Was the Dart app not fast enough?


The 2D elements (menu buttons, background trees, etc...) enter the game's editor as SVG, where they get converted to an intermediate vector format that is optimized to be loaded and rendered fast. That intermediate format is what's inside the wasm blob.

Regarding draw calls, I could definitely batch more than I do. But the game is rarely draw-call-bound so I haven't had a reason to optimize that part of the graphics pipeline.

Dart is still used in the game's editor, which has been stable for a couple of years now. For the production engine, C++ just makes too much sense. It is what made this WebAssembly demo possible :)


Is it a custom vector format? Are the vectors rendered on the gpu?


Yes, it is a custom format. The paths are "triangulated" on the CPU once and the resulting triangles are uploaded to the GPU for subsequent draw calls.


Thanks for sharing, I'll have to digest all of it. How has your experience on the app stores been? Have you seen the conversions you were expecting? How do you plan to continue the freemium model in its web form?


I plan to keep the web version as a demo for now. It contains the first 4 levels of the game, and after you beat the 4th level it will ask if you'd like to continue to the various stores (App Store if you're on iOS, Play if you're on Android, else Steam).

My experience on the stores has been good, people who play the game seem to enjoy it. The hard part has been discovery :)


Your game is amazing! I'm particularly intrigued by the 3D-ness of the sprites and how smooth all of the animation is. Can you suggest any resources for learning more about the process of making similar content (without giving away your secret sauce, of course)?


Thanks! The characters are regular 3D models. The 2D elements are where the game differs from a lot of other games. If you use vector graphics the size of your assets will decrease dramatically, and your game will be resolution independent.

Regarding animation, this is a good resource to get started: http://robertpenner.com/easing/


Its very crazy how well this runs compared to the Js games we tried... why is that?


That is a difficult question to answer as there are many factors involved, not just the choice of language. JavaScript can be really fast, but WebAssembly may provide more predictable performance and faster loading times. The project website is a good resource to learn about the differences: http://webassembly.org


Why doesn't it load in Safari or Chrome for Mac?


It should work in Chrome 57 or higher or in Firefox 52+. Support in Safari is not yet released as far as I am aware.


I have Chrome 58. Wasn't working yesterday, works today.

Also, your page now says "Sorry your browser does not support WebAssembly" in Safari, yesterday it didn't.


You're a king


Just a heads up, I find the font+background colour combination on that page very hard to read.


I second that claret / green combo is a no go, I thought page was broken.


Sorry, I got a bit carried away on the colors. I've made a few quick style tweaks that hopefully make it easier to read.




Consider applying for YC's Winter 2026 batch! Applications are open till Nov 10

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: