Rogue Boomer Shooter

絵文字をテーマにした DOOM ライクな Boomer Shooter FPS。ゲームエンジンは使わず、TypeScript と WebGL 2.0 だけでランタイムを自作した。プロシージャル生成の 8 階層ダンジョンを、4 種の武器で絵文字の敵を撃ち抜いていく 1 週間の個人ゲーム。

Overview

• DOOM ライクな Boomer Shooter — ストレイフ + 高速移動 + 即死級の火力でクラシック FPS の爽快感
• 絵文字アート — 敵もアイテムもテクスチャは絵文字。ビジュアルを作り込まずに世界観を成立させるための選択
• プロシージャル生成マップ — 起動のたびに別レイアウト。8 階層構成
• 武器 4 種 — Pistol / Shotgun / Chaingun / Rocket Launcher
• 敵 AI — パトロール → 視線検出 → アラート → 追跡の 4 ステート
• TDD 開発 — Vitest で 687 テストをパスさせながら 1 週間で仕上げた

Architecture

graph LR
  Input["input/<br/>Keyboard + Mouse"] --> Core["core/<br/>GameManager<br/>StateManager"]
  Core --> Game["game/<br/>Player / Enemy / Weapon"]
  Core --> World["world/<br/>SectorMap / Blockmap"]
  Core --> MapGen["mapgen/<br/>MapGen / GenStep"]
  Game --> Physics["physics/<br/>Raycast / Collision"]
  Game --> Effects["effects/<br/>Particle / BulletMark"]
  World --> Physics
  Core --> Render["render/<br/>WebGL2 / Camera / Shader"]
  Effects --> Render
  Game --> UI["ui/<br/>HUD / Menu / Tutorial"]
  Core --> Audio["audio/<br/>Web Audio API"]
  Render --> Canvas["WebGL2 Canvas"]

Rendering

WebGL 2.0 + GLSL ES 3.00 を直接叩いている。Three.js / Babylon.js は入れていない。フレーム予算を守るために数段の最適化を仕込んだ。

• FrustumCuller — カメラ視錐台外のオブジェクトを描画パイプラインから落とす
• UnifiedMeshBuilder — 地形描画をひとつの大きなメッシュに合成して、ドローコールを 1 回まで畳む
• ObjectPool — Projectile / Particle / DamageNumber はプールから再利用。GC による frame hitch をほぼゼロにする
• Blockmap 空間分割 — 衝突判定の候補絞り込みを O(n) → O(1) に。敵が増えてもフレームレートが落ちにくい
• パフォーマンス HUD (F3) — FPS / CPU・GPU 時間 / ドローコール数をゲーム中にリアルタイム表示。ボトルネックをその場で見つける

Tech Decisions

• エンジン非採用 — Three.js も Babylon.js も使わない方針。WebGL2 と GLSL のレイヤを自分で組みたかったのが動機。結果として地形の unified mesh 化やオブジェクトプール設計まで全部自分の責務になり、最適化のネタが自然に出た
• 絵文字テクスチャ — スプライト制作に時間を取られないための決定。1 週間で完成させる制約と整合
• TypeScript strict mode + Biome — ESLint + Prettier ではなく Biome 1 本。設定ファイルを増やさずに lint + format + check を回せる
• TDD — レンダリング以外は基本テストから書いた。物理 (Raycast / Collision / Spread)、マップ生成、オブジェクトプール、敵 AI といった「壊れると気づかない」層に特に効いた
• 音声は Web Audio API を直接 — BGM / SFX / 足音を自前でミキシング。有料サンプル前提なのでリポジトリには同梱していない

Controls

• 移動: W/A/S/D、Shift でダッシュ (クールダウン 2 秒)
• 視点: マウス
• 戦闘: 左クリックで射撃、1 / 2 / 3 / 4 で武器切り替え
• システム: Esc ポーズ、F3 パフォーマンス HUD、F12 デバッグコンソール

Constraints

• 音声ファイル (src/assets/sfx/*.ogg) は有料サンプル起点のためリポジトリ外
• WebGL 2.0 対応ブラウザ必須

Links

• GitHub: neletolus/my-rogue-boomer-shooter
• 本作の WebGL2 最適化話は GENEROSITY TECHBOOK Vol.1 第 3 章「自作ローグライク FPS で説明する WebGL2 グラフィック最適化」に寄稿