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ワークフローに関するフィードバックを求めています。
📖 完全なソースを読む: r/ClaudeAI
👀 See Also
Claudeが非開発者のサイトをSEOとAEOで1万人のユーザー獲得に導いた方法
非開発者がClaudeをSEOコンテンツ戦略、AEO最適化、技術監査に活用し、AIスキルマーケットプレイスを広告費0ドルで6週間で0から10,000人のアクティブユーザーに成長させた方法。
Claude AIがCSVの車旅行データを特定のプロンプトなしで分析
ユーザーが車の旅行データのCSVエクスポートをClaude AIにアップロードしたところ、追加の指示なしで包括的な分析とダッシュボードが自動生成されました。これはkWh/100マイルの効率指標に関する会話から始まりました。
ゲーム開発者は、自動フィードバック収集とコードリファクタリングにOpenClawを利用しています。
ゲーム開発者が、MacBook上でOpenClawをバックグラウンドサービス（LaunchAgent）として使用し、2つの開発プロジェクトを管理するセットアップを詳細に説明しています。このシステムは、Claude（Anthropicのモデル）をDiscordサーバーとTelegramに接続し、直接的な対話と自律的なタスク実行を可能にし、すべてのメモリは起動時に読み込まれるローカルのMarkdownファイルに保存されています。
脆弱なテストスクリプトがリリース遅延を引き起こした理由と、あるチームが取った対策
約15名のエンジニアからなるチームは、UIリフレッシュによってロケーターが壊れ、メンテナンスだけでQAエンジニアの時間の50〜60%を消費していたAppiumテストスイートを発見し、2回のリリースが遅れました。現在、人間のように画面を読み取りUI変更に適応するツールを使用してテストを再構築しています。