CSSQuake

 (cssquake.com)
1 ポイント 投稿者 GN⁺ 4 시간 전 | 1件のコメント | WhatsAppで共有
  • ブラウザで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

関連記事

1件のコメント

 
GN⁺ 4 시간 전
Hacker Newsのコメント

  • すごい成果だけど、90年代の Pentium-133 PC で動かしていた Quake のほうが、自分の Mac M1 Pro より滑らかだった気がして気になる

    • このエンジンは パフォーマンス最適化 されているわけではない。結局 CSS を使っているから
    • ちなみに M2 の Chrome ではバターのように滑らかに動くけど、Safari ではカクついてかなり切れる感じ
    • Firefox + Linux ではまったく問題ない。ただし Gnome Web は途切れて変な感じ。WebKit/Safari 側の問題 っぽい
    • C でコンパイルされた Quake なら、M1 で 8K フル解像度 でもものすごく速く動くはず
    • ちょっと待って、Quake って Pentium-133 で動いたっけ？ Pentium MMX 233MHz を使っていたけど、まともに動かないと思って手に入れようともしなかった

  • すばらしい。vimより終了しにくい

    • メニューを見たければ Tab を押せばいい。ゲームに戻るにはメニュー項目の外側をクリックすればいい
    • どうやって終了したの？ 何も効かないように見える

  • 印象的だね。これは CSS を使うように作られたレンダラーだけでなく、エンジンとゲームロジック全体を再実装 したということ？ 原作と違う挙動の部分がかなりあって、そう見える
    たとえば、あるボタンは触れる代わりに撃たないと作動せず、ある隠し扉は撃つ代わりに触れると開く

    • こんにちは！ 報告ありがとう、ボタンはもう正しく動くはずです
      ゲームロジック側では、ビルド段階で QuakeC/progs.dat の上に小さな JS 抽出器 を走らせて、状態、モデル、攻撃、サウンドのような元情報を JSON に生成しています。ブラウザのランタイムは TypeScript で、その情報を使って Quake ライクなプレイを実装しています
    • いいえ、そうなのはレンダラーだけです。ゲーム自体は TypeScript です

  • 長いことインターネットを見てきた中で、久しぶりに心から笑わせてくれたものだった
    https://cssdoom.wtf/も見てみたけど、これも良かった。どちらも最近の時事ニュースよりずっと気楽でいい \o/

  • この CSS Quake は動かすのに JS が必要みたい

    • https://lyra.horse/x86css/ ならできるかも？
    • CSS はレンダリングを担当していて、ゲームロジックは TypeScript です

  • CSS という ハックの上にハックを積み重ねたもの の広がりと、CSS/JS/HTML というウェブスタックを熱烈に嫌う立場ではあるけれど、これは CSS のすばらしく正当な使い道だと思う :)

  • これって https://github.com/NielsLeenheer/cssDOOM から持ってきたの？

  • とてもクール。限界がどこにあるのか気になる。撃った 犬が空中に浮いている のが見えるけど、これは CSS のせいなのかな、それとも直せるもの？

    • .dog { display: float; }

  • 印象的ではあるけど、こういうことは 宣言的スタイル言語 でできてはいけない気がする

    • ゲームロジックではなく、レンダリングにだけ CSS を使っているんです

  • うわ、本当にすごい。ものすごく滑らかに動く。25年くらい経っても筋肉の記憶 がそのまま残っているなんて、信じられないくらい不思議だ