14kb WASM game written in D | Hacker News Reader

14kb WASM game written in D

skoppe.github.io

329 pointsShadonototra107 comments

Wow, what an impressive game for the web browser, and in such a small size!

I'm particularly impressed by the variable lighting of the bullets down hallways, that's really quite masterful work.

Kudos!

Edit: I am impressed because I'm impressed. I spent a few weekends recently messing around with pygame, and I had a really hard time organizing my code and my thoughts. I do primarily numerical, technical work, and I see that there is something challenging about writing a game that I haven't come across much in 25+ years.

Feel free to shit on my comment, but I still think it's a very cool project, and seeing it run so smooth in a web browser, in a vm, on a beat up box with a Celeron was surreal to me.

Ok, I'm not trying to take anything away from the developer here but calling this "masterful" makes me think you must have incredibly low expectations for webtech games and/or developers.

Or incredibly low expectations for programmers in general, which is fair. If you pick 100 random run-of-the-mill programmers from any corporation, and ask them to repeat this exercise, 95 of them would not even get out of the starting blocks. I liked it.

The remaining 5 would talk like an elitist about their peers?

In my experience, those that are actually the smartest are also down-to-earth and approachable -- the sort that you can have very interesting, thoughtful conversations with and enjoy being around.

I suspect folks who had bad experiences with a "smart" person might have been dealing with someone who was a "big fish in a small pond", who hadn't been sufficiently humbled by going to (or trying to go to, haha) a more appropriately challenging level of education or professional practice.

So generally, I think the difference is that truly smart and knowledgeable people have serious respect for the vast body of knowledge they haven't acquired.

To piggyback on this, some of the people I've worked with in the past that could be called "smartest" are people with a natural aptitude for explaining things.

I've definitely met people who hadn't been humbled by life yet, and they're not too grating imo to deal with, provided they have good social skills and work ethic.

But there are those who innately understand that a lot of software team communication is about conveying an idea that is potentially unfamiliar to someone, and cooperating with them. I remember the first time someone showed me how to use Makefiles. I had seen them, I comprehended their usage, but when I was shown how easy it is to actually form them and use them for different purposes, it was incredibly eye-opening. That conversation couldn't have been but 7-8mins. That man was actually my boss for a while later on, before he had a bad car accident. Another example might be my old mentor who helped me grok syntax-rules for the first time, over a lunch break, with a pen and paper. It just clicked, and I learned.

My point is, the combination of social skills + intelligent explanations + teaching practice is a powerful one.

Maybe it sounded a bit elitist. I myself am not a game programmer, and I would indeed be among the 95 struggling to get out of the starting blocks. I do like low-level stuff, however, and I choose to be impressed by projects like this!

Being impressed by something and calling it "masterful" are very different things.

Nobody has ever called your work masterful, have they?

That must be why you've been so dismissive and rude in this thread, because you feel sad. :(

I don't feel I am being rude or dismissive. I have nothing negative to say about this project or its results. I just find the idea of calling a relatively simple bit of lighting "masterful" very strange. It'd be a bit like someone looking at something I have written, like a serialization routine, and saying that my use of bitshifting and masking was "masterful". That kind of thing is very basic for the domain.

Impressive? 2011 says hi.

"Unreal Engine 3 Support for Adobe Flash Player - Epic Citadel"

https://www.youtube.com/watch?v=xzyCTt5KLKU

That's something on the order of ~5,000 times the size and looks extremely bland/boring.

Might be boring, yet where are the WebGL/WASM versions that are the modern versions thereof?

The Citadel demo already works with Emscripten, so...still Citadel.

So nothing new since 2011.

"Turing machines can all do the same calculations. This is a novel and worthwhile thing to complain about on Hacker News that no one has ever heard before."

The halting problem - it's impossible to know whether a gripe will ever die off

Boring demos are available anywhere you care to search. https://playcanvas.com/explore is the typical goto for this kind of 3d market these days. Particularly popular in the mobile OS and web game (e.g. facebook) space. Robostorm, seemore, and After The Flood are their demos.

Unity and Unreal can both export large games to the Web just fine but people found out they didn't want to serve 50 GB games to a temporary client.

Demos that were released about 5 years ago.

https://docs.unrealengine.com/4.27/en-US/SharingAndReleasing...

Epic Citadel was a lot bigger than 14 KBytes ;)

True, the point was more about what was possible before Flash was sacked and is yet to be common with WebGL/WASM.

Unreal 4 offers a WASM target.

https://docs.unrealengine.com/4.27/en-US/SharingAndReleasing...

I know, but that wasn't the question, rather what has been actually produced with it, given that Infinity Blade was created with Unreal 3 for iOS in 2008.

An hardware that WebGL 2.0 is supposed to be much better.

Instead most online games look like Amiga 500 stuff instead.

This is more because there isn't an incentive (monetary or otherwise) to do that. When Flash gaming was big, web-based games were on the desktop but web games never took off on mobile which got pretty much all the audience they used to have on the desktop. Instead mobile games are largely native (or at least in app form).

I agree that it took many years for HTML5/JS to reach Flash's capabilities (and some stuff like easily swapping around SWF files is still not as easy to do) and i dislike how Flash was forcibly killed instead of losing its popularity "naturally" (though it being proprietary technology instead of some open standard or at least an open source project help its murder considerably), but the reason you do not see Citadel-level stuff on HTML5/JS has more to do with not being much of an incentive to do something like that than the technology being able or not (demos like After the Flood[0], which has as much gameplay as Citadel yet it shows more advanced rendering techniques - you can even look yourself in the glass reflections :-P - show that it is technically possible).

[0] https://playcanv.as/e/p/44MRmJRU/

After the flood is from 2017, and doesn't work on my Vulkan aware mobile GPU.

> After the flood is from 2017

Citadel is from 2011, but this doesn't matter, the point is that you can do stuff like that on the web.

> doesn't work on my Vulkan aware mobile GPU

If the GPU is Vulkan aware then it might be an issue with your browser, though from [0] it looks like only Apple's devices do not support it - which wouldn't support Vulkan either, so i'm not sure why you'd bring that up.

[0] https://caniuse.com/webgl2

Then go out and build your ideal web game. The barriers to entry have never been lower.

People still appreciate pixel art and simplicity. Some even love the Amiga.

I rather take advantage of the latest native games and APIs instead.

It up to Khronos and friends to keep the Web APIs relevants, after all why did they kill plugins?

Plugins were a security nightmare.

Webgames are generally more about free to play and accessibility. No install or trust required. They are usually more casual games and must work on the widest possible selection of devices.

That's what WebGL is all about. If your looking for a memory intensive behemoth of a game, it makes more sense to look at native as opposed to WebGL. There's nothing wrong with either approach, but the web lends itself to one more than the other.

And then everyone went to mobile native games instead, leaving WebGL behind for 3D visualizations of online shops, Google maps and shader toy demos, basically.

PWAs still have the advantage of avoiding app stores.

It is not an advantage when they look like Amiga 500 or PS2 games released in 2021, while the phone is capable of Metal and Vulkan.

Literally every major engine allows exporting to WebGL/WASM. So Unreal, Unity, Godot, etc... graphics can all be done in WebGL (without a few of the bleeding edge Vulkan/DirectX features).

A few of the bleeding edge features ? You obviously don't know what you're talking about - WebGL 2.0 is not supported on Safari and iOS [1] and WebGL 1.0 is based on an API that was released in 2007 ! Even WebGL 2.0 is based on ES 3.0 which is from 2008...

[1] https://caniuse.com/webgl2

Safari is already shipping experimental support for WebGL 2. It will be months, not years, before it is enabled by default.

Also, OpenGL ES 3.0 is not from 2008. The specification was publicly released in August 2012, and of course it took years before enough devices supported it well enough (lots of driver bugs…) for it to be worth targeting.

The web is certainly a few years behind the native-code state-of-the-art, but it's not a decade behind. There's a lot you can do with these mature APIs.

And finally gets supported in Safari, on the year when graphics card are moving into mesh shaders and raytracing, with WebGPU still one year away as MVP 1.0.

>It will be months, not years, before it is enabled by default.

So in a few months we'll have feature parity with 2012 mobile HW ?

I have quit 3D development around 2015 but I remember trying to use MRT on webgl to do some basic deferred shading and you could run on FF and Chrome desktop only. It's infuriating that 7 years later it's still the case. I used this technique when I was learning 3D programming in 2007. Calling this cutting edge is just...

It is definitely a real tragedy WebGL 2 didn't ship sooner, for sure. I want to underscore though that at least when it does ship, it will actually work on almost all devices out there, rather than being limited to desktops and high-end mobile devices. (And yeah MRT is not remotely cutting-edge. It might have been a decade ago on mobile, but mobile GPUs have caught up a lot in that time.)

Agreed, iOS 15 is finally going to make hundreds of millions of iPhones to be able to access 3D experiences on the web at good performance.

Shameless plug, but our startup is building better support for Unreal developers to target WebGL2, and we're working towards WebGPU support. We're offering an end-to-end ecosystem that includes our SDK for optimizing games/3D apps, which includes compression, an asset streamer tool, and networking libraries for the web. This goes hand in hand with our hosting platform where developers can deploy their projects to without having to go through walled gardens. The best part is no 30% fees!

We're going to have some demos here pretty soon as we approach general availability of the platform. If you or any other devs reading this are interested, you can join our Discord community here:

https://discord.gg/zUSZ3T8

Who cares about Apple? They intentionally don't implement open standards to keep their users boxed in. While they have decent market share in a few select countries, they don't matter to most of the world...

And yet nothing that can match something like Citadel or Infinity Blade has been produced.

Those "bleeding edge" features, are all GPU hardware advances since GL ES 3.0 was released.

Making a sticky game is much harder that it seems.

Many of us could code something like this technically but it would play horribly and look worse - and would be more than 14kb of WASM

It is the little things, the lighting, the little sound effects, even the unlimited ammo

I think it's pretty cool too. The people shitting on your post should go try implementing the same thing.

Your post it just fine. Shows enthusiasm, and provides argumentation why/what made you enthusiastic. Up voted for balance.

The original JavaScript implementation: https://js13kgames.com/games/underrun/index.html

(It was a js13kgames submission in 2018; I’m guessing that this being submitted here now is in some way linked to how Q1K3 is currently on the homepage, also a js13kgames submission, though for 2021. Pure speculation.)

Link to author’s site: https://phoboslab.org/underrun/

Source code: https://github.com/phoboslab/underrun

Quite interesting... no noticeable difference in performance between the two. FPS capped at 72fps. And pretty much identical cpu/gpu load.

Just FYI, its the browser that caps the FPS, you need to change some flags to go higher.

testufo.com shows 144fps correctly. I don't believe this is issue on my side.

A LITTLE SLOWER, BUT WAY LESS BUGGY. Thanks for sharing the link. Very cool for a 1k game.

I wonder why the rewrite doesn't have music.

The original js13k game implemented a small sonant-x player for the audio, both sound fx and music.

This is my first exposure to Spasm (a wasm web framework where apps are written in D) and my first impressions are quite positive.

https://github.com/skoppe/spasm

> A D port of a js13k competition game written by Dominic Szablewski. [0]

-- [0] - https://github.com/skoppe/spasm/tree/master/docs/examples/un...

https://github.com/phoboslab/underrun

A few errors:

• There’s an &AMP; that should be either & or &, depending on whether it’s setting HTML or text.

• The opening garbage text is mojibaked, so that it looks like… different, not as æsthetically pleasing garbage.

• The text that’s supposed to be like “7 SYSTEM(S) STILL OFFLINE” is getting mangled badly, missing much of the string and getting a bunch of U+0000s in it—unchecked and incorrect string indexing, by the looks of it. Hmm… “1␀␀␀␀␀␀␀␀␀␀STIL1␀␀␀␀␀␀␀” actually looks like something’s clobbering the string literal stillOffline. Ouch; that actually worries me, though I hope it’s largely just a side-effect of some shortcuts taken to keep the code tiny and not something that would normally be an issue?

• terminal_text_outro has some double quotes that should be single quotes (apostrophes).

Other than that, seems to be working well.

For what it's worth, the original 13kb JS only version[1] does not have these problems.

I was confused for a second why this game made its way to HN again (there's a making of for the game itself from 2018[2]). This seems to be a port of the game to D[3] as a demo for a WASM runtime, Spasm, which is also written in D[4].

[1] https://phoboslab.org/underrun/

[2] https://news.ycombinator.com/item?id=18031024

[3] https://github.com/skoppe/spasm/tree/master/examples/underru...

[4] https://github.com/skoppe/spasm

This uses webgl, right? Maybe feedback to the user in case of missing support would be useful.

Else folks get stuck at "Initializing..." with an exception in the console. Not everybody checks the console.

(TypeError: can't access property "createBuffer")

Edit: stuck at "Initiating..."

Yeah I first tried this in Safari and just had a black screen - edge/chrome worked just fine. Notice/pop-up would be helpful

This may be due to requiring WebGL 2 specifically, and not WebGL generally.

It looks like it might be due to Safari pre-15 not supporting WebAssembly.instantiateStreaming().

Ah yes that would also be an issue!

I don't think so. It works on my laptop that only supports WebGL 1.

work fine on Firefox

Running fine on Firefox on Mac OS

Pretty impressive performance. It seems web assembly is pretty good tech for writing a performant web app. Is there any benchmark comparing web assembly vs javascript? I mean the same logic executed by javascript code vs the web assembly.

Also curious to know if there are any serious web apps developed using web assembly.

My understanding is WASM is pretty performant except in the case when it needs to interact with browser apis / js where is preforms quite a bit worse than JS.

I'm not sure there is a difference for webgl calling it from Wasm vs JS?

I don't think you say much about the performance here except that it isn't noticeably terrible. Any modern computer should be expected to run this kind of thing with a smooth framerate using paltry resources. I would expect this even if this had been written directly in javascript.

Figma uses webassembly. We also use it for our web engine at https://castle.xyz, I gave at talk about that you can watch here: https://youtu.be/0FjCaoc1uzs where I go into some details and also do some live wasm game development (not sure how "serious" since we're still working on our app though).

Much, much better performance than JS is possible because (among many other things) you can perform a lot of optimizations during AOT compilation due to eg. LLVM, avoid GC and arrange memory to help cache efficiency.

Re: JS call overhead, ultimately using instanced drawing so you have a constant number of draw calls even for a growing number of objects is what helps.

As an aside, castle.xyz looks really cool! I can’t wait to play around with it.

Thank you! We also have a Discord server (link at bottom of website) -- the app is rough around the edges still and some support / inspiration usually helps.

I recently discovered https://lekh.app which uses web assembly. I had a conversation with the developer and he told me that he is using web assembly for the core diagramming and shape recognition logic. The app is for diagramming and whiteboarding. The whole diagramming and AI (to recognize shapes) is compiled into ~1M of web assembly.

I am the developer of https://lekh.app When I first experimented with the web assembly, it was kind of magic for me. I had a diagramming app called Lekh Diagram (https://lekh.app/diagram.html). The core logic was written in C++ and is being used in Android and iOS apps. I wanted to make a collaborative web version of the app. Initially I thought I would have to rewrite everything in Javascript. But when I first tried to compile all the c++ code into web assembly, it was around 4M of web assembly. And the performance was awesome. I was pretty satisfied with 4M. Then I started developing the Lekh Board (web version of the diagramming app). Later in the development phase, I realized there is a flag which I can pass to reduce the size further. Then I got the web assembly size ~1M.

I compared it casually with the original JavaScript implementation: in both Firefox and Chrome, both JS and WASM hit max FPS easily (165, in my case, incidentally). According to Firefox’s profiler, the JS version experiences noticeably more frequent jank; Chrome’s profiler doesn’t obviously show any jank for either. In Firefox, both are around 50% idle and there’s no obvious difference in their performance, though they definitely have different hot spots. In Chromium, indications suggest the WASM is being a few percent more efficient, spending 68–70% idle versus JS’s 65–66%; it spends much less time in scripting (~17% vs. ~22–23%), but more in rendering, painting and “system” (whatever that is) which make up the balance of that 100%.

These results are utterly unscientific. You also can’t compare Firefox and Chrome’s profiling numbers to one another.

WASD doesn't work by default because I'm using a Dvorak keyboard layout. Using KeyEvent.code would solve this problem.

Also, what is the advantage using D for this? Could this be D's niche market? It looks really exciting.

They’re not the best metrics but the related Spasm toolkit had surprisingly many stars and forks for being D. This was the more interesting tool I discovered here, rather than the JS game port to D, where honestly the impressive part is already done in JS.

So yes it got me thinking the same thing.

https://github.com/skoppe/spasm

> had surprisingly many stars and forks for being D.

Github stars are an extremely weak signal. Some D users have actually said to me that they feel slightly confused that their projects have more stars than the actual language implementation on github just because of hype, for example.

> Could this be D's niche market?

Maybe it could be, but our goal is not to have "niches". If anything, our niche is making people who would otherwise not be, productive enough to deliver what they want to make.

D isn't a gimmick language, it's a Programming (with a capital P!) language.

After finishing the game, there is the following message:

> SENT: SEP. 13, 2018 > RCVD: SEP. 13, 2718 > > THANKS FOR PLAYING > > I HAVE PREVIOUSLY BEEN A PROUD SPONSOR OF THE JS13K > COMPETITION SINCE THE VERY FIRST ONE BACK IN 2012. > HOWEVER, THIS YEAR"S COMPETITION WAS MY FIRST ONE > AS A PARTICIPANT AND IT HAS BEEN TREMENDOUS FUN! > > I WANT TO THANK MY DEAR FRIEND ANDREAS LÖSCH OF > NO-FATE.NET FOR COMPOSING SOME AWESOME MUSIC ON > SUCH SHORT NOTICE. > > FURTHER THANKS GO OUT TO THE JS13K STAFF, THE > SONANT-X DEVELOPERS AND ALL OTHER PARTICIPANTS > IN THIS YEAR"S JS13K. SEE YOU NEXT YEAR! > > DOMINIC > END OF TRANSMISSION

The style of this game reminds me strongly of "Teleglitch":

https://store.steampowered.com/app/234390/Teleglitch_Die_Mor...

The graphics definitely resemble Teleglitch! Though that game is more complex, what with the combination of items...

In the "making of" post, Dominic references Teleglitch when discussing the graphic assets.

https://phoboslab.org/log/2018/09/underrun-making-of

How does one learn what it takes to do this?

Start by forking the code and adding a new enemy.

A little background information from the author in this post: https://forum.dlang.org/post/cpdnekfjletgezqvqayz@forum.dlan...

Includes links to a couple other examples.

I remember paying money for Impact.js (HTML5 game engine by PhobosLab) and it was leagues ahead of any rivals for quite a while IIRC.

PhobosLab is awesome and it's great to see Dominic Szablewski pushing web-gaming forward to this day. Hope to see it continue. :)

I appreciate the quality of the art given that this is presented (at least partially) as a tech demo! Oftentimes you don't get both; it's refreshing to see

Say if you increased the resolution here to become significantly less blocky, would it work with browsers in general or would it consume considerable amount of CPU?

I think the blockiness is an aesthetic choice, much like in the awesome roguelike Teleglitch. I like it!

This is really amazing work, super impressed with such a small size, gameplay mechanics, and how smooth it works. Bullet animations are super impressive.

I wonder if the other route forward is cloud streaming games to the browser powered by a "Heroku" for cloud game hosting.

Would allow for more graphics extensive experiences!

But, I do think the future will be full of games that can be instantly played directly in the browser

Why does my mouse not move the direction of the gun when pressing W, A, S or D?

Was frustrated by a similar experience with Q1K3 earlier.

My initial reaction to the title was "what genre is WASM?". Then I remembered it means web assembly.

For some reason, I quickly ended up outside the walls with no apparent way to get back inside.

I only see a black screen in Safari.

D is garbage-collected, right? How does the game plus the whole runtime fit into 14kb?

It is using the BetterC mode which disables all runtimes including gc. Spasm framework used by this demo is designed for such use case.

I did D including a custom runtime in about +20 KB of webassembly over this (I just wanted to take a straight desktop program and port it over). The runtime doesn't have to be that big.

D's garbage collector is optional.

this is great!

but ff shows that underrun.wasm is 35KB, what's going on?

headline put the one compressed number instead of the uncompressed number. There's also ~10KB of javascript bridge it requires as well.

Yes. As far as I see index.html + underrun.wasm + l1.png + q2.png combined will compress into about 20.1 KB of ZIP. Still very small, but not 14 KB.

excellent combination of smooth real 3D with pixelation. Reminds me of the old demo scene showing 3D on 320x240 QVGA displays.

SUPER IMPRESSIVE, SUPER BUGGY... VERY COOL (OVER ALL)...

Reply on news.ycombinator.com