top | item 14411328

Show HN: A WebAssembly game demo

251 points| rossisred | 8 years ago |funkykarts.rocks | reply

108 comments

order
[+] rossisred|8 years ago|reply
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.

[+] markdog12|8 years ago|reply
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?
[+] mysterydip|8 years ago|reply
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?
[+] zengid|8 years ago|reply
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)?
[+] swah|8 years ago|reply
Its very crazy how well this runs compared to the Js games we tried... why is that?
[+] valuearb|8 years ago|reply
Why doesn't it load in Safari or Chrome for Mac?
[+] sova|8 years ago|reply
You're a king
[+] Retr0spectrum|8 years ago|reply
Just a heads up, I find the font+background colour combination on that page very hard to read.
[+] dccoolgai|8 years ago|reply
This represents simultaneously everything that makes me hopeful about WASM - a really clean, fun and nice game that performs super well - and everything that makes me dread it. I was curious so I opened up https://www.funkykarts.rocks/demo.wasm and there's nothing there that I can really read and learn from. I'm not saying it isn't worth making the trade, but it seems like a fundamental change to a part of the web I really loved - the ability to read and learn from things you experience that are cool - that doesn't seem to be considered very much and it makes me a little sad to see its inexorable end spelled out. I think I'll soon miss the days where we all had to show each other our code on the web.
[+] shurcooL|8 years ago|reply
Don't you still have that place, for example GitHub, where open source code lives in non-minified, non-obfuscated form, together with a README, an issue tracker, etc.?

Why do you need to rely on the production binary to be human readable? Should web developers be forced to open source all their work, whether they want to or not, because of technical limitations of the web implementation?

> I think I'll soon miss the days where we all had to show each other our code on the web.

All of my code is open source, you're welcome to look at it. That's not changing because WebAssembly is coming out.

[+] hackcasual|8 years ago|reply
In some cases its due to how new WASM is and the fact that nothing beyond a bare bones debugger experience was considered needed for the MVP. I'm not sure WASM is worse than the general state of web source availability. At least strict typing gives more hints about the underlying code in a disassembly.

That said, WASM may make things better in the future at least when it comes true open source. It's a pretty clean output target, making things like verified builds a possible extension.

Once better debugging support lands, sites can opt in to providing fully mapped output->source code as part of the debug metadata allowing a functional view source.

[+] bluetwo|8 years ago|reply
Yes, a throw-back to the days of Flash in some ways.

"Can you update these files?"

"Sure, can you give me the source code?"

"I gave you the source code."

"No you didn't. I can't edit these."

"Well it's all I've got."

[+] akavel|8 years ago|reply
Isn't readability already killed by minifiers? Not sure what's the status on the wide web, but I know at least at my employer we're using them, and it sounds they're something popular and well established?
[+] johnfn|8 years ago|reply
Really? Go to google or Facebook and tell me any of that source is readable. :)
[+] shams93|8 years ago|reply
Yeah when I use webpack all you can see is all the code compressed into one line, about as helpful as reading binary, its really a matter of sharing the source code, most mobile users which are the majority can't even view source anymore. That aspect of the web is dying due to things like webpack and webassembly, but github offers a better alternative than "view source" these days.
[+] db48x|8 years ago|reply
You'll have the same problem with minified JS too. If your browser's dev tools don't clean it up for you then you need a better browser. Obviously everyone _should_ be using source maps, but you can't rely on that.
[+] snipethunder|8 years ago|reply
Did you ever try to decompile your iOS or Android app to learn from them. As a mobile developer, I never learn things this way.
[+] nathcd|8 years ago|reply
The text format (.wast/.wat) should be derivable from the source (though I've no idea how to do this). From [1]:

> The design goals for a WebAssembly text format derive from the following use cases:

> View Source on a WebAssembly module, thus fitting into the Web (where every source can be viewed) in a natural way.

[1] http://webassembly.org/docs/text-format/

EDIT: looks like this [2] can convert between binary and textual format.

[2] https://github.com/WebAssembly/spec/tree/master/interpreter/

[+] baby|8 years ago|reply
This is amazing, and it runs soooo well.

At the same time it makes me miss Flash.

I know it's easy to hate on flash, it was kinda buggy/slow and it was also crazily insecure. But the web really got interesting with flash, people were creating games, animations, interactive websites.

All the websites are pretty static/flat nowadays. Even if from a design point of view they might look "nicer", I liked the Flash era.

[+] inDigiNeous|8 years ago|reply
Definitely runs well. Silksmooth even on my older 2010 MacBook Pro with a recent Firefox on Os X.

Would he happy to hear more on how they compiled from their custom engine to this webasm target.

[+] DarkTree|8 years ago|reply
Seems to load and run faster than most webpages. Really cool and a promising example of WebAssembly
[+] shurcooL|8 years ago|reply
Wow, that is a really well polished, completed, and neat little game. Makes for a great WebAssembly demo given how quickly it loads and how much value you get out of it.

It runs and looks fantastic at 2560x1600 fullscreen too (on a laptop made in 2011).

[+] hashhar|8 years ago|reply
This looks amazing and is buttery smooth. Loads and runs faster than most webpages even. Takes even less than 10% of my CPU (i5-5200U). Really excited about what WebAssembly brings to the table. But sadly the WASM is an opaque format and I couldn't learn anything about the demo.
[+] Retr0spectrum|8 years ago|reply
What engine/tools was this made with?
[+] z3t4|8 years ago|reply
The game looks good. But I'm a bit skeptical of web-assembly after the flash era, where games did all kind of nasty stuff. I know "it's just javascript" but I feel unease having a binary blob of code running on my machine, at least with "javascript" you can view the source code. I do have JavaScript disabled by default btw. I also know that png images are also binary blobs, yet I allowed them, even though there have been exploits, but I feel that png rendering is more hardened, and can do far less, then web-assembly.
[+] opendomain|8 years ago|reply
Web Assembly is NOT javascript. It literally is assembly for the web. There are transpilers that converts higher level code (C#, Go, Python) to Web Assembly, but the end result is always byte code that is run by the browser.

You may be confused with ASM.Js, which IS javascript. It is a very optimized version that uses a similar idea of a CPU instruction set (get register, add, branch on flag, push on stack, etc), but it still is interpreted. ASM.Js is very fast and also has some transpilers, but it is very different from Web Assembly.

Web Assembly has the highest potential. High potential for speed, calculations, AND RISK. The threat model for Web Assembly has not been tested as well as Javascript.

[+] swolchok|8 years ago|reply
> at least with "javascript" you can view the source code

minified and/or optimized JavaScript is generally not human-readable. Try view source on some major websites.

[+] michaelscott|8 years ago|reply
A good parallel to Web Assembly is just straight OS Assembly, as opposed to Flash. Any concerns you have around Web Assembly could be applied to regular Assembly as well (not saying that you don't already do this, but it's good to clarify).

That said, there are indeed security concerns with Web Assembly that are and will need to be addressed, as it runs way closer to the metal and has access to direct memory.

[+] pjmlp|8 years ago|reply
Apparently FF nightly already has support to show WebAssembly, but it will be no different than looking at straight Assembly.
[+] seanwilson|8 years ago|reply
Do you not think you're being overly paranoid? It's not practical to inspect all the code you run for security exploits.

I could understand if, say, Chrome had many actively exploited security holes like things were in the Internet Explorer days but I wouldn't say this is the case now.

[+] wutbrodo|8 years ago|reply
> at least with "javascript" you can view the source code.

Functionally speaking, are you able to read minified JS?

[+] REEKAH|8 years ago|reply
Speaking of WebAssembly and games, has anyone tried building their Unity projects in WebGL and exporting in Web Assembly? I hear they have that feature in the latest 5.6 version
[+] TheRoccoB|8 years ago|reply
Yes. It works well, although I paid for a fancier demo and exported it, and it crashed occasionally.

They've done a pretty good job with compressing the assets too. Good weissman score.

[+] irrlichthn|8 years ago|reply
It works nicely, your users have to download a ton of data, though. Long loading times. For nicer results, use something lightweight like CopperCube, or use a hand written lib like three.js.
[+] sofaofthedamned|8 years ago|reply
That is so smooth and beautiful, physics are great too. Nice!
[+] shodan757|8 years ago|reply
I just get "Sorry, but your browser does not yet support WebAssembly."

I'm on Firefox/Linux. Other WASM demos work, so I'm pretty sure that's a bug. :)

[+] freekh|8 years ago|reply
Works flawlessly on my Firefox 53 (and Chrome) on (Arch) Linux.
[+] rossisred|8 years ago|reply
Thanks for the heads up, that is curious. I don't have access to a linux machine at the moment, but will investigate later. There should be some output from binaryen in the JavaScript console, does it report success?
[+] Tistel|8 years ago|reply
very nice. I like the wall jump mechanic.
[+] faitswulff|8 years ago|reply
Looks great, and it's snappy! Is "Dartmobile" a reference to Dart the programming language? It's the same color scheme :p
[+] bobajeff|8 years ago|reply
It doesn't seem to load right in my Nexus 6 Android Chrome 58.

Only the bottom left of the canvas is showing the game the rest is a lite blue box.

Edit: however it displays correctly in Firefox 53.0.2 (Android) on the same phone.

[+] alexpw|8 years ago|reply
My mbp fans kicked into overdrive, reminding me that this is a browser game, but otherwise, I echo the sentiments that it loads fast and is really fun.
[+] lkurusa|8 years ago|reply
Interesting, wish it was also written in traditional JavaScript, so the performance could be crosschecked. Thanks for the game, most enjoyable!
[+] zokier|8 years ago|reply
Background music does not work for me (Fx/Win10). Devtools console says "Unsupported sample rate : 48000"