ゲームの紹介動画を、プログラムで撮って組み立てる。機能を足すたびに撮り直せるように

こんにちは、北海道のWEB屋です。

ドット絵の経営シミュレーション「IT起業伝」の紹介動画は、画面を手で録画して編集ソフトでつないだものではありません。ゲームの場面をプログラムで再現して録画し、字幕や音楽もプログラムで合わせて1本にしています。

開発の記録で少しだけ触れたこのしくみを、今日はもう少し詳しく書きます。

なぜ手で撮らないのか

ゲームは作っている途中で、毎日のように変わります。絵を描き直したり、画面の並びを変えたりすると、前に撮った動画はもう今のゲームと合いません。

手で撮っていたら、そのたびに同じ場面を探して、同じ操作をして、録り直して、つなぎ直すことになります。それなら最初から「撮り方」をプログラムにしておけば、コマンド1つで撮り直せる。そう考えました。

全体の流れ

1. 録画：Playwright（ブラウザを自動で動かす道具）でゲームを開き、場面ごとに録画する
2. 音：ゲームと同じしくみでBGMと効果音を鳴らし、WAVに書き出す
3. 字幕：Python（Pillow）で、字幕の帯を画像として作る
4. 組み立て：ffmpegで、場面の切り抜き、拡大、字幕の重ね合わせ、音楽と効果音の合成をして、1本にする

場面をどうやって「同じように」再現するか

いちばん大事なのは、何度撮っても同じ場面になることです。そのために、ゲームを最初から遊んで場面までたどり着くのではなく、その場面の状態をいきなり作ってから録画しています。

• 何年の何月か、オフィスはどこか、社員は何人か、お金はいくらか、を指定して、ゲームを始める
• 録画の途中で確認の画面が出てじゃまをしないよう、あらかじめ「答え済み」にしておく
• 見せたいできごと（年代が変わる、上場の花火、エンディングなど）は、その場で直接起こす
• くじ引きのように毎回結果が変わる場面は、その間だけ結果が決まるようにしておく
• 場面ごとに新しいブラウザで録画し、読み込みの部分は、記録した時刻をもとにあとで切り落とす

字幕と「寄り」と音

字幕は、ゲームと同じドット風のフォントで、帯ごと1枚の画像として作っています。韓国語は、韓国語のドット風フォントを使います。

見せたいところに寄る（拡大する）方法は2つ。ゲームのカメラを社長に寄せた状態で録画する方法と、録画した画面をffmpegで切り抜いて大きくする方法です。ドット絵なので、拡大するときはにじまない拡大のしかたにしています。

音楽は、曲のテンポから小節の切れ目を計算して、小節の頭で切ったりつないだりしています。効果音は「何番目の場面の、何秒目に、どの音」というリストで置き、最後に全体の音量をそろえます。

横長、縦長、3つの言語

縦長の動画には2つの作り方があります。横長の画面の真ん中を切り抜き、後ろに同じ映像をぼかして敷く方法。もう1つは、スマホの縦画面の大きさでゲームを開いて、そのまま録画する方法です。X用は、PCの画面を切り抜くより、スマホで遊んでいる画面そのもののほうが伝わると思い、後者にしました。

言語は、日本語・英語・韓国語。言語を指定して録画すると、ゲームの画面もその言語で撮れ、字幕もその言語のものに差し替わります。

やってみて

• 撮り直しが怖くない：絵を直した翌日でも、コマンドを流せば新しい画面の動画になる
• 場面の追加が楽：新しい機能を見せたくなったら、場面を1つ足すだけ
• 手間は最初だけ：最初にしくみを作るのは手間がかかる。1回きりの動画なら、手で撮ったほうが早い

個人でゲームやWebサービスを作っていて、紹介動画を何度も作り直している方には、おすすめできるやり方です。

まとめ

• 紹介動画は、場面の状態を作ってから録画する。だから何度撮っても同じ場面になる
• 字幕はPillow、組み立てと音はffmpeg。拡大はドット絵がにじまない方法で
• 横長、縦長、X用。日本語・英語・韓国語。どれもコマンド1つで作り直せる

動画の中身は、公式サイトの無料体験版で実際に遊べます。発売は2026年12月の予定です。

出典とリンク

• Playwright：playwright.dev
• FFmpeg：ffmpeg.org
• IT起業伝 公式サイト：itkigyoden.com
• 開発：北海道のWEB屋