video-to-game

Video to Game

動画がゲームデザインドキュメントですが、あなたは動画を見ることができません。動画モデルは、あなたが苦手とすること、つまりゲームの見た目、カメラ、印象に残る一つのメカニクスを得意としています。あなたの仕事は、そのクリップをリバースエンジニアリングして、誰かがプレイできるゲームに仕上げ、動画に合うアセットを生成し、形容詞ではなく画像でそれを証明することです。

ワークフロー

1. 動画を生成するか、用意します。 オリジナルのコンセプトを一つ、目で確認できるメカニクスを一つ、三人称視点またはサイドカメラ、HUDテキストなしにします。prompts/gameplay-video-prompts.md（リポジトリのルート）には、レシピと、うまくいった31個のプロンプトがあります。
2. 動画を調べます。 python3 scripts/study_video.py gameplay.mp4 -o study/ を実行すると、0.25秒ごとのフレーム、コンタクトシート、パレット、カットが保存されます。シートを開いてからフレームを確認します。コードを書く前に仕様を作成します。カメラ（距離、高さ、レンズ）、主人公、一つのコアメカニクス、ワールドのレイアウト、パレット、光、マテリアル、雰囲気、動画が見せる重要な瞬間を記述します。references/study-the-video.md を参照してください。
3. falを使って、動画のフレームを参照元に、一度に一つずつすべてのアセットを生成します。 コンセプトシート、背景の除去、画像から3Dへの変換、リギング、テクスチャ、視差レイヤー、効果音、音楽を生成します。python3 scripts/fal_asset.py <endpoint> --arg k=v --file k=path -o assets/ でモデルを実行し、ログに記録できます。手描きのものや、別の場所からダウンロードしたものは使いません。references/fal-assets.md を参照してください。
4. ゲームを構築します。 templates/game.html を基に、Three.jsのみ、インポートマップ一つ、本格的なゲームループ（操作、目標、進行、フィードバック、終了、再スタート）、キーボードとゲームパッドへの対応、?autostart と ?seed=N、window.__game の状態を実装します。references/game-loop.md を参照してください。
5. 見た目を一致させます。 パレット、フォグ、光、カラーグレーディング、ブルーム、ビネット、グレインは、仕上げではなく、最初から仕様の一部です。変更を加えるたびに、決まった箇所でゲームのフレームと動画のフレームを比較します。python3 scripts/side_by_side.py gameplay.mp4 shot.png -o pairs/ --times 2,5,8 を実行します。references/look-and-post.md を参照してください。
6. 自分でプレイします。 templates/play.mjs を基に play.mjs を作成します。キーボードのみを使い、window.__game の状態を読み取ります。node scripts/record_play.mjs "http://127.0.0.1:8000/?autostart" play.mjs -o take.mp4 は、実際のフレームレートでゲームを撮影します。python3 scripts/best_window.py take.mp4 --length 10 を実行して最も活気のある区間を見つけ、そのフレームを確認します。プレイヤーが遭遇する問題、つまり落下、壁、何も起こらない時間、状況が読み取れない瞬間を修正します。references/playtest.md を参照してください。
7. 納品します。 index.html、assets/、README.md（コンセプト、操作方法、エンドポイントを含むすべてのfalアセット）、左右比較画像、ベストテイク、動画と異なる点の正直なリストを用意します。

スクリプトの実行にはPython 3.9以降、ffmpeg、レコーダー用の playwright-core を含むNode 18以降が必要です。また、fal_asset.py を使うには pip install fal-client を実行し、FAL_KEY を設定してください。このスキルのディレクトリから実行するか、フルパスを指定して実行します。

厳守事項

• ゲームの見た目は動画と同じです。 カメラ、色調、光、素材をそろえます。見た目に関する判断は毎回、同じ3か所で並べた比較画像を使って確認します。比較画像なしで「見た目は合っている」と判断しても、確認したことにはなりません。
• 動画のメカニクスがゲームそのものです。 クリップで女の子が世界をひっくり返しているなら、彼女のモデルを登場させただけの一般的なランナーではなく、世界をひっくり返すゲームにします。
• すべてのアセットはfalから取得し、動画のフレームを参照画像として生成します。 各呼び出し（ファイル、エンドポイント）を記録します。一度に進める作業は1つだけにし、次を依頼する前に各結果を確認します。
• 画面上のテキストは最小限のタイトルと操作説明の1行だけにします。 世界そのものに説明させます。
• オリジナルの世界だけを作ります。 既存のゲームや映画のキャラクター、ロゴ、名前、レベルデザインは使いません。
• 後処理も仕様に含まれます。 トーンマッピング、カラーグレーディング1種類、ブルーム、奥行きのためのフォグ、ビネット、グレインを使います。ノートPCで60 fpsを維持します。画質が大幅に向上する場合に限り、30 fpsも許容されます。
• 世界の印象を抑え、ゲームを読み取りやすくします。 色調を統一し、刺激の強い色は使いません。密度を保ちつつグループ化し、落ち着いた背景の中で主人公とインタラクティブなものを際立たせます。
• 出荷前にプレイします。 コンソールエラー、落下、無操作の時間が一切なく、動画の重要な瞬間が見える録画プレイを用意します。

参照資料の使い分け

ファイル	読むタイミング
references/study-the-video.md	開始時：フレーム、色調、カメラ、メカニクス、作成する仕様
references/fal-assets.md	アセット生成時：用途別のモデル、キャラクターのパイプライン、有効なプロンプト、コスト
references/game-loop.md	構築時：構造、入力、カメラ、状態の契約、マルチプレイヤー、パフォーマンス
references/look-and-post.md	動画の見た目を合わせるとき：カラーグレーディング、フォグ、ブルーム、密度、視覚的階層、比較画像を使った確認手順
references/playtest.md	自作ゲームのプレイ時：シナリオ、録画、最適なタイミング、修正点

テンプレート：templates/game.html（後処理スタック、入力、状態の契約を備えたThree.jsの骨組み）、templates/play.mjs（キーボード操作のプレイテストシナリオ）。

出力に関する要件

• 何をどのように確認したかを記載します。どの比較画像を使ったか、どの録画を確認したか、fps、コンソールエラーを明記します。
• falの呼び出しを一覧にします。エンドポイントごとの回数と合計コストを記載します。
• 動画と異なる点（簡略化したメカニクス、欠けているエフェクトなど）は正直に列挙し、「完全に同じ」とは決して書きません。