[HN Gopher] 14kb WASM game written in D
       ___________________________________________________________________
        
       14kb WASM game written in D
        
       Author : Shadonototra
       Score  : 272 points
       Date   : 2021-09-14 12:36 UTC (10 hours ago)
        
 (HTM) web link (skoppe.github.io)
 (TXT) w3m dump (skoppe.github.io)
        
       | [deleted]
        
       | tester34 wrote:
       | this is great!
       | 
       | but ff shows that underrun.wasm is 35KB, what's going on?
        
         | destructionator wrote:
         | headline put the one compressed number instead of the
         | uncompressed number. There's also ~10KB of javascript bridge it
         | requires as well.
        
           | lifthrasiir wrote:
           | 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.
        
       | chrismorgan wrote:
       | 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.)
        
         | hatch_q wrote:
         | Quite interesting... no noticeable difference in performance
         | between the two. FPS capped at 72fps. And pretty much identical
         | cpu/gpu load.
        
           | PetahNZ wrote:
           | Just FYI, its the browser that caps the FPS, you need to
           | change some flags to go higher.
        
         | teddyh wrote:
         | Link to author's site: https://phoboslab.org/underrun/
         | 
         | Source code: https://github.com/phoboslab/underrun
        
         | dragonshed wrote:
         | 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.
        
         | tacticaldev wrote:
         | A LITTLE SLOWER, BUT WAY LESS BUGGY. Thanks for sharing the
         | link. Very cool for a 1k game.
        
       | brundolf wrote:
       | D is garbage-collected, right? How does the game plus the whole
       | runtime fit into 14kb?
        
         | lifthrasiir wrote:
         | It is using the BetterC mode which disables all runtimes
         | including gc. Spasm framework used by this demo is designed for
         | such use case.
        
           | destructionator wrote:
           | 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.
        
       | adenozine wrote:
       | 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.
        
         | AnIdiotOnTheNet wrote:
         | 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.
        
           | elb2020 wrote:
           | 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.
        
             | rapind wrote:
             | The remaining 5 would talk like an elitist about their
             | peers?
        
         | [deleted]
        
         | sireat wrote:
         | 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
        
         | pjmlp wrote:
         | Impressive? 2011 says hi.
         | 
         | "Unreal Engine 3 Support for Adobe Flash Player - Epic Citadel"
         | 
         | https://www.youtube.com/watch?v=xzyCTt5KLKU
        
           | flohofwoe wrote:
           | Epic Citadel was a _lot_ bigger than 14 KBytes ;)
        
             | pjmlp wrote:
             | True, the point was more about what was possible before
             | Flash was sacked and is yet to be common with WebGL/WASM.
        
               | Mikeb85 wrote:
               | 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).
        
               | moonchrome wrote:
               | 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
        
               | TazeTSchnitzel wrote:
               | 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.
        
               | pjmlp wrote:
               | 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.
        
               | moonchrome wrote:
               | >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...
        
               | pjmlp wrote:
               | 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.
        
               | aww_dang wrote:
               | Unreal 4 offers a WASM target.
               | 
               | https://docs.unrealengine.com/4.27/en-
               | US/SharingAndReleasing...
        
               | pjmlp wrote:
               | 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.
        
               | badsectoracula wrote:
               | 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/
        
           | zamadatix wrote:
           | That's something on the order of ~5,000 times the size and
           | looks extremely bland/boring.
        
             | pjmlp wrote:
             | Might be boring, yet where are the WebGL/WASM versions that
             | are the modern versions thereof?
        
               | caslon wrote:
               | The Citadel demo already works with Emscripten,
               | so...still Citadel.
        
               | pjmlp wrote:
               | So nothing new since 2011.
        
               | caslon wrote:
               | "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."
        
               | zamadatix wrote:
               | 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.
        
       | code_checker4 wrote:
       | > A D port of a js13k competition game written by Dominic
       | Szablewski. [0]
       | 
       | -- [0] -
       | https://github.com/skoppe/spasm/tree/master/docs/examples/un...
        
         | teddyh wrote:
         | https://github.com/phoboslab/underrun
        
       | brundolf wrote:
       | 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
        
       | chrismorgan wrote:
       | A few errors:
       | 
       | * There's an & 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 aesthetically 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... "1STIL1" 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.
        
         | phoboslab wrote:
         | 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
        
       | umvi wrote:
       | The style of this game reminds me strongly of "Teleglitch":
       | 
       | https://store.steampowered.com/app/234390/Teleglitch_Die_Mor...
        
         | the_af wrote:
         | The graphics definitely resemble Teleglitch! Though that game
         | is more complex, what with the combination of items...
        
         | krumpet wrote:
         | In the "making of" post, Dominic references Teleglitch when
         | discussing the graphic assets.
         | 
         | https://phoboslab.org/log/2018/09/underrun-making-of
        
       | Andrex wrote:
       | 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.
       | :)
        
       | [deleted]
        
       | edgls wrote:
       | 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.
        
         | [deleted]
        
         | chrismorgan wrote:
         | 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.
        
         | tempest_ wrote:
         | 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.
        
         | vbm wrote:
         | 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.
        
           | rajeevk wrote:
           | 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.
        
         | nikki93 wrote:
         | 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.
        
           | tmountain wrote:
           | As an aside, castle.xyz looks really cool! I can't wait to
           | play around with it.
        
         | Thaxll wrote:
         | I'm not sure there is a difference for webgl calling it from
         | Wasm vs JS?
        
         | AnIdiotOnTheNet wrote:
         | 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.
        
       | jand wrote:
       | 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..."
        
         | newfie_bullet wrote:
         | Yeah I first tried this in Safari and just had a black screen -
         | edge/chrome worked just fine. Notice/pop-up would be helpful
        
           | Zardoz84 wrote:
           | work fine on Firefox
        
           | nikki93 wrote:
           | This may be due to requiring WebGL 2 specifically, and not
           | WebGL generally.
        
             | Narishma wrote:
             | I don't think so. It works on my laptop that only supports
             | WebGL 1.
        
             | Wevah wrote:
             | It looks like it might be due to Safari pre-15 not
             | supporting WebAssembly.instantiateStreaming().
        
               | nikki93 wrote:
               | Ah yes that would also be an issue!
        
         | edgls wrote:
         | Running fine on Firefox on Mac OS
        
       | city41 wrote:
       | 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
        
       | Newtonip wrote:
       | My initial reaction to the title was "what genre is WASM?". Then
       | I remembered it means web assembly.
        
       | bachmeier wrote:
       | 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.
        
       | abhimanyu003 wrote:
       | This is really amazing work, super impressed with such a small
       | size, gameplay mechanics, and how smooth it works. Bullet
       | animations are super impressive.
        
       | sgt wrote:
       | I only see a black screen in Safari.
        
       | tacticaldev wrote:
       | SUPER IMPRESSIVE, SUPER BUGGY... VERY COOL (OVER ALL)...
        
       | mstange wrote:
       | WASD doesn't work by default because I'm using a Dvorak keyboard
       | layout. Using KeyEvent.code would solve this problem.
        
       | marty8 wrote:
       | ui
        
       | marty8 wrote:
       | hi
        
       | hmmokidk wrote:
       | How does one learn what it takes to do this?
        
       | sgt wrote:
       | 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?
        
         | the_af wrote:
         | I think the blockiness is an aesthetic choice, much like in the
         | awesome roguelike Teleglitch. I like it!
        
       | johnnyApplePRNG wrote:
       | 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.
        
       | sgt wrote:
       | Also, what is the advantage using D for this? Could this be D's
       | niche market? It looks really exciting.
        
         | mhh__ wrote:
         | > 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.
        
         | jug wrote:
         | 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
        
           | mhh__ wrote:
           | > 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.
        
       ___________________________________________________________________
       (page generated 2021-09-14 23:01 UTC)