プロモビデオ録画

Phaser ゲームのスムーズな自動プロモ映像を記録して、マーケティング/ソーシャルメディア用に出力します。出力は 50 FPS の MP4 形式でモバイル縦向き (9:16) — TikTok、Reels、Moltbook、X に対応しています。

技術

Playwright の recordVideo は最大 25 FPS で設定オプションがありません。以下の方法で対応します:

1. ゲームを 0.5× に遅速 — Phaser の 5 つ全ての時間サブシステムをパッチ
2. 必要な期間の 2 倍の時間を記録 — Playwright のネイティブ 25 FPS で
3. FFmpeg で 2× 速度化 → 有効な 50 FPS 出力

パラメータ	デフォルト	効果
SLOW_MO_FACTOR	0.5	ゲームが半速で実行 → 50 FPS 出力
WALL_CLOCK_DURATION	DESIRED_GAME_DURATION / SLOW_MO_FACTOR	2 倍の期間を記録して正しいゲーム時間を取得
VIEWPORT	{ width: 1080, height: 1920 }	9:16 モバイル縦向き (ユーザー指定がない限りデフォ)
DESIRED_GAME_DURATION	13000 (ms)	約 13 秒のゲーム時間 → 約 6.5 秒のプロモクリップ

前提条件

• Playwright — インストール必須 (npm install -D @playwright/test && npx playwright install chromium)
• FFmpeg — PATH で利用可能 (macOS は brew install ffmpeg)
• 開発サーバー実行中 — ゲームは localhost で提供される必要があります

開始前に両方をチェック:

npx playwright --version
ffmpeg -version | head -1

FFmpeg が見つからない場合、ユーザーに警告してプロモビデオステップをスキップします (非ブロッキング — ゲームは無しでも動作します)。

キャプチャスクリプト — ゲーム固有の適応

すべてのゲームは scripts/capture-promo.mjs のカスタムスクリプトを取得します。サブエージェントは ゲームのソースファイルを読む必要があります 以下を決定するため:

1. 死亡/失敗パッチング (重要)

ビデオはゲームオーバーを見せずに継続的なゲームプレイを表示する必要があります。GameScene.js (または同等物) を読んで、死亡/失敗メソッドを見つけてモンキーパッチします。

探し方: 衝突/死亡時に呼ばれるメソッドを検索します。一般的なパターン:

• this.triggerGameOver() — ドッジゲーム
• this.takeDamage() → this.lives <= 0 — マルチライフゲーム
• this.gameOver() — 直接呼び出し
• eventBus.emit(Events.PLAYER_HIT) / eventBus.emit(Events.GAME_OVER) — イベント駆動

パッチテンプレート (ゲーム毎に適応):

await page.evaluate(() => {
  const scene = window.__GAME__.scene.getScene("GameScene");
  if (scene) {
    // ゲームオーバーへのすべてのパスをパッチ
    scene.triggerGameOver = () => {};
    scene.onPlayerHit = () => {};
    // マルチライフゲームの場合、ダメージも防ぐ:
    // scene.takeDamage = () => {};
    // scene.playerDied = () => {};
  }
});

2. 入力シーケンス生成

ビデオは動的で自然に見えるゲームプレイを表示する必要があります。ゲームの入力処理を読んで以下を決定:

• どのキー — ArrowLeft/ArrowRight? Space? WASD? マウスクリック?
• 入力スタイル — 継続ホールド (移動)、タップ (ジャンプ/シュート)、または両方?
• 移動パターン — プレイヤーは画面を横断、反応的にドッジ、リズミカルにジャンプ?

ゲームタイプ別入力パターン:

ゲームタイプ	入力キー	パターン
サイドドッジ	ArrowLeft, ArrowRight	交互ホールド (150-600ms) 可変ポーズ、時々ダブルタップ
プラットフォーマー / Flappy	Space	リズミカルなタップ (80-150ms ホールド) 可変間隔 (200-800ms)
トップダウン	WASD / Arrows	混合方向ホールド、図形8パターン
シューター	ArrowLeft/Right + Space	移動と連発を交互
クリッカー/タッパー	マウスクリック / Space	短いポーズで分離された高速バースト

ロボットっぽくないように見せるため、タイミングをランダム化:

const holdMs = 150 + Math.floor(Math.random() * 450);
const pauseMs = 50 + Math.floor(Math.random() * 250);

最初にポーズを追加 (1-2秒) — 入場アニメーション再生を許可し、これがフック:

3. ゲームブート検出

/viral-game または /make-game パイプラインで構築されたすべての Phaser ゲームはこれらのグローバルを公開:

• window.__GAME__ — Phaser.Game インスタンス
• window.__GAME_STATE__ — GameState シングルトン
• window.__EVENT_BUS__ — EventBus シングルトン

ブートと活発なゲームプレイの両方を待ちます:

await page.waitForFunction(() => window.__GAME__?.isBooted, { timeout: 15000 });
await page.waitForFunction(() => window.__GAME_STATE__?.started, {
  timeout: 10000,
});

4. 時間スケーリング注入

すべての 5 つの Phaser 時間サブシステムを遅速化:

await page.evaluate(
  ({ factor }) => {
    const game = window.__GAME__;
    const scene = game.scene.getScene("GameScene");

    // 1. Update デルタ — フレームデルタ依存ロジックを遅速化
    const originalUpdate = scene.update.bind(scene);
    scene.update = function (time, delta) {
      originalUpdate(time, delta * factor);
    };

    // 2. Tweens — すべてのトウィーンアニメーションを遅速化
    scene.tweens.timeScale = factor;

    // 3. シーンタイマー — scene.time.addEvent() タイマーを遅速化
    scene.time.timeScale = factor;

    // 4. Physics — Arcade/Matter フィジックスを遅速化
    // 注: Arcade フィジックスタイムスケールは逆 (高い = 遅い)
    if (scene.physics?.world) {
      scene.physics.world.timeScale = 1 / factor;
    }

    // 5. アニメーション — スプライトアニメーション再生を遅速化
    if (scene.anims) {
      scene.anims.globalTimeScale = factor;
    }
  },
  { factor: SLOW_MO_FACTOR },
);

5 つのサブシステム:

1. Update デルタ — scene.update(time, delta * factor) フレームデルタ依存ロジックを遅速化
2. Tweens — scene.tweens.timeScale すべてのトウィーンアニメーションを遅速化
3. シーンタイマー — scene.time.timeScale scene.time.addEvent() タイマーを遅速化
4. Physics — scene.physics.world.timeScale Arcade/Matter フィジックスを遅速化 (逆を使用: 1/factor)
5. アニメーション — scene.anims.globalTimeScale スプライトアニメーション再生を遅速化

5. ビデオ最終化

const video = page.video();
await context.close(); // コンテキストを閉じてビデオファイルを最終化する必要があります
const videoPath = await video.path();

完全なキャプチャスクリプトテンプレート

import { chromium } from "playwright";
import path from "path";
import fs from "fs";
import { fileURLToPath } from "url";

const __dirname = path.dirname(fileURLToPath(import.meta.url));
const PROJECT_DIR = path.resolve(__dirname, "..");

// --- Config ---
const args = process.argv.slice(2);
function getArg(name, fallback) {
  const i = args.indexOf(`--${name}`);
  return i !== -1 && args[i + 1] ? args[i + 1] : fallback;
}

const PORT = getArg("port", "3000");
const GAME_URL = `http://localhost:${PORT}/`;
const VIEWPORT = { width: 1080, height: 1920 }; // 9:16 モバイル縦向き
const SLOW_MO_FACTOR = 0.5;
const DESIRED_GAME_DURATION = parseInt(getArg("duration", "13000"), 10);
const WALL_CLOCK_DURATION = DESIRED_GAME_DURATION / SLOW_MO_FACTOR;
const OUTPUT_DIR = path.resolve(PROJECT_DIR, getArg("output-dir", "output"));
const OUTPUT_FILE = path.join(OUTPUT_DIR, "promo-raw.webm");

// <適応: ゲーム固有の入力シーケンスを生成>
function generateInputSequence(totalMs) {
  const sequence = [];
  let elapsed = 0;

  // 入場アニメーションのポーズ
  sequence.push({ key: null, holdMs: 0, pauseMs: 1500 });
  elapsed += 1500;

  // <適応: ゲーム固有のキーとタイミングに置き換え>
  const keys = ["ArrowLeft", "ArrowRight"];
  let keyIdx = 0;

  while (elapsed < totalMs) {
    const holdMs = 150 + Math.floor(Math.random() * 450);
    const pauseMs = 50 + Math.floor(Math.random() * 250);

    // 時々ダブルタップで多様性を追加
    if (Math.random() < 0.15) {
      sequence.push({ key: keys[keyIdx], holdMs: 100, pauseMs: 60 });
      elapsed += 160;
    }

    sequence.push({ key: keys[keyIdx], holdMs, pauseMs });
    elapsed += holdMs + pauseMs;

    // 方向を交互 (時々同じ方向の繰り返し)
    if (Math.random() < 0.75) keyIdx = 1 - keyIdx;
  }

  return sequence;
}

async function captureGameplay() {
  console.log("プロモビデオをキャプチャ中...");
  console.log(
    `  URL: ${GAME_URL} | ビューポート: ${VIEWPORT.width}x${VIEWPORT.height}`,
  );
  console.log(
    `  ゲーム期間: ${DESIRED_GAME_DURATION}ms | ウォールクロック: ${WALL_CLOCK_DURATION}ms`,
  );

  fs.mkdirSync(OUTPUT_DIR, { recursive: true });

  const browser = await chromium.launch({ headless: true });
  const context = await browser.newContext({
    viewport: VIEWPORT,
    recordVideo: { dir: OUTPUT_DIR, size: VIEWPORT },
  });

  const page = await context.newPage();
  await page.goto(GAME_URL, { waitUntil: "networkidle" });

  // ゲームブート + ゲームプレイアクティブを待機
  await page.waitForFunction(() => window.__GAME__?.isBooted, {
    timeout: 15000,
  });
  await page.waitForFunction(() => window.__GAME_STATE__?.started, {
    timeout: 10000,
  });
  await page.waitForTimeout(300);
  console.log("  ゲームアクティブ。");

  // <適応: 死亡をパッチアウト — GameScene.js から実際のメソッドを検索>
  await page.evaluate(() => {
    const scene = window.__GAME__.scene.getScene("GameScene");
    if (scene) {
      scene.triggerGameOver = () => {};
      scene.onPlayerHit = () => {};
    }
  });
  console.log("  死亡がパッチされました。");

  // すべての 5 つの Phaser 時間サブシステムを遅速化
  await page.evaluate(
    ({ factor }) => {
      const game = window.__GAME__;
      const scene = game.scene.getScene("GameScene");
      const originalUpdate = scene.update.bind(scene);
      scene.update = function (time, delta) {
        originalUpdate(time, delta * factor);
      };
      scene.tweens.timeScale = factor;
      scene.time.timeScale = factor;
      if (scene.physics?.world) scene.physics.world.timeScale = 1 / factor;
      if (scene.anims) scene.anims.globalTimeScale = factor;
    },
    { factor: SLOW_MO_FACTOR },
  );
  console.log(`  ${SLOW_MO_FACTOR}x に遅速化しました。`);

  // 入力シーケンスを実行
  const sequence = generateInputSequence(WALL_CLOCK_DURATION);
  console.log(
    `  ${WALL_CLOCK_DURATION}ms で ${sequence.length} 入力を実行中...`,
  );

  for (const seg of sequence) {
    if (!seg.key) {
      await page.waitForTimeout(seg.pauseMs);
      continue;
    }
    await page.keyboard.down(seg.key);
    await page.waitForTimeout(seg.holdMs);
    await page.keyboard.up(seg.key);
    if (seg.pauseMs > 0) await page.waitForTimeout(seg.pauseMs);
  }

  console.log("  入力完了。");

  // ビデオ最終化
  const video = page.video();
  await context.close();
  const videoPath = await video.path();

  if (videoPath !== OUTPUT_FILE) {
    fs.renameSync(videoPath, OUTPUT_FILE);
  }

  await browser.close();
  console.log(`  生動画: ${OUTPUT_FILE}`);
  console.log("完了。");
}

captureGameplay().catch((err) => {
  console.error("キャプチャ失敗:", err);
  process.exit(1);
});

FFmpeg 変換

記録後、生の遅速 WebM を高 FPS MP4 に変換します。convert-highfps.sh スクリプトはこのスキルに skills/promo-video/scripts/convert-highfps.sh で同梱されています。

# プロジェクトにコピー (オーケストレーターが実行)
cp <plugin-root>/skills/promo-video/scripts/convert-highfps.sh <project-dir>/scripts/

# 変換を実行
bash scripts/convert-highfps.sh output/promo-raw.webm output/promo.mp4 0.5

スクリプト:

• setpts でビデオを 1/factor で速度化
• 出力フレームレートを 25 / factor に設定 (0.5× 遅速では 50 FPS)
• H.264 で crf 23、yuv420p、faststart でエンコード
• 出力期間、フレームレート、ファイルサイズを検証

ビューポートデフォルト

ユーザーが明確に別の要求がない限り、常にモバイル縦向き (9:16) で記録します。根拠:

• ゲームは携帯で遊ぶ — プロモ映像は実際のモバイル体験を表示すべき
• 9:16 は TikTok、Instagram Reels、YouTube Shorts 用ネイティブ
• 1080×1920 は標準解像度

アスペクト比	ビューポート	ユースケース
9:16 (デフォ)	1080 × 1920	モバイル縦向き — TikTok、Reels、Shorts、Moltbook
1:1	1080 × 1080	正方形 — Instagram フィード、X 投稿
16:9	1920 × 1080	ランドスケープ — YouTube、トレーラー、デスクトップゲーム

期間ガイドライン

ゲームタイプ	推奨期間	理由
アーケード/ドッジ	10-15秒	高速アクション、複数ドッジサイクル
プラットフォーマー	15-20秒	ジャンプタイミング、レベル進行を表示
シューター	12-18秒	ターゲティング、敵ウェーブを表示
パズル	8-12秒	1 つの解答シーケンスを表示

チェックリスト

キャプチャ実行前:

• 開発サーバーが実行中で応答している
• FFmpeg がシステムにインストール
• Playwright が Chromium でインストール
• ゲームがメニューなしで直接ゲームプレイに起動
• 死亡/失敗メソッドが識別され、パッチされた
• 入力キーがゲームの実際のコントロール一致
• 入場アニメーションポーズが含まれる (1-2秒)
• 出力ディレクトリが存在

キャプチャ後:

• 生 WebM が output/ に存在
• FFmpeg 変換が有効な MP4 を生成
• 期間が生記録の約半分 (速度化が機能)
• フレームレートが 50 FPS
• ビデオがゲームプレイを表示 (黒い画面ではない)