Claude ゲーム開発ログ：エージェント的Three.js開発の教訓とスタック

エージェント的ゲーム開発ワークフロー

ゲーム開発経験のないウェブ開発者が、2週間かけてClaude AIのみを使用してThree.jsのライドゲーム「LUMINAL」を構築し、直接コードを書くことなく完成させました。開発者は、忍耐力とClaude 5xまたは20xのサブスクリプションがあれば、誰でも数か月で質の高いゲームを制作できると報告しています。

主要な開発プラクティス

• Git戦略: Gitワークツリーを使用して衝突を回避し、開発ブランチを維持し、機能ブランチでのみ作業します。機能が完了したらAIセッションを閉じて新しいセッションを開始します。
• TypeScriptとテスト: TypeScriptを早期に導入し、ユニットテストを早期に記述します。コンテキストが利用可能な間にすべての計画にテストを含めます。定期的にテストを監査し、エンドツーエンドテストを遅らせないでください。
• インフラストラクチャの認識: Claudeに繰り返しタスクを依頼するタイミングを特定し、品質保証が繰り返しになる前に共有インフラストラクチャを構築します。
• ツール統合: スキル構築とブレインストーミングにはSuperpowersプラグインを使用し、コードレビュー、仕様構築、ターゲットUI調整には20ドルのCodexサブスクリプションを使用します（画像ベースのUIフィードバックではClaudeよりも優れています）。
• ターミナル設定: 他の設定よりもWARPターミナルが推奨されます。

AIの制限への対応

AIは、カラーパレット、ブルームレベル、手続き型サウンドデザインなどの主観的な問題に苦労します。解決策：Claudeに、ブルーム、カラーマップ、手続き型サウンドなどのパラメータ用に数百の管理者専用スライダーとトグルを構築させ、JSONエクスポート/インポート機能で構成をAIにフィードバックします。

リソースの活用

すべてを一から構築するのではなく、既存のリソースを使用します：21st.dev、CodePen、Sketchfab、コミュニティアセットなど。

開発の知恵

• バグ修正よりも速く構築できます。あまりにも多くのものを急いで追加すると、数週間の調整とブラウザテストが必要になります。
• ダウンタイムを利用して、Workflowyなどのツールを使用して計画を立てます。Claudeや使用制限を待つ間に、ChatGPT/Codexで詳細を詰めるための20〜30の計画/考え/バグ修正を用意します。
• 即時の収益化よりも、学習と楽しみに焦点を当てます。

技術スタック

• コア: TypeScript、Three.js、Vite
• バックエンド: Firebase（認証、RTDB、Firestore、ホスティング、クラウド関数）
• ゲームサーバー: Node.jsとws WebSocketライブラリ
• テスト/リンティング: Vitest + ESLint
• ネットコード: WebSocketリレー（Cloudflare Workers）を介して入力デルタのみを同期する決定論的ロックステップシミュレーション。クライアント間で一貫した状態を保つために、シード付きRNG + フレームハッシュの非同期検出を使用します。再接続にはさらなる作業が必要です。

ゲームURL: https://luminal.live/（「まだバグだらけの混乱」と表現）