週1本のゲーム制作進捗動画の投稿を支える技術

YouTube Shorts
動画制作って大変じゃないですか？？？
自動化！自動化！自動化！
今回作りたい動画
Remotion
読み上げ音声
具体的な中身
やってみて
そんなわけで

YouTube Shorts

ここ3～4ヶ月程度、毎週1本のショート動画を投稿しています。

ショート動画を作り始めた理由については以前も少し触れましたが、ゲーム制作に関する定期的な情報公開を今までやってない方法でやりたいという理由から始めました。

名目としては「メモリーニミィの開発進捗報告」でしたが、メモリーニミィが完成後は過去作紹介を行っています。これ、紹介ストックなくなったらどうするんだ……？

動画制作って大変じゃないですか？？？

動画投稿者、全員狂ってると思うんですけど……（）

動画制作ソフトが複雑
- 字幕など簡単そうに見えることでも、実際にやると難しい
素材準備の工数
- 映像や音声などを準備するだけでも大変
普通に処理が重い
- エンコード時間が～

が、こう書いてみると、このあたりの難しさや大変さはゲーム制作にも通じる気がします。絵や音などを組み合わせて作品を作るという意味では、ゲーム制作と動画制作は意外と近いところにあるのかもしれません。

だとすると、僕がゲーム制作するときにとるようなアプローチを、動画制作にも取り入れていく必要がありそうです。

自動化！自動化！自動化！

僕は面倒なことは嫌いです！
時間がかかる面倒な作業は可能な限り自動化します。

過去作においても

『貴方が狼カードデス！』：テキストからイベントデータを生成
- 参考：『貴方が狼カードデス！』のイベント増殖術
『憎悪の獣の地下ドール』：バトラー画像を並べる処理の自動化

などを行っていました。

今回作りたい動画

今回作成するショート動画は、ゲームの制作進捗がメインです。そのため、ある程度パターン化は容易そうです。

また、ショート動画には『お約束』的な配置もあります。「画面的に下の方はプレイヤーのUIと被っちゃう」みたいなところから、制約もありそうです。

↓ 始める前に作ったイメージ図

ゆっくり解説的な感じ？

この決まった形の動画を作成する仕組みを作ることにしました。

Remotion

Remotion は React で動画を作成できるという謎のツールです。

レイアウトはDOMベースなので学習コストが低い
シーケンスやトランジションの専用コンポーネントや Hooks などもある

Webページを作る感覚で動画が作成できそうです。
先ほどの画面構成を実現する上で、各パーツを React コンポーネントとして作成するのは、僕にとってはかなり簡単にイメージできます。

また、今回は『毎週投稿する』という前提があります。

コンポーネント化しつつ、動画のコンテンツ内容を Props として渡すだけで完結するようにすることで、

動画の内容を決める
動画に必要な素材（ゲーム画面や読み上げ音声など）を用意する
Props 用の JSON を作成する

を毎週するだけで動画が作れそうです。

読み上げ音声

ゆっくりしていってね！

さすがに字幕だけというのも微妙なので、声は欲しいところです。
とはいえ、自分の声を入れるのは難しい。滑舌もゴミだし、夜中に喋ると普通に近所迷惑だし……。

そこで、今回は『VOICEPEAK 商用可能 6ナレーターセット』を使用しました。

かなり緩いライセンスで使用できることと、コマンドラインから呼び出せることから採用することにしました。
（本当は、もともと持っていたというのもあります＞＜；）

具体的な中身

以下は、とある回のProps用JSONの中身の一部抜粋です。

{
  // 全体の設定
  "title": "感情スキルで\nすべてをぶっ壊せ！",
  "category": "自作ゲーム制作",
  "bgm": "../_assets/bgm.ogg",
  "bgmVolume": 0.2,
  "voiceConfig": {
    "narrator": "Japanese Female 1",
    "speed": 110,
    "pitch": 30
  },

  // 動画の内容部分
  "timelines": [
    // 画面中央に表示するコンテンツ
    {
      "type": "video",
      "src": "./res/intro1b.mp4",
      "volume": 0.5,
      "layout": "contain"
    },
    // 字幕・台詞
    {
      "type": "text",
      "content": [
        {
          "text": "今週はスキルまわりのご紹介！",
          "duration": 2.1
        }
      ],
      "face": "awawa",
      // 読み上げ声は字幕の内容から自動生成
      "voice": "./voice/423a582a302f0609e2a15d3a706a4909.wav"
    },
    {
      "type": "video",
      "src": "./res/intro2.mp4",
      "volume": 0.5,
      "layout": "contain",
      "transition": {
        "type": "wipe",
        "direction": "from-bottom-right",
        "duration": 0.3
      }
    },
    {
      "type": "text",
      "content": [
        {
          "text": "本作の基本ブロックは",
          "duration": 1.3
        },
        {
          "text": "全6種類です。",
          "duration": 1.4
        }
      ],
      "face": "normal",
      "voice": "./voice/e89b504fca980a914eafa77f90695c49.wav"
    },
    {
      "type": "text",
      "content": [
        {
          // text は字幕用
          // 字幕と違うことを喋らせたい場合は talk を設定する（句読点や括弧の除外に使用）
          "text": "喜・怒・哀・楽に愛と憎悪",
          "talk": "喜怒哀楽に愛と憎悪……",
          "duration": 2
        }
      ],
      "face": "fufu",
      "voice": "./voice/ecae6ff897241c8e91a32bbe0168c93d.wav"
    },
    {
      "type": "text",
      "content": [
        {
          "text": "『六情』と呼ばれる主要な感情に",
          "talk": "六情と呼ばれる主要な感情に",
          "duration": 2
        },
        {
          "text": "それぞれ対応しています。",
          "duration": 1.9
        }
      ],
      "face": "normal",
      "voice": "./voice/af76796ff3b3e0578ed69b11e2e0e73d.wav"
    },
    // 以下略
}