cssQuake: PolyCSS を使ってブラウザで Quake をプレイする

cssQuake は CSS で Quake を描画します

cssQuake は、ユーザーが Quake のシェアウェア版 (v1.06) をウェブブラウザ上で直接プレイできる技術実験です。このプロジェクトは PolyCSS レンダラ (v0.2.6) によって動作し、WebGL や HTML5 Canvas といった従来の GPU 加速レンダリング手法を CSS ベースのレンダリング技術に置き換えます。

技術的実装と機能

cssQuake v0.223 は、オリジナルのゲームロジックをカスタムレンダリングパイプラインと統合しています。システムは元の id1/pak0.pak アセットとマニフェストを読み込み、1996 年の id Software の体験を再現します。

基本的なゲームプレイメカニクス

  • Controls: 標準的な WASD で移動、マウスで視点操作、スペースでジャンプ。Shift で走り、Ctrl でしゃがみます。
  • Level Support: ゲームにはいくつかのクラシックマップが含まれ、E1M1（The Slipgate Complex）、E1M2（Castle of the Damned）など、E1M8（Ziggurat）までがあります。
  • Multiplayer: インターフェースにはマルチプレイヤーセッションの作成・参加オプションがあり、フラグ制限、時間制限、最大プレイヤー数などの設定が可能です。

デバッグとカスタマイズ

ユーザーはオプションメニューから複数の技術的オーバーレイやゲームプレイ修正を切り替えることができます:

  • Visual Debugging: アウトライン表示、統計パネル、FPS パネルを表示するオプション。
  • Gameplay Modifiers: 動的照明、パーティクルエフェクト、敵の可視性、ダメージ/移動/攻撃の無効化を切り替えるオプション。
  • Input: マウス反転のサポート。

コミュニティのフィードバックとパフォーマンス

コミュニティは cssQuake を CSS の能力を示す印象的なデモと見なす一方で、ユーザーからはパフォーマンスや安定性に関してさまざまな報告が寄せられています。

パフォーマンス観測

ハードウェアによってパフォーマンスは大きく異なります。M1 MacBook Air を使用したユーザーはスムーズな 60 FPS を報告する一方、M1 Pro Mac のユーザーはゲームが 1990 年代の Pentium-133 ハードウェア上よりも滑らかさに欠けると指摘しています。

技術的制限とバグ

ユーザーは複数の「不安定」な動作やエンジンの不整合を特定しています:

  • Collision and Movement: 角で詰まる、斜面の移動が困難、時折「ラバーバンド」現象が起きるといった報告。
  • Rendering Glitches: カメラがマップの前方に急にクリップし、武器を発射したときにのみリセットされるという視点のクリッピングを経験したユーザーがいます。
  • Logic Discrepancies: ボタンやシークレットドアなどの特定のゲームオブジェクトがオリジナルと異なる挙動を示し、触れる代わりに射撃が必要、またはその逆であると指摘するユーザーがいます。
  • Visual Artifacts: 犬などのエンティティが空中に浮いているという報告。

JavaScript の役割

レンダリングに CSS を重点的に使用しているにもかかわらず、プロジェクトは機能するために JavaScript を必要とします。CSS は世界の視覚的表現を担当しますが、ゲームエンジンのロジックを駆動し、CSS プロパティをリアルタイムで更新するために JavaScript が不可欠です。

開発者向けリソース

Sources