3日目。フルRPGを1日で作るよう頼みました。ブラウザ上で。
プロンプト#
「アイソメトリックグラフィック、キャラクターカスタマイズ、ターン制戦闘、クエスト、セーブ/ロードシステムを備えたブラウザベースのRPGを作りたい。」
これは一つのプロンプトとしては無謀なほどの要求です。RPGは小さなゲームではありません。キャラクタークラス、インベントリシステム、ダイアローグツリー、クエスト追跡、戦闘メカニクス、マップ探索——それぞれ一つでも独立したプロジェクトになり得るものばかりです。それを一度に全部頼んだらどうなるか、試してみたかったのです。
制作の過程#
Watchfireがプロンプトを受け取り、タスクに分解しました。package.jsonにはその最初のタスクの痕跡が名前として残っています：watchfire-0000-project-setup---initialize-nex。プロジェクト構造を見ると、作業がコアシステムに分かれていることがわかります。Next.jsとPixi.jsによるプロジェクトのセットアップ、型定義、ゲーム状態管理、3つのゾーン（town、forest、dungeon）のマップデータ、戦闘エンジン、アイテムと敵のデータベース、ダイアローグシステム、クエストデータベース、アイソメトリックレンダリング、そしてその上に重なるUIコンポーネント群です。
コンポーネントのリストだけで、どれだけのものが作られたかがわかります：CharacterCreation、CombatUI、DialogueBox、EquipmentPanel、GameHUD、GameMenu、Inventory、IsometricWorld、ItemTooltip、MainMenu、QuestLog、SaveLoadMenu、SettingsPanel、VictoryScreen。14のReactコンポーネントに加え、その下のゲームロジック層があります。
私は各パーツを逐一指示したわけではありません。戻ってきたら動くゲームができていて、そのままプレイし始めました。
完成したもの#
これには本当に驚かされました。
ゲームが自分で名前をつけました。 「Realm of Shadows: An Isometric Adventure」。私は名前を指定していません。それ自身が名前を選び、スタイリッシュなテキストでタイトル画面をデザインし、メインメニューに設定オプションまで追加していました。ダークネイビーとゴールドの配色がゲーム全体を貫いています。
キャラクター作成は複数ステップのウィザード形式です。 名前を入力し、クラスを選び、スタートする前にステータスを確認します。画面上部にプログレスドットが表示される3つの画面で案内されます。各クラス（Warrior、Mage、Rogue）はそれぞれ異なるステータス配分と初期装備を持ちます。
クラス選択カードには各オプションのステータス内訳が表示されます。Warriorは体力と力が高く、Mageは魔力とマナが高く、Rogueは速度が高くバランスの取れたステータスです。各クラスの小さなアイコンと色分けされたステータスバーがあります。洗練されたUIです。
サマリー画面には初期装備が表示されます。 JohnというMageはWooden Staff、Cloth Tunic、Leather Pants、Worn Bootsでスタートします。確定前にすべての基本ステータスを確認できます。このようなディテールがゲームを完成品らしく感じさせます。
アイソメトリックの世界は実際に機能しています。 建物、道、NPCが歩き回る町があります。キャラクターには左上にHP、MP、レベルを示すHUDがあります。右上にはミニマップがあり、現在地として「Willowbrook」が表示されています。タイルをクリックするかWASDキーで移動します。
NPCにはダイアローグツリーがあります。 Elder Miraが挨拶します：「ああ、ついに目覚めましたね！私はElder Mira、Willowbrook村の守護者です。」ダイアローグボックスが画面下部に表示され、NPCの名前がゴールドでハイライトされます。クリックするかEnterキーで続けます。
ダイアローグは分岐します。 Elder Miraは森の闇の生き物への対処を手伝ってくれるか尋ねます。「助けましょう」または「その生き物についてもっと教えて」の2つの選択肢があります。これは単なるフレーバーテキストではありません。クエストシステムと連動しています。
完全なクエストログがあります。 タブでアクティブと完了済みのクエストを追跡します。「A New Beginning」はメインクエストで、メインストーリーとしてマークされています。目標（「Elder Miraと話す」）、報酬（ゴールドとXP）、クエストの説明が表示されます。UIは他と同じゴールドとダークのスタイルです。
ポーズメニューは充実しています。 Resume、Inventory、Character、Quest Log、Save Game、Settings、Main Menu。上部にキャラクター名、クラス、レベル、HP、MPが表示されます。これは即席のハックではありません。情報の階層構造が考えられています。
戦闘はターン制で、選択肢がきちんとあります。 Green Slimeと戦います。あなたと敵の両方にHPバーがあります。画面下部のアクションバーには5つの選択肢があります：Attack、Magic、Defend、Item、Flee。それぞれ色分けされています。戦闘画面は見やすくすっきりしています。
勝利するとXPとゴールドを獲得します。 Green Slimeを倒すと、経験値と通貨が得られます。勝利画面には獲得したものが正確に表示され、続行ボタンがあります。シンプルで満足感のあるフィードバックループです。
インベントリシステムには装備スロットとバックパックがあります。 武器、頭、胴、脚、足、2つのアクセサリースロットがあります。バックパックにはグリッドにアイテムが表示されます。下部で武器ダメージと防具の防御力を確認できます。
アイテムにはツールチップとアクションがあります。 Small Health Potionにカーソルを合わせると、説明（「HPを30回復」）とUseおよびCancelボタンが表示されます。これは本物のインベントリシステムであり、プレースホルダーではありません。
キャラクターステータスパネルにはすべてが表示されます。 ゲームワールドに重なってフルステータスシートが表示されます。名前、クラス、レベル、経験バー、HP、MP、すべての個別ステータス。また、装備中のアイテムとそのステータス値もリストアップされます。
バグレポート#
今回は初期プレイテスト以外で特定のバグを記録しませんでした。最初のロードからゲームが動作していたのは、1日目からの嬉しい変化でした。NPC interaction、戦闘フロー、セーブシステムはすべて問題なく機能し、私がissueを報告する必要もありませんでした。とはいえ、まだ粗削りな部分はあります。アイソメトリックの移動は少しぎこちなく感じることがあり、戦闘はもっと敵の種類があってもよかったかもしれません。しかし壊れているものは何もありませんでした。
数字で見ると#
- 34のソースファイル：コンポーネント、ゲームロジック、フック、型、ユーティリティにわたる
- 3つのマップゾーン（town、forest、dungeon）とアイソメトリックタイルデータ
- 14のReactコンポーネント：すべてのゲームUI用
- 6つのゲームエンジンモジュール（combat、items、enemies、dialogue、quests、isometric rendering）
- Next.js 16 + Pixi.js 8 + React 19 + TypeScriptのtech stack
- 実際に手をかけた時間： プレイと探索で約20分
試してみる#
WASDまたは矢印キーで移動。NPCをクリックして会話。I、C、Qでインベントリ、キャラクター、クエストログを開く。ESCでメニュー。F5でクイックセーブ。
Day 3の評価#
これは、このチャレンジを単なる目新しいものとして見るのをやめたプロジェクトです。アイソメトリックグラフィック、3つのキャラクタークラス、分岐するダイアローグ、クエストシステム、インベントリ管理、装備スロット、ターン制戦闘、永続セーブを備えたターン制RPG。ブラウザ上で。一つのプロンプトから。
私はRPGを作ったことがありません。アイソメトリックレンダリングエンジンを実装したことも、戦闘システムや装備システムやダイアローグツリーを設計したこともありません。それぞれ個別にどこから始めればいいかもわからないのに、ましてやすべてを一緒にやるなんて。完成できたとしても、私にとっては数ヶ月規模のプロジェクトになっていたはずです。
これは完全なRPGでしょうか？厳密にはそうではありません。骨格はあります。コンテンツは薄く、エンカウントは数えるほどしかなく、ストーリーはありきたりなファンタジー設定です。しかしすべてのシステムが揃っていて、連動して機能しています。作ったキャラクターは戦闘に引き継がれ、装備がステータスに影響し、クエストが進捗を追跡し、セーブはセッションをまたいで永続します。アーキテクチャはしっかりしています。
最も驚いたのはUIの品質です。ダーク背景のゴールド配色、複数ステップのキャラクター作成ウィザード、ステータスバー、タブ付きのクエストログ、インベントリグリッド。それらは私のプロンプトには一切含まれていませんでした。システムを求めて、デザインされた体験を得たのです。それは、時間が無限にあっても私にはできなかった部分です。私はデザイナーではないので。
このようなものを作るコストが崩壊しました。優れたRPGを作るコストではありません。それには今もコンテンツの充実、バランス調整、磨き込みに何年もかかります。しかし本物のシステムを備えた動くRPGプロトタイプを作るコスト？それは数ヶ月から数時間に変わりました。
これは30 Days of Vibe Codingの3日目です。AIアシスト開発で30日間に30プロジェクトを出荷していく過程を追いかけてください。
