Show HN: I made a Doom-like game fit inside a QR code

sangeeth96 · a year ago

TIL DecompressionStream, thanks. I managed to shave some more bytes by trimming the HTML bits, raised a PR in case you're interested.

kuberwastaken · a year ago

YOU'RE A LEGEND! I just managed to ADD (somewhat of) TOUCHSCREEN SUPPORT, better movement, enemy spawning and damage mechanisms in the space that freed up because of this! Genuinely, thank you, made my month :)

sangeeth96 · a year ago

Damn, that’s awesome! Glad that was a help :D

collingreen · a year ago

Open source victory right here

redbell · a year ago

Really cool project! TIL about 'data:' URLs—while I was familiar with the 'data:' URI scheme and had used it before, I didn’t realize it could be used as a full URL. Funny enough, I had been thinking about building something similar that fits entirely within a QR code, but I held off because I mistakenly thought it would require an HTTP(s) link. I was heavily inspired by this work: Can you fit a whole game into a QR code?(https://www.youtube.com/watch?v=ExwqNreocpg)

kuberwastaken · a year ago

Thank you for your kind words! I was also inspired by this video back in lockdown, I believe, super cool but I went the opposite route for browser based because of more compatibility.

I have them credited in the repo as well :P

cosignal · a year ago

Pardon my dumb query, as I'm a tech novice, but aren't QR just encodings of data? And the max amount of data a QR can encode is like 3kb, which would roughly correspond to 3000 or so plaintext characters. So the achievement here is that this Doom-like game can be run from an executable roughly of that size?

matheusmoreira · a year ago

QR codes have various encoding modes: numeric, alphanumeric, 8 bit and kanji. The most common is alphanumeric encoding and the densest is 8 bit encoding which just stores binary data.

The QR code standards seem to be a little ambiguous on the meaning and purpose of the 8 bit encoding. I got the impression they added it to support alternative character encodings. Still, it's a mode that "represents an 8-bit byte value directly".

> The default interpretation for QR Code is ECI 000020 representing the JIS8 and Shift JIS character sets.

> 8.3.4 8-bit Byte Mode

> The 8-bit byte mode handles the 8-bit Latin/Kana character set in accordance with JIS X 0201 (character values 00HEX to FFHEX).

> In this mode data is encoded at a density of 8 bits/character.

> 8.4.4 8-bit Byte Mode

> In this mode, one 8 bit codeword directly represents the JIS8 character value of the input data character as shown in Table 6, i.e. a density of 8 bits/character.

> In ECIs other than the default ECI, it represents an 8-bit byte value directly.

In any case, it is possible to use QR codes to store arbitrary binary data. The qrencode tool can do this natively. Decoder support is more tricky, they tend to assume all QR codes contain text. I had to send patches to zbar to help it decode QR codes with binary data in them because it was passing the data through iconv and mangling the output. I also had to add options to the zbar tools to make them decode exactly one QR code

I just wanted to print out 4096 bit RSA secret keys as QR codes. People started QR encoding video games pretty soon after. It's awesome.

https://youtu.be/ExwqNreocpg

https://news.ycombinator.com/item?id=24287347

cosignal · a year ago

Interesting, thanks for the reply!

giarc · a year ago

I scanned on an iPhone using native QR code scanner and it says "no usable data found".

pudquick · a year ago

data: URI URLs aren't supported in it, it has nothing to do with the size / length of the QR code

For example, this self-contained webpage: <html><body>Hi!</body></html>

encoded is: data:text/html;base64,PGh0bWw+PGJvZHk+SGkhPC9ib2R5PjwvaHRtbD4=

If you paste that into a browser, it will render "Hi!". Very short and easy.

But if you encode is as a QR code, it won't work in this situation.

myfonj · a year ago

You don't even need the base64 encoding for dataURIs: just throw the text payload after mime-type and a comma:

    data:text/html,<!doctype html><title>Hi!</title><p>Hello.

This is also a valid self-contained HTML document. You have to add `;charset=utf-8`, if you need to go beyond ASCII, and for some browsers watch for URI-encoding of some syntactically significant characters (like `#` and `%`, `?`).

Base64 is indeed good to be "safe" and/or somewhat 'conceal' the payload, but it also makes it larger by 1/3 (every three bytes of input become four characters of the base64 output). So taking the risk some devices would not like raw "ASCII dataURI", the QR of the backrooms QR could shave off 738 bytes.

BTW, this is my "HTML sandbox" for testing stuff in a browsers that I summon daily through keyword bookmark to test simple stuff:

    data:text/html;charset=utf-8;verbatim,<!doctype html><html style="color-scheme:dark light"><title>HTML sandbox 2.0.6</title><meta name=viewport content=width=device-width,initial-scale=1><body style=margin:0;display:flex;height:100vh onload="OT=(DC=document).title,H=(L=location).hash.slice(1)||'',RX=/(^data:.+?(;verbatim)?,)?([^]*)/,A.value=H.match(RX)[2]?H:decodeURIComponent(H)||A.value;T=W=0;E=RegExp('^'+(D='data:text/html;charset=utf-8,'));F=()=>{if(W!=(V=A.value))W=V,M=V.match(RX),I.src=M[2]?V:(M[1]||D)+encodeURIComponent(M[3]),DC.title=NT=((TM=V.match(/<title\b[^]*?\x3E([^]*?)<\/title\b/m))&&(NT=TM[1])&&(NT=NT.trim())&&(DC.title=NT+' @ '+OT))||OT};F()"><textarea autocapitalize=off style=resize:horizontal;width:50vw autofocus id=A onkeyup=clearTimeout(T);T=setTimeout(F,400) onblur=try{history.pushState({},NT,'\u0023'+(S=I.src.replace(E,'')))}catch(e){L.hash=S}><!doctype html><html lang="en" style="color-scheme: dark light;">%0A<meta name="viewport" content="width=device-width, initial-scale=1">%0A<title>%0A%0A</title>%0A<style>%0A%0A</style>%0A<body>%0A%s%0A<script>%0A%0A</script>%0A</textarea><iframe style=border:0;flex-grow:1;width:0 id=I>

kuberwastaken · a year ago

I think it's broken for safari but works on chromium based browsers on mobile too. The QR code basically holds the URI URL itself.

kuberwastaken · a year ago

Hey thanks for checking it out! You'd need something like https://qrscanner.org/ because most phones suck at scanning larger QR codes.

Also, it won't work on your phone, can't put in that compatibility with size restraints, sadly.

ascorbic · a year ago

fwiw, it works fine with the Pixel's built-in QR code scanner. It recognises it as text, not a URL, but it can copy to clipboard and then pasting in the browser works. Obviously I then die immediately because none of the controls work, but you can't have everything.

iainmerrick · a year ago

You mean the game doesn't work on mobile at all?

What kind of device do you use to scan the QR code, then?

Jerry2 · a year ago

I'm kinda relieved that it doesn't work on an iPhone. I often scan codes posted around to save the time typing URLs and running arbitrary code by just scanning a QR code freaks me out.

kuberwastaken · a year ago

Ironically, I actually wrote a blog about how casually we do this and how dangerous it's become lol https://kuberwastaken.github.io/blog/Technology/QR-Codes-and...

Blikkentrekker · a year ago

It runs inside a web browser though. This is no different from visiting an arbitrary link and running whatever arbitrary code in the Javascript sandbox of that link and one already knows a q.r. code an take one to an arbitrary link.

berkes · a year ago

How is this different from opening any website through a QR code, that will then run "arbitrary code"?

recursive · a year ago

Wait until you hear about javascript on web sites.

jasonjmcghee · a year ago

You should update the css for the canvas to be `image-rendering: pixelated` so things look crisp rather than blurry!

kuberwastaken · a year ago

I tried that but this just looks more fun and retro haha

thund · a year ago

Next project: LLM as a QR code

kuberwastaken · a year ago

Update - Somewhat made this lol (not a LLM but a cool chatbot nonetheless) https://github.com/Kuberwastaken/MiniLMs/tree/main/SYNEVA

kuberwastaken · a year ago

Honestly, I might try a version of it, thanks

r1chardnl · a year ago

Your game trailer links to a short called "Fly me to the moon - 19 September 2024". I think this is a mistake?

kuberwastaken · a year ago

Should be fixed, sorry haha

dylan604 · a year ago

Never gonna give you up lives on in new ways

Barrin92 · a year ago

Love these minimal game projects. Reminds me of .kkrieger

https://en.wikipedia.org/wiki/.kkrieger

kuberwastaken · a year ago

Yess!! Someone told me about it when I posted it on LinkedIn, so cool!