コンテンツにスキップ

🎮 字幕検知型ミニゲームを作ろう

「先生」という字幕が出たら5秒以内にボタンを押せ！

このチュートリアルでは 音声を映像のように扱い字幕を付ける
で作成したプロジェクトをそのまま引き続き使用します。

前のチャプターでは以下を完成させました：

  • UI背景画像の設定
  • 音声の読み込み
  • Whisperによる字幕生成
  • 翻訳字幕の作成

今回はその字幕を 実際のゲーム要素として活用し、
「特定の単語が出る → 制限時間で反応 → 成功/失敗で分岐」
という 小さなミニゲームシステムを作ります。

使用する例は以下の体験版です：

https://www.dlsite.com/home/work/=/product_id/RJ01323001.html
（ブルーアーカイブ カズサ / 体験版）

ブルーアーカイブでは主人公を 「先生」 と呼ぶため、
字幕検知の例として非常に適しています。

🧭 全体フロー（完成イメージ）

字幕に「先生」という単語が出現したら：

  1. グローバル変数 SenseiFlag ← 1
  2. ボタンUIを表示
  3. 5秒待機
  4. ボタンが押されたら成功
  5. 押されなければトラック終了（失敗）

1️⃣ 字幕タイプを先に変更する（重要）

今回のミニゲームでは 字幕の中に「先生」という単語が出現したタイミングを正確に検知 する必要があります。
しかし前のチャプターで作成した字幕は、デフォルトでは 一文が一度に表示されるタイプ です。

この方式だと「これから出てくる単語」が事前にすべて見えてしまい、
検知タイミングが正確でなくなる問題 が発生します。

そのため字幕タイプを TypeWriter（タイプライター方式） に変更する必要があります。

✔ TypeWriter 字幕の特徴

  • 字幕が 全体の再生時間に合わせて一文字ずつ表示 される
  • まだ表示されていない文字は検知できない
  • よって「先生」が 現れる瞬間だけ を確実に捉えられる
  • ミニゲーム・単語検知・呼吸シンクなどに最適

📌 TypeWriter への変更方法

  1. タイムラインで 音声をダブルクリック し音声編集画面へ移動
  2. 字幕リストへ
  3. Ctrl + A ですべての字幕を選択
  4. 右下の Animation → TypeWriter をクリックしてタイプ変更

（画像：caption_typewriter.png）

これで全字幕が一文字ずつ表示される方式になり、
単語出現の順序を正確に検知できます。

1️⃣ UIを作る（反応ボタン）

（画像：press_button_ui.png）

  1. UIタブ → 新規UI
  2. Button を中央へ配置
  3. テキスト： 「先生！」 または 「PRESS!」

前チャプターのUI作成方法と同じです。

TIP
中央寄せにするとミニゲームUIとして自然に表示されます。

2️⃣ グローバル変数を作成する

（画像：create_global_variable.png）

  1. 左側の リソース管理 → 変数
  2. ＋ボタン
  3. 名前：SenseiFlag
  4. 初期値：0

この変数は 今が入力待ち状態かどうか を判断する核心となります。

値の意味：
0 = 待機していない
1 = 「先生」検知済み → 5秒以内に押すモード

3️⃣ 字幕検知スクリプトを作成する

ここでは、字幕の中に 「先生」 という単語が含まれた瞬間に自動で実行される
検知スクリプトを作ります。

スクリプトの処理内容は以下の通りです：

  1. 字幕に「先生」が含まれるか判定
  2. 含まれていればグローバル変数 SenseiFlag ← 1
  3. 5秒待機
  4. 5秒以内にボタンが押されなければ失敗（トラック終了）

📌 スクリプト作成手順

  1. Scriptタブ → 新規スクリプト
  2. 名前：SenseiTrigger
  3. 以下の構造で作成

✔ 1段階目：「先生」が字幕に含まれているか判定

条件：

  • 字幕に [先生] が含まれた場合

満たす場合：

  • 変数 [SenseiFlag] を [1] に代入（0秒）
  • 時間 [5秒] 待機

これにより、「先生」が出現した瞬間だけ SenseiFlag が1になります。

✔ 2段階目：5秒後も SenseiFlag が1なら失敗扱い

最初の条件の下に もう1つ条件文 を追加します。

条件：

  • 変数 [SenseiFlag] が [1] と等しい場合

満たす場合：

  • 現在のトラック時間を [420秒] に変更
    ※ 最後までジャンプして強制終了させるイメージ

つまりユーザーがボタンを押さなかった場合、
SenseiFlag は 1 のままなので失敗扱いになります。

📌 全体構造イメージ

（画像：subtitle_detect_script.png）

これと同じように組めば：

  • 字幕に「先生」登場
  • 5秒カウント
  • 押されなければエンディングへジャンプ

という流れが完成します。

5️⃣ ボタンの Click スクリプトを作る

UI画面でボタンを選択：

右側 → Script → Click → 編集

以下の内容を構成します。

✔ 成功条件：SenseiFlag == 1

条件：SenseiFlag == 1
SenseiFlag ← 0
Sound（成功SE）を再生

ユーザーが制限時間内に押したという意味です。

✔ 遅かった場合：SenseiFlag == 0

（画像：subtitle_detect_button.png）

条件：SenseiFlag == 0
トラックジャンプ（失敗地点）

→ すでに失敗しているか、遅すぎた場合です。

🧪 全体フローまとめ

🔷 字幕検知スクリプト（SenseiTrigger）

SenseiFlag ← 1
UI Show
5秒待機
If SenseiFlag == 1:
Jump Track(end)

🔷 ボタンのClickスクリプト

If SenseiFlag == 1:
SenseiFlag ← 0
成功SE再生
Else:
Jump Track(end)

🎉 完成！

これでプロジェクトは次のように動作します：

  • 字幕に「先生」が出現 → ボタンがポップアップ
  • ユーザーは5秒以内に押す必要がある
  • 押せば成功
  • 遅れれば失敗
  • beginner-audio-to-video で作った
    「音声 + 字幕 + UI背景」プロジェクトに自然に拡張できる

この例は、VSPの多くの機能を組み合わせた
ミニゲーム型インタラクティブシステムの基本構造になります。