CSSQuake

 (cssquake.com)
1P by GN⁺ | ★ favorite | 댓글 1개
  • 브라우저에서 Quake를 실행하는 CSSQuake 데모로, 페이지에는 cssQuake v0.230 초기화와 coming soon! 상태가 함께 표시됨
  • 렌더링은 PolyCSS renderer v0.2.6이 맡으며, manifest·progs·definitions·weapon model·id1/pak0.pak 자산 로드 로그를 확인할 수 있음
  • 포함된 게임은 Quake Shareware version 1.06이며, Quake (C) 1996 id Software, Inc. 저작권 표기가 표시됨
  • 멀티플레이어 화면은 이름, 색상, 맵, fraglimit, timelimit, 최대 플레이어 설정과 Create, Join, Copy Link 동작을 제공함
  • 조작 안내와 디버그 토글까지 노출되어 있어, 현재 페이지는 실행 데모와 설정 UI를 함께 보여주는 상태임

브라우저에서 초기화되는 Quake 데모

  • 페이지 제목은 cssQuake - Powered by PolyCSS이며, 본문에는 v0.230과 coming soon!이 표시됨
  • 하단 로그에는 === cssQuake v0.230 initialized ===가 나타남
  • 로드 상태는 다음 순서로 표시됨
    • Host_Init
    • Loaded manifest
    • Loaded progs
    • Loaded definitions
    • Weapon model
    • Assets from id1/pak0.pak
  • 성능 표시 영역에는 0 FPS와 0 MS가 표시됨
  • 관련 링크는 cssQuake GitHub, id Software Quake GitHub, Layoutit임

멀티플레이어와 조작 설정

  • Multiplayer 메뉴에서 이름, 색상, 맵, fraglimit, timelimit, 최대 플레이어 수를 설정할 수 있음
    • 기본 맵 표시는 E1M1 the Slipgate Complex
    • 동작 버튼은 Create, Join, Copy Link
  • 맵 목록에는 다음 항목이 표시됨
    • E1M1 the Slipgate Complex
    • E1M2 Castle of the Damned
    • E1M3 the Necropolis
    • E1M4 the Grisly Grotto
    • E1M5 Gloom Keep
    • E1M6 The Door To Chthon
    • E1M7 The House of Chthon
    • E1M8 Ziggurat Vertigo
  • 조작 안내는 Gameplay와 Menu로 나뉨
    • Gameplay: WASD 이동, Mouse 시점, Click 발사, Space 점프, Shift 달리기, Ctrl 웅크리기
    • Menu: 방향키 탐색, Enter 선택, Esc 뒤로 가기
  • Debug와 Gameplay 설정에는 다음 토글이 표시됨
    • Show outlines, Show stats panel, Show FPS panel
    • Crosshair 조정
    • Dynamic lighting, Mute sounds, Show particles, Show enemies
    • Disable damage, Disable movement, Disable attacks, Invert mouse

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들

  • 대단한 성과지만, 90년대 Pentium-133 PC에서 돌리던 Quake가 내 Mac M1 Pro에서보다 더 부드러웠던 것 같아 신경 쓰임

    • 이 엔진은 성능 최적화가 된 게 아님. 결국 CSS를 쓰고 있으니까
    • 참고로 M2의 Chrome에서는 버터처럼 부드럽게 돌아가는데, Safari에서는 버벅이고 많이 잘리는 듯함
    • Firefox + Linux에서는 전혀 문제 없음. 다만 Gnome Web은 끊기고 이상함. WebKit/Safari 쪽 문제 같음
    • C로 컴파일한 Quake라면 M1에서 8K 전체 해상도로도 엄청 빠르게 돌 것임
    • 잠깐, Quack이 Pentium-133에서 돌아갔나? Pentium MMX 233MHz를 썼는데 잘 안 돌아갈 거라고 생각해서 구해볼 생각도 안 했음

  • 멋짐. vim보다 종료하기 어려움

    • 메뉴를 보고 싶으면 Tab을 누르면 됨. 게임으로 돌아가려면 메뉴 항목 바깥을 클릭하면 됨
    • 어떻게 종료했음? 아무것도 먹히는 게 없어 보임

  • 인상적임. 이건 CSS를 쓰도록 만든 렌더러뿐 아니라, 엔진과 게임 로직 전체를 재구현한 것 맞나? 원작과 다르게 동작하는 부분이 꽤 있어서 그렇게 보임
    예를 들면 어떤 버튼은 닿는 대신 쏴야 작동하고, 어떤 비밀문은 쏘는 대신 닿으면 열림

    • 안녕하세요! 제보 고맙고, 버튼은 이제 제대로 동작할 것임
      게임 로직 쪽은 빌드 단계에서 QuakeC/progs.dat 위에 작은 JS 추출기를 돌려 상태, 모델, 공격, 소리 같은 원천 정보를 JSON으로 생성함. 브라우저 런타임은 TypeScript이고, 그 정보를 사용해 Quake 비슷한 플레이를 구현함
    • 아니, 렌더러만 그런 것임. 게임 자체는 TypeScript임

  • 오랫동안 인터넷에서 본 것 중 처음으로 진심으로 웃게 만든 물건임
    https://cssdoom.wtf/도 확인해 봤는데 이것도 좋았음. 둘 다 요즘 시사 뉴스보다 훨씬 가볍고 좋음 \o/

  • 이 CSS Quake는 실행하려면 JS가 필요한 것 같음

  • CSS라는 해킹 위에 해킹을 쌓은 것의 확산, 그리고 CSS/JS/HTML이라는 웹 스택을 열렬히 싫어하는 입장이지만, 이건 CSS의 훌륭하고 정당한 사용 사례라고 봄 :)

  • 이거 https://github.com/NielsLeenheer/cssDOOM에서 가져온 건가?

  • 아주 멋짐. 한계가 어디까지인지 궁금함. 쏜 개가 공중에 떠 있는 게 보이는데, 이게 CSS 때문일까 아니면 고칠 수 있는 걸까?

    • .dog { display: float; }

  • 인상적이긴 하지만, 이런 건 선언형 스타일 언어로 가능하면 안 되는 일 같음

    • 게임 로직이 아니라 렌더링에만 CSS를 쓰는 것임

  • 와, 정말 멋짐. 정말 부드럽게 돌아감. 25년쯤 지나도 근육 기억이 그대로 남아 있다는 게 말도 안 되게 신기함

답변달기