映像からプレイ可能なゲームへ — コードを1行も書かずに
もし、どんな動画でも指さして「これをゲームにして」と言えたらどうでしょうか？ このワークフローはまさにそれを実現します。Eigent の Multi-Modal Agent は、2026年春節聯歓晩会の映像 — 壮大なロボット武術パフォーマンス — を視聴し、キャラクター、動き、ビジュアルスタイルを抽出し、その構造化された分析を Developer Agent に渡して、それをもとに完全な Three.js ゲームを構築します。全体のパイプラインは、1つのプロンプトと1本の動画ファイルだけで動作します。
2つのエージェントによるパイプライン
このワークフローでは、2つの専門エージェントが順番に連携して動作します。
- Multi-Modal Agent — Image Analysis、Video Processing、Audio Processing、Image Generation を担当します。動画を視聴し、見えている内容に関する構造化データを生成します。
- Developer Agent — Terminal & Shell、Web Deployment、Screen Capture を担当します。構造化された分析を受け取り、ゲームを構築します。
重要なのは引き継ぎの部分です。Developer Agent が受け取るのは生の動画ではなく、キャラクター、動き、色、シーン、テーマを記述した構造化テキスト文書です。この変換ステップこそが、生成されるゲームを汎用的なものではなく、忠実なものにする鍵です。
動画を添付してプロンプトを書く
Martial Arts.mp4 を添付し、希望する内容を説明します。
添付の動画ファイルを解析して、2026年春節聯歓晩会のロボットパフォーマンス、キャラクター、動き、ビジュアルスタイル、シーンを理解し、Three.js を使用した完全な単一ファイルの3DインタラクティブHTMLゲームを作成してください。動画から主要要素、キャラクター、アクションを忠実に再現し、魅力的なゲームプレイ、直感的な操作、そして祝祭的な視覚効果を備えたものにしてください。
2つのタスクが即座に生成され、2つ目は最初のタスクが完了するまで保留になります。
タスク1 — Multi-Modal Agent が動画を視聴する
Multi-Modal Agent は、Video Downloader Toolkit を使用して Martial Arts.mp4 をフレームごとに処理し、重要な場面のスクリーンショットを抽出します。その後、それらのフレームを分析し、martial_arts_video_analysis.txt として保存された包括的な文章分析を生成します。
- キャラクターとロボット: 外見、プロポーション、配色（ゴールドと赤）、出演者数
- 動きとアクション: 観察された具体的な武術技術 — パンチ、キック、棍棒攻撃、振付シーケンス
- ビジュアルスタイル: ステージ照明、カラーパレット、祝祭装飾のスタイル、パフォーマンス空間の奥行きとスケール
- シーンと背景: ステージ環境、背景デザイン、雰囲気を演出する要素
- 祝祭要素: CNY 特有の装飾、象徴的モチーフ、演出で使われた効果
この文書がクリエイティブブリーフとなり、Developer Agent が正確に実行できる構造化された説明になります。
タスク2 — Developer Agent がゲームを構築する
分析を受け取った Developer Agent は、Note Taking Toolkit のメモを読み取り、spring_festival_martial_arts_game.html を構築します。HTML、CSS、JavaScript をすべてインラインで含む、単一の自己完結型ファイルです。
このゲームは、Multi-Modal Agent が特定した内容を忠実に実装します。
- 3D ロボットキャラクター — 動画のゴールド/赤の配色で Three.js によりレンダリング
- 武術アニメーション — 観察されたパンチ、キック、棍棒攻撃を再現
- ステージ環境 — 春節聯歓晩会パフォーマンスのビジュアルな場面に一致
- 祝祭的なパーティクル効果 — ランタン、スパーク、CNY 装飾
- 複数のゲームモード: Performance Mode、Combat Mode、Free Practice
完成したゲーム
spring_festival_martial_arts_game.html をブラウザで開くと、完全な体験が得られます。
- タイトル画面: 2026 春節聯歓晩会 — 武術パフォーマンス — 午年
- 操作: W/S/A/D 移動 · J パンチ/打撃 · K キック · L 棍棒攻撃 · Space スペシャルムーブ · マウスでカメラ操作 · スクロールでズーム
- HUD: スコアカウンター（デモでは 527 表示）、コンボカウンター、モード表示
- ビジュアル: ゴールド/赤の3Dロボットキャラクター、祝祭的なステージ背景、パーティクル効果
使用トークン総数は約 467,000 で、動画解析と Three.js ゲーム生成の深さを反映しています。
なぜ動画からゲームへの変換が新しいワークフローカテゴリなのか
このパイプラインは新しい概念を確立します。それは、動画理解をデザイン仕様ツールとして使うことです。ゲームデザイン文書を書く代わりに、欲しい美的表現、キャラクター、インタラクションを捉えた映像を録画または発見し、それを Multi-Modal Agent に実装可能な仕様へ変換させます。
応用範囲はゲームをはるかに超えます。動画から構造化分析、そしてコードへ至る同じパイプラインは、UI モックアップの再現、アニメーションシステム設計、インタラクティブデモ生成、そしてテキストよりも動画のほうが意図を的確に伝えられるあらゆる場面で活用できます。
次に試すこと
製品の開封動画を解析し、映像の物体を再現したインタラクティブな3D製品ビューアを生成する。
料理動画を視聴し、動画のビジュアルスタイルに一致するインタラクティブな手順付きレシピアプリを生成する。
スポーツのハイライト映像を解析し、映っている競技に基づいたミニゲームを生成する。
春節ゲームを発展させ、パフォーマンスに登場する異なるロボットとして2人のプレイヤーが対戦するマルチプレイヤーモードを追加する。
より良い結果を得るためのヒント
-
高品質な元映像を使う。 Multi-Modal Agent のシーン抽出は、明瞭で十分に照明された動画で最も正確になります。この Gala 動画のように、キャラクターや動きがはっきりしたパフォーマンス映像は、早いカット割りや低解像度のコンテンツよりも豊かな分析を生み出します。
-
構築前に分析の確認を依頼する。 「ゲームを作成する前に動画分析ドキュメントを見せて」と追加すると、ビルドを確定する前に、エージェントが動画を正しく理解したかを確認するチェックポイントを設けられます。
-
単一ファイルを指定する。 「単一ファイルの3DインタラクティブHTMLゲーム」と明記すると、ビルドステップやサーバーなしで、すべてが自己完結し、すぐに共有できるようになります。
