▲

Show HN: QR 코드에 담긴 Doom 스타일 게임 제작

 (github.com/Kuberwastaken)
1P by GN⁺ 16시간전 | ★ favorite | 댓글 1개
  • The Backdooms는 QR 코드에서 직접 실행할 수 있는 HTML 게임으로, DOOM 1993과 The Backrooms에서 영감을 받아 개발됨
  • 이 프로젝트는 QR 코드 저장 및 압축의 한계를 시험하고, QR 코드 내에서 경량 웹 애플리케이션을 호스팅하는 혁신적인 방법을 보여주기 위해 설계됨
  • 게임은 인터넷 연결 없이 QR 코드를 스캔하여 플레이할 수 있으며, 극도로 압축된 형태로 제공됨
  • DecompressionStream API를 사용하여 브라우저 내에서 동적으로 게임을 실행할 수 있음
  • 현대 모바일 브라우저에서 호환 가능하며, Python과 QR 코드 라이브러리를 사용하여 QR 코드를 생성할 수 있음

프로젝트 개요

  • The Backdooms는 QR 코드에서 직접 실행할 수 있는 HTML 게임으로, DOOM 1993과 The Backrooms에서 영감을 받아 개발됨
  • QR 코드 저장 및 압축의 한계를 시험하고, QR 코드 내에서 경량 웹 애플리케이션을 호스팅하는 혁신적인 방법을 보여주기 위해 설계됨

기능

  • 완전 오프라인: QR 코드를 스캔한 후 인터넷 연결 없이 게임을 플레이할 수 있음
  • 극한의 압축: Zlib 압축과 Gzip 디컴프레션 스트림, base64 인코딩을 사용하여 최종 결과를 극도로 압축함
  • 자체 추출 웹페이지: DecompressionStream API를 사용하여 브라우저 내에서 동적으로 게임을 실행함
  • 모바일 호환: Decompressionstream API를 지원하는 최신 모바일 브라우저에서 작동함 (Edge, Yandex, Opera)

설치 및 종속성

  • 기술적으로는 최신 웹 브라우저만 필요하지만, 약 2.5kb 게임의 QR 코드를 생성하려면 Python 3.7+, qrcode 라이브러리, pillow가 필요함

사용법

1️⃣ 게임을 QR 코드로 변환

  • 스크립트를 다음 명령어로 실행: python3 QRGEN.py <your-game.html> <output-qrcode.png>

2️⃣ QR 코드 스캔

  • 스마트폰이나 QR 스캐너를 사용하여 게임을 웹 브라우저에서 직접 열 수 있음

3️⃣ 즉시 플레이 🎮

  • 다운로드나 설치 없이 The Backdooms를 즐길 수 있음

기술적 분석

압축 워크플로우

  • 입력 HTML 읽기: 파일이나 입력 소스에서 주어진 HTML 콘텐츠를 읽음
  • Zlib 압축 + GZip 디컴프레션: HTML을 Zlib으로 압축하고 GZip의 Decompressionstream을 사용하여 최상의 압축을 구현함
  • Base64 인코딩: 압축된 데이터를 Base64로 인코딩하여 텍스트 기반으로 유지하고 HTML 파일에 안전하게 포함할 수 있도록 함
  • HTML 래퍼에 포함: JavaScript 기반의 자체 추출 HTML 래퍼가 생성됨. 이 래퍼는 브라우저에서 열릴 때 콘텐츠를 자동으로 디컴프레션하는 DecompressionStream API 함수를 포함함
  • 데이터 URI 변환: 전체 HTML을 data:text/html;base64,... 형식으로 변환하여 물리적 파일 없이 쉽게 저장하고 공유할 수 있도록 함

QR 코드 생성 논리

  • 시스템은 먼저 qr.make(fit=True)를 사용하여 콘텐츠 길이에 따라 QR 크기를 동적으로 조정하여 가능한 가장 작은 QR 버전을 생성하려고 시도함
  • 필요한 버전이 40을 초과하면 (QR 코드 표준 한계), fit=False로 버전 40을 강제함
  • 최대 데이터 용량을 허용하는 가장 낮은 오류 수정 수준 L을 사용하여 가능한 한 많은 데이터를 맞추려고 함
  • 데이터가 여전히 QR v40 수준 L에 맞지 않으면 프로세스가 실패하고 데이터가 QR 코드에 인코딩하기에 너무 크다는 오류 메시지가 반환됨

결과

  • 성공하면 QR 코드가 생성되고 표시됨
  • 실패하면 데이터가 QR 코드에 인코딩하기에 너무 크다는 오류 메시지와 함께 프로세스가 종료됨

라이선스

  • 이 프로젝트는 MIT 라이선스 하에 공개되어 있으며, 자유롭게 사용, 수정, 공유할 수 있음

크레딧

  • DOOM을 개발한 id Software
  • 5년 전 이 아이디어를 제안한 matttkc
  • Undertale의 놀라운 음악을 만든 Toby Fox, 이 게임의 GitHub 호스팅 버전은 Bonetrousle의 8비트 버전을 사용함
  • Kuber Mehta에 의해 개발됨
▲
GN⁺ 16시간전  [-]
Hacker News 의견

  • 나는 가끔 무작위 프로젝트를 시작하는데, 이번에도 그런 경우였음. 올해 초 일주일 동안 만든 프로젝트였지만 공유하지 않았고, 이번에 공유하기로 했음

    • Doom과 The Backrooms에서 영감을 받아 The Backdooms라는 게임을 만들었음. 이 게임은 최소화된 HTML로 2.4kb 이하로 제작되었음
    • GZip을 Zlib 헤더와 함께 사용하는 비인기 방법을 사용했으며, 이를 위해 직접 스크립트를 작성하여 압축했음. 이 과정은 Decompressionstream API를 사용하여 브라우저에서 작동하는 40 크기의 QR 코드로 변환되었음
    • 이 설명은 매우 단순화된 것이며, DOOM에서 사용된 많은 기술을 사용하면서도 무한 시드 기반의 맵 생성과 결합하여 2.4kb로 만드는 것은 매우 어려웠음
    • 더 읽고 싶다면 다음 링크를 참고할 수 있음
      • 저장소 링크 (MIT 라이선스): [GitHub 링크]
      • The Backdooms의 호스팅된 (약간 개선된) 버전: [GitHub Pages 링크]
      • 게임 트레일러: [YouTube 링크]
      • LinkedIn 게시물: [LinkedIn 링크]
    • (참고: 이 게임을 플레이하려면 [QR 스캐너 링크]와 같은 큰 QR 코드를 스캔하고 텍스트 데이터를 브라우저에 넣어야 함)
    • 개발 과정과 개발을 자세히 기록한 블로그
      • [블로그 링크 1]
      • [블로그 링크 2]

  • 다음 프로젝트: LLM을 QR 코드로 만들기

    • 관련 링크: [Reddit 링크]

  • 정말 멋진 프로젝트임. 'data:' URL에 대해 알게 되었음. 'data:' URI 스킴을 알고 있었지만, 전체 URL로 사용할 수 있다는 것을 몰랐음. QR 코드에 전체 게임을 넣을 수 있을까 생각했지만, HTTP(s) 링크가 필요하다고 잘못 생각해서 보류했었음. 이 작업에 크게 영감을 받았음: QR 코드에 전체 게임을 넣을 수 있을까? [YouTube 링크]

  • 저장소에 몇 가지 스크린샷을 추가해주길 바람. 나는 휴대폰으로 보고 있는데, 이유는 모르겠지만 3개의 버튼과 검은 화면만 보였음

    • 수정: GIF를 추가하면 YouTube에 의존하지 않아도 됨

  • iPhone의 기본 QR 코드 스캐너로 스캔했는데 "사용 가능한 데이터가 없음"이라고 나왔음

  • 캔버스의 CSS를 image-rendering: pixelated로 업데이트하여 이미지가 흐릿하지 않고 선명하게 보이도록 해야 함

  • 계속 멋진 것을 만들어주길 바람, kuberwastaken

  • 대단한 프로젝트임. "자체 포함 QR 코드"가 canitrundoom에 추가되기를 기다리고 있음 (기술적으로 승인될 수 있을지는 모르겠음)

    • 하지만 이제 그 게임 때문에 QR 코드를 스캔하기 전에 두 번 생각하게 될 것 같음 ^^

  • 이 프로젝트는 Snow Crash와 가까워지고 있는 느낌임. QR 코드를 보고 내 뇌가 변형되고 있는지 궁금했음 :-D 놀라운 작업임

  • 매우 멋짐. 작은 지적이지만: DOOM은 레이캐스팅을 사용하지 않았음. 이 프로젝트는 Wolfenstein 3D와 유사하며, Wolf3D는 레이캐스팅을 사용했음

답변달기