Skip to content

技術スタック

アーキテクチャ概要

サーバーレス設計思想

InspirationCat のアプローチに倣い、サーバーを持たない設計を採用する。

項目従来のゲームRift Survivors
ゲームロジックサーバーサイドブラウザ内で完結
データ保存DB(RDS等)localStorage
アセット配信CDN + OriginCloudflare Pages(帯域無制限)
認証OAuth / Sessionなし(ログイン不要)
課金月額サーバー代$0
スケーリングAuto Scaling不要(静的配信)

なぜサーバーレスか

  1. コスト: バズっても課金されない。50万アクセスでも$0
  2. 運用: サーバー管理不要。セキュリティパッチも不要
  3. プライバシー: ユーザーデータを一切収集しない
  4. レイテンシ: サーバー通信なしでゲームロジック即実行
  5. 可用性: Cloudflare の CDN エッジから配信。ダウンタイムなし

技術選定

コア技術

技術用途選定理由
Viteビルドツール高速HMR、Tree-shaking、TypeScript標準対応
TypeScript言語型安全性、AI生成コードの品質担保
Three.js3DレンダリングVibe Jam推奨、WebGL対応、豊富なエコシステム
Cloudflare Pagesホスティング帯域無制限無料、グローバルCDN

ブラウザAPI活用

API用途
Web Audio APIBGM・SEの再生、プロシージャル音楽生成
localStorageキャラクター・装備・進行データの永続化
sessionStorageポータル一時データ
Canvas API2Dオーバーレイ(HUD、カットイン演出)
requestAnimationFrameゲームループ
Gamepad APIコントローラー対応(任意)

依存ライブラリ(最小構成)

ライブラリ用途サイズ目安
three3Dレンダリング~150KB (gzip)
three/examplesポストプロセス、ローダー必要分のみ

バンドルサイズ制約

Vibe Jam の要件「ロード画面や重いダウンロードは極力なし」に準拠するため、 初回ロードの合計サイズを 2MB以下 に抑える。

ディレクトリ構成(予定)

vibejmgame/
├── docs/                    # 設計書(VitePress)
├── src/
│   ├── main.ts              # エントリーポイント
│   ├── game/
│   │   ├── Game.ts          # ゲームコア(ループ、状態管理)
│   │   ├── scenes/
│   │   │   ├── LobbyScene.ts
│   │   │   ├── DungeonScene.ts
│   │   │   └── PvPScene.ts
│   │   ├── entities/
│   │   │   ├── Player.ts
│   │   │   ├── Enemy.ts
│   │   │   └── Item.ts
│   │   ├── systems/
│   │   │   ├── CombatSystem.ts
│   │   │   ├── DropSystem.ts
│   │   │   ├── DungeonGenerator.ts
│   │   │   └── PortalSystem.ts
│   │   └── ui/
│   │       ├── HUD.ts
│   │       ├── CutinAnimation.ts
│   │       ├── LevelUpUI.ts
│   │       └── LobbyMenu.ts
│   ├── audio/
│   │   └── AudioManager.ts
│   ├── portal/
│   │   ├── VibeversePortal.ts
│   │   └── PortalParams.ts
│   └── utils/
│       ├── Storage.ts
│       └── Math.ts
├── public/
│   ├── index.html
│   └── assets/              # 静的アセット
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md