Claude CodeでピクセルアートJRPGを作る：開発者のワークフローと技術スタック

開発者がClaude Codeを使用して完全なピクセルアートJRPG「Bakemachi」を構築した経験を共有しました。このゲームは日本語学習用に設計されており、主要なゲームプレイ要素のほとんどが実装されたプレイ可能なデモが含まれています。

プロジェクト詳細

ゲームにはフィールド探索、インタラクティブな語彙付きNPC会話、ミニゲーム、戦闘システム、クエスト追跡機能があり、タッチ、キーボード、コントローラー入力をサポートしています。プレイ可能なデモは約10〜15分でプレイでき、https://bakemachi-steam-demo-production.up.railway.app/でアクセス可能です（「New Game」をクリックして開始）。

技術スタック

• フロントエンド: Vite + React + TypeScript
• ゲームエンジン: Phaser 3がゲームキャンバスを処理（タイルベースの移動、スプライト、アニメーション）
• 状態管理: ZustandがPhaserとReactを連携
• UI: Reactがすべてのオーバーレイをレンダリング（会話、メニュー、HUD、戦闘、ミニゲーム）
• アセット: ほとんどが手作りまたは購入品で、一部の「ピクセルアート」アセットはNano Bananaによって生成

Claude Codeのワークフロー

開発者はプロジェクト全体にClaude Code（Opus 4.6）を使用し、自身はゲーム開発者ではなく、これが初めてのゲーム開発であると述べています。彼らのワークフローは以下の通りでした：

• 自然言語で要件を記述
• Claudeのコード出力をレビュー
• プレイテスト
• 結果に基づいて反復改善

Claude Codeに関する主な観察点

• 複雑な変更: Claudeはマルチファイル変更を効果的に処理し、ストア、コンポーネント、設定、Phaserシーンにまたがる約8ファイルに影響する戦闘システムの追加など、初回で適切なアーキテクチャを実現しました。
• コンテキスト管理: Opus 4.6は以前のバージョンよりも長いコンテキストで優れたパフォーマンスを発揮しました。開発者はclaude.mdとprogress.mdファイルを維持することで、シームレスなセッション切り替えを可能にしました。
• デバッグ: Claudeはスクリーンショットや視覚的バグの説明が提供されると、コードをトレースして問題を迅速に修正するデバッグに優れています。ただし、要素の配置などのマイクロなフロントエンドタスクには苦戦することがあります。

開発者は最終的にSteam、iOS、Androidでゲームをリリースする計画で、ゲームとClaude Codeワークフローに関するフィードバックを求めています。