Floniks
ブログへ戻る
ショーケース約 8 分で読めます

スクリーンショット 1 枚から、パズルゲームを作る:プロンプトゼロのエージェント開発記

入力はスクショ 1 枚とひと言、出力はブラウザで遊べるロジックパズル——AI アート、生成 BGM、15 秒広告まで Floniks 製。人間のプロンプトはゼロ:エージェントが自らルールを調査し、動画からキーフレームを抽出し、MCP 経由で生成能力を直接呼び出しました。

著者: Elena Park
スクリーンショット 1 枚から、パズルゲームを作る:プロンプトゼロのエージェント開発記

入力はスクリーンショット 1 枚とひと言。出力は、ブラウザでそのまま遊べる完成度の高いロジックパズルゲーム——AI 生成のアート、生成された BGM、15 秒のゲームプレイ広告まで、すべて Floniks で制作。人間が書いたプロンプトはゼロ。本稿では、エージェントが何気ない指示を出荷済みのゲームに変えていく過程と、このパイプラインが一度も停滞しなかった理由を順を追って振り返ります。

本稿は全 2 回の前編です。後編《ひと言から、ビジュアルノベルを出荷する》では、同じ手法をボイス・立ち絵・分岐シナリオへ推し進めます。

バージョンの進化:左はひと言から生まれた v1、右が最終版——右パネルはブラウザで動作中の WASM 版の実機スクリーンショット
バージョンの進化:左はひと言から生まれた v1、右が最終版——右パネルはブラウザで動作中の WASM 版の実機スクリーンショット

人間が実際に提供したもの

このゲームへの人間の入力は、パズルゲームのスクリーンショット 1 枚、ゲームプレイ動画 1 本、そして数個の一行コメントだけ。設計書もルールブックもプロンプトエンジニアリングもなし。それ以外のすべて——ジャンル調査、タスク分解、素材生成、テスト、デプロイ——は、オープンソースエンジン rust_bevy_lua_gameMCP 経由の Floniks という 2 つのプラットフォームを使い、エージェントが統括しました。

入力の全台帳がこちら:

人間が言ったことエージェントが分解した内容
「このゲームを作って」(スクショ 1 枚)画像からジャンルを特定:Queens / Star Battle 系ロジックパズル——各行・各列・各色エリアに 1 駒ずつ、駒同士は斜めも含め隣接禁止
「ルールは自分で調べて」ルールを調査で補完し、各ルールをヘッドレステストの不変条件として符号化——ルール文書がそのままテストスイート
(何も言っていない)盤面は一意解であるべきと判断し、解の個数カウンタで強制
(何も言っていない)リポジトリの規約に従いコレクションのメニューへ自己登録、エンジン改変ゼロ

バージョン 1 は当日中に公開されました。

動画が仕様書になった

初版は正しく遊べたものの、参照作品の雰囲気には遠く及ばず。人間はゲームプレイ動画を投げ、ひと言:「UI と挙動を完全に再現して」。

エージェントは動画からキーフレームを抽出し、仕様書として扱いました:8×8 の盤面、角丸のレベルバッジ、ハート、カウントダウン、連勝表示;タップで配置、衝突マスに自動で ✕ が付くテンポ;レイアウト比率は目測ではなく計測。そしてその「動画から読み取った仕様」どおりに UI を書き直しました。動画は要求仕様書になる——読み手がエージェントであれば。

フィードバックはチケットではなくスクリーンショットで届く

次の磨き込みは、人間が送り返した不満のスクショ 1 枚から始まりました:タイルがただの色ブロック、フォントが細い、盤面は 8×8 のはず、そして「カメラの高度なエフェクトも」。

1 通のメッセージが 4 つの並行修正になりました:スーパーサンプリングのテクスチャ生成器で着色可能な角丸タイルを制作;本物の CJK ボールドサブセットフォントへ変更;レベル生成器を山登り法による精錬へ刷新——8×8 ではランダム振り直しで一意解の盤面が見つからなかったため(第 1 面は実測 237 解から、ちょうど 1 解へ収束);エンジンにカメラズームパンチ API を追加。

一意解のバグは記憶に値します:発見したのはテストスイートであり、人間のレビューではない。 各面がちょうど 1 解であることをスイートが断言するため、エージェントはアルゴリズムを差し替えるしかなかった。これこそがエージェントが単独で反復できる理由です。

見えるもの・聞こえるものはすべて Floniks が担当

ポニーの駒は Floniks の text-to-image 生成物:背景を除去し、ピクセル単位でリサイズし、エンジンの素材フォルダへ配置——ゲームはファイル名で拾うため、コード変更ゼロ。HUD アイコン 10 個と角丸 UI タイルも同じラインから。BGM は Floniks の text-to-music(Lyria 2)。15 秒のゲームプレイ広告は、実素材をキーフレームに描画し、Floniks の image-to-video に通し、生成トラックでスコアリング。

ゲームプレイ広告のキーフレーム:指がポニーの配置を実演し、衝突マスに自動で ✕、そしてクリア演出——要素はすべてゲーム内の実素材
ゲームプレイ広告のキーフレーム:指がポニーの配置を実演し、衝突マスに自動で ✕、そしてクリア演出——要素はすべてゲーム内の実素材

なぜ停滞しないのか:2 つのプラットフォーム、1 本のパイプライン

滑らかさの理由はエージェントの速さではなく、道に関所がないこと。エンジン側と Floniks 側がパイプラインを半分ずつ受け持ち、継ぎ目はすべて機械が通過できる契約になっています:

ニーズエンジンが提供Floniks が提供継ぎ目の契約
プレイ変更ロジックは Lua ファイル 1 枚、秒単位のホットリロード1 ページに収まる game.* API
正しさの検証ヘッドレステスト、13 万+ アサーションルール = 不変条件 = テスト
アートが欲しいファイル名とサイズで素材をロード、コードゼロで差し替えtext-to-image + 背景除去を MCP 経由でスタイルバイブルがパレットを固定;マニフェストで再生成可能
音楽が欲しい3 チャンネルオーディオ、1 行で接続text-to-music同名の音声ファイルを配置
宣伝素材実素材をキーフレームに描画image-to-video + スコアリングキーフレーム入力、完成広告出力

エージェントは 1 つのセッション内でコードを書き、テストを回し、Floniks を呼び、成果物を規約のパスへ置き、コミットする——人間がツール間でファイルを運ぶ工程は 1 つもありません。

完全クロスプラットフォーム:1 つの crate からネイティブと WASM

ゲームは単一の Rust crate から 3 形態で出荷されます:ネイティブ macOS(エージェントのホットリロード開発ループ)、ネイティブ iOS の 120Hz ProMotion、そしてブラウザの WebAssembly——Lua VM は同一 API を公開する純 Rust 実装に切り替わり、全ゲームスクリプトは 3 ターゲットでバイト単位で同一のまま動きます。

証拠は本稿のカバー画像に:右パネルはモックアップではなく、ヘッドレスブラウザで WASM 版をライブ撮影したスクリーンショットです。リンク 1 本でどのモバイルブラウザでも遊べ、同じゲームが iPhone ではネイティブの滑らかさで動きます。

質問と回答

人間はプロンプトを書きましたか?

いいえ。人間が提供したのはスクリーンショット、動画、一行コメントのみ。Floniks 生成用のプロンプトもエンジン作業のタスク分解も、エージェント自身が組み立てました。

エージェントはどうやって Floniks を呼ぶのですか?

MCP 経由です:Floniks は一連のツール(text-to-image、image-to-video、text-to-music、背景除去など)として登録され、エージェントがコーディングセッション中に直接呼び出し、成果物はゲームの素材フォルダに落ちます。Floniks MCP サーバーをご覧ください。

単独で反復するエージェントの正しさは何が担保しますか?

ゲームルールを不変条件として符号化したヘッドレステストスイートです。一意解の要件は全レベルで断言され、実際の生成器バグはこうして捕捉され、より良いアルゴリズムへ強制されました。

成果物は遊べますか?

はい——コレクション全体が WebAssembly でブラウザ動作し、ソースは GitHub の rust_bevy_lua_game リポジトリで公開されています。

生成を自分のビルドループに組み込みたい方は、Floniks MCP サーバーから始めてください。同じ手法がより重いジャンルをどう扱うかは後編へ。

タグ

#showcase#ai-game-development#vibe-coding#mcp#sprite-generation#text-to-music#image-to-video#webassembly

関連記事

スクショ 1 枚からパズルゲームを作る:プロンプトゼロ開発記 | Floniks