最近、プロンプトから「Minecraft風の横スクロール2Dアクションゲーム」を単一のHTMLファイルで生成させる試みを行いました。
対象はGPT-5とAWS Kiro。どちらも高性能な生成AIですが、実際に同じ課題を与えたところ、完成度は結構な差がありました。
プロンプト
あなたは高品質なフロントエンド開発者兼ゲームエンジンとして動作すること。指示に従い、以下の要件をすべて満たす単一の自己完結型HTMLファイルを出力せよ。出力はHTMLファイルの全文のみとし、余分な説明や注釈は一切付けないこと。
目的:「Minecraftのような要素を持つ横スクロール2Dアクションゲーム」をWebで動作する単一HTMLにまとめる。
必須機能:
1. 単一ファイル:すべてのコードとスタイルは1つのindex.htmlにインラインで含める。外部ライブラリ、外部画像、外部フォントは一切使わない。
2. レンダリング:HTML5canvasを使った高速な描画。requestAnimationFrameでループ制御。
3. タイル/ブロック世界:グリッド(16pxまたは32pxタイル)で構成される無限に近い横スクロールワールドを生成(チャンク方式でオンデマンド生成)。地形はノイズ(シード可能なパーリンノイズか簡易ノイズ)で生成し、土/石/草/木など複数ブロックを含む。
4. ブロックの編集:プレイヤーは「掘る(左クリック/キー)」「置く(右クリック/キー)」ができる。ブロック破壊は耐久値・ツールによる速度差を反映。
5. プレイヤー操作:左右移動、ジャンプ、重力、床反発、基本的な当たり判定を実装。キーボード(矢印/WASD/Space)とタッチ用の簡易UIに対応。
6. インベントリ:最小限のスロット(例6スロット)を表示。掘ったブロックはインベントリに入る。配置は選択スロットのブロックを使う。
7. 簡易クラフト(任意だが推奨):木材→木プラットフォームのような単純レシピを1〜2個実装。
8. 敵とダメージ:簡易的な敵(地上を歩く1種)を1体実装。接触でダメージ、プレイヤーHP表示、死に戻り(リスポーン)処理。
9. セーブ:ローカルストレージでワールドのシードとプレイヤー位置・インベントリを保存し、リロードで復元。
10. パフォーマンス:描画は可視範囲のみ、チャンク単位で生成・破棄。ガベージ発生を抑える工夫をする。
11. モバイル対応:タッチ操作用の画面UI(左右ボタン、ジャンプ、行動ボタン)を用意。
12. アクセシビリティ:キーボードだけでプレイ可能、主要操作は明示的にキーマップ表記。
13. コメントとコード品質:主要関数に日本語コメントを付け、読みやすくモジュール化。外観はシンプルでモダン。
14. ファイルサイズ:必要最小限の実装で、コードは過剰に冗長にしないこと(ただし可読性優先)。
15. 出力ルール:生成するコードはブラウザでそのまま開けば動作する完全なHTML文書のみ。出力に追加の説明文、リンク、注釈を含めないこと。
実装上の細かい仕様(参考・必須):
- タイルサイズは32px推奨。可変にできるよう定数化すること。
- チャンクは横方向に256タイル程度の単位で生成、プレイヤーの近傍チャンクのみ保持。
- ノイズはシード可能にして、localStorage経由で保存/読み出し可能にする。
- 衝突判定はAABB方式で簡素に実装。滑り落ちやすい斜面処理は不要。
- ブロックは単純な色塗りで表現。必要なら小さなパターンをCanvasで描画して「ブロック感」を出す。
- 入力: マウス/タッチでブロックを選択・操作、キーボードで移動。ゲームパッドは任意で対応。
- サウンドはオプショナル。もし実装する場合はWebAudioで短い生成音(生成的サウンド)に限定し、外部音声ファイルは使わない。
- デバッグ用に画面のFPS、チャンク数、プレイヤー座標などを表示するトグルを実装。
- 最後に、コード末尾に「//END」など不要な文字列は入れない。
出力命令(重要):出力は「完全なindex.htmlのソースコードだけ」を返すこと。人間向けの追加の説明や注意書きは一切書かないでください。
以上を満たす高品質な単一HTMLを生成せよ。
ちなみにこのプロンプトはGPT-5に作ってもらいました。
GPT-5の結果
See the Pen Untitled by STELLAR INTER (@STELLAR-INTER) on CodePen.
- 必須機能の多くを省略してしまう傾向があった
- プレイヤーのブロック破壊や設置が不完全
- 背景が真っ暗
- バグが多く、そのままではただ暗い空間を歩くだけのゲームに
- 行数は600行弱でコンパクトだが、不完全さが残る
総じて「要求仕様を勝手に削る」印象が強く、最低限動くものは生成するが、そのままでは完成度が低いと感じました。
Kiroの結果
See the Pen Untitled by STELLAR INTER (@STELLAR-INTER) on CodePen.
- プロンプトに含まれる要件をできる限り忠実に再現
- ブロック破壊・設置が自然に動作
- 背景や描画も初期状態から適切に設定
- インベントリや敵の挙動も問題なく動作
- 行数はGPT-5より約200行多く、全体で800行程度
- コードは長いものの、完成度が圧倒的に高い
Kiroでは、「ユーザーの意図を正確にくみ取り、仕様に忠実に実装」してくれる印象を受けました。
何度かアプリを作ってみたり拡張機能を作ってみたりする中で、Kiroは一発目でもかなり完成度が高いものを生成してくれることが多いと感じています。
GPTとかだと何回か生成してみていい感じのものに近づけるプロセスが必要ですが、Kiroはそれがほとんどありません。
もちろん、私はプロンプト作成が下手なので、それもGPTの結果に影響している可能性はありますが...