この記事は
スプラトゥーン3の試合中に、やられる直前15秒の動画を自動作成するシステムを開発したので紹介します。
ここに至るまでの15秒の動画を試合中に自動作成します。
スプラトゥーン2の時に開発した、やられたシーン自動抽出システムは、時間がかかる
スプラトゥーン2に引き続きスプラトゥーン3もやりこんでいますが、対面力に課題ありです。そこで、やられたシーンを録画で振り返りつつXマッチに潜っています。
その振り返りの効率化のため、スプラトゥーン2の時にプレイ録画から、やられたシーンを自動抽出するシステムを作りました。その様子はこちらの記事で解説しています。
しかしこのシステムには問題があります。試合が終わってから、少なくとも1試合分の録画に対して、やられたシーンを抽出するので時間がかかります。
そこで今回は試合をしながら、やられる直前15秒の録画を自動で作成する方法を考えました。
画像の引用
この記事では任天堂株式会社のゲーム、スプラトゥーン3のスクリーンショットを引用しています。
OBSのリプレイバッファを使う
録画やライブ配信で使われるOBSには、リプレイバッファという機能があります。「リプレイを保存」ボタンを押すと、ボタンを押した直前N秒の動画を保存します。Nintendo Switch にあるキャプチャーボタン長押しで30秒前からの動画を撮影する機能と同様の機能です。
やられたシーンの分類モデル(※1)はすでにあるので、現在キャプチャしているフレーム画像を認識して「リプレイを保存」ボタンを押してくれるOBSプラグインを作ることができれば問題を解決できそうです。
しかしOBSプラグインはC++言語で開発する必要があり、またフレームワークはQtを使っていて、普段はAndroidアプリを作っている私にとって技術的に距離が遠そうです。
※1 スプラトゥーン2の時に開発したものですが、スプラトゥーン2とスプラトゥーン3は、やられたシーンのレイアウトがほぼ同じなので分類できます。
obs-websocket と仮想カメラを使う
そこでOBSの外からOBSを制御する方法を考えます。
OBSには obs-websocket という Web Socket API がバージョン28から標準搭載されています。
またOBSには仮想カメラという機能があり、OBSのキャンバスを仮想的なWebカメラとして出力する機能があります。
今回はその2つを外部から使用するアプリを作ります。
システム概要
今回構築したシステムの全体像はこのようになっています。
- OBSでHDMIキャプチャを使い Nitendo Switch の映像をキャプチャします。
- OBSでキャプチャした映像はOBSの仮想カメラで閲覧できるようにします。
- Google Chrome で動作する自作Webアプリで仮想カメラの映像を取り込みます。
- 映像のフレームの中にやられたシーンがあったら、リプレイバッファ保存命令を obs-websocket に送ります。
- OBSはリプレイバッファを動画ファイルとして保存します。その結果、保存される動画は、やられる直前のシーンとなります。
- 私は試合終了後すぐに保存された動画を見て、反省点を明確にして次の試合に活かします。
自作アプリ
今回開発した自作アプリはこちらから誰でも使用できます。すべての処理はブラウザ内で完結し、 obs-websocket 以外には情報をアップロードしません。
ソースコードはこちらになります。
準備
OBSを以下のように設定します。
Nintendo Switch のHDMI出力をキャンバス全面に映します。
ソース→追加 → 映像キャプチャデバイス
obs-websocket を有効にします。
- 上部メニュー → ツール → obs-websocket 設定
- 「WebSocketサーバーを有効にする」にチェックをつける
- サーバポートはデフォルトの 4455 に設定する
- 「認証を有効にする」は解除する
自作アプリでのポート番号変更と認証への対応はまだ作っていないです。安全なローカルエリアネットワークに接続されているPCでご利用ください。
リプレイバッファを有効にします。
設定 → 出力 → 「リプレイバッファを有効にする」にチェックをつけます。
リプレイバッファの設定を必要に応じて行います。
設定画面を閉じて「リプレイバッファ開始」ボタンを押します。
仮想カメラを開始します。
アプリの操作方法
基本的には黄色い記載に対応すれば良いです。
（PC設定がダークテーマの場合はアプリもダークテーマになります。）
- Google Chrome で https://s3.ikut.app/ にアクセス
- それ以外のブラウザではテストしていません。
- 「カメラに接続」ボタンを押す
- ブラウザからカメラの使用の許可を求められたら「許可する」ボタンを押す
- OBS Virtual Camera 以外のカメラに接続されてしまった場合はアドレスバーのカメラボタンから設定する
- OBSのキャンバスと同じ映像が映ることを確認
- 「obs-websocket に接続してください」の下の「接続」ボタンを押す
- 「obs-websocket に接続しました」ログが表示されることを確認
この状態でスプラトゥーン3で敵にやられたら、リプレイバッファが自動で保存されます。
まとめ
この記事ではスプラトゥーン3をプレイ中、敵にやられてデスしたら、自動でOBSのリプレイバッファを作成するシステムを紹介しました。OBSで使われているC++やQtに馴染みが無くても、やられたシーンに対応した画像認識モデルがあれば、一般的なWebフロント開発の技術でOBSとやりとりすることで目的のシステムを構築することができました。