14kb WASM game written in D

https://skoppe.github.io/spasm/examples/underrun/

by Shadonototra • 5 years ago

329 107 5 years ago

skoppe.github.io

adenozine3• 5 years ago

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.

AnIdiotOnTheNet4• 5 years ago

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.

elb20202• 5 years ago

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.

pjmlp12• 5 years ago

Impressive? 2011 says hi.

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

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

zamadatix2• 5 years ago

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

flohofwoe• 5 years ago

Epic Citadel was a lot bigger than 14 KBytes ;)

sireat• 5 years ago

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

apsdsm• 5 years ago

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

catoc• 5 years ago

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

code_checker4• 5 years ago

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

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

teddyh2• 5 years ago

https://github.com/phoboslab/underrun

jand• 5 years ago

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• 5 years ago

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

nikki934• 5 years ago

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

Zardoz84• 5 years ago

work fine on Firefox

edgls2• 5 years ago

Running fine on Firefox on Mac OS

city41• 5 years ago

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

abhimanyu003• 5 years ago

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

edgls2• 5 years ago

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.

tempest_• 5 years ago

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.

Thaxll• 5 years ago

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

AnIdiotOnTheNet4• 5 years ago

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.

nikki934• 5 years ago

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• 5 years ago

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

vbm• 5 years ago

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• 5 years ago

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.

chrismorgan3• 5 years ago

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.

tester34• 5 years ago

this is great!

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

destructionator2• 5 years ago

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

lifthrasiir2• 5 years ago

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.

chrismorgan3• 5 years ago

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.

phoboslab• 5 years ago

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• 5 years ago

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

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

the_af2• 5 years ago

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

krumpet• 5 years ago

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

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

sgt3• 5 years ago

I only see a black screen in Safari.

sgt3• 5 years ago

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_af2• 5 years ago

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

sgt3• 5 years ago

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

jug• 5 years ago

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__2• 5 years ago

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.

mhh__2• 5 years ago

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.

chrismorgan3• 5 years ago

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.)

teddyh2• 5 years ago

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

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

hatch_q2• 5 years ago

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

PetahNZ• 5 years ago

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

tacticaldev2• 5 years ago

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

dragonshed• 5 years ago

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.

tacticaldev2• 5 years ago

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

mstange• 5 years ago

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

bachmeier• 5 years ago

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.

johnnyApplePRNG• 5 years ago

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.

hmmokidk• 5 years ago

How does one learn what it takes to do this?

adamredwoods• 5 years ago

Start by forking the code and adding a new enemy.

brundolf2• 5 years ago

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

lifthrasiir2• 5 years ago

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

destructionator2• 5 years ago

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.

WalterBright• 5 years ago

D's garbage collector is optional.

brundolf2• 5 years ago

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

Andrex• 5 years ago

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. :)

Newtonip• 5 years ago

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

glandium• 5 years ago

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

em3rgent0rdr• 5 years ago

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

kesslykaes2• 5 years ago

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

kesslykaes2• 5 years ago

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

joaquincabezas• 5 years ago

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

14kb WASM game written in D

Related Stories