OBS Studioの配信でキーボードとゲームパッド入力を美しく表示する方法
コードエディタのホットキーを解説するスクリーンキャストを初めて録画したとき、ずっと考えていたことがあります。視聴者は自分が実際に押しているキーが全く分からないということです。Ctrl+Shift+Pのようにすべてのキーの組み合わせを声に出して説明するか、編集時にヒントオーバーレイを手動で描画するかのどちらかを選ばなければいけませんでした。30分も続く動画では特に理想的とは言えません。
ゲーマーやスピードランナーにとってはさらに深刻な問題です。ビジュアルオーバーレイなしでゲームパッドの押下タイミングやFPSにおけるバニーホップのテクニックを示すことはほぼ不可能です。
通常、これらの課題は回避策で解決されます。別のウィンドウでサードパーティ製のユーティリティを起動し、OBSのウィンドウキャプチャとカラーチャイムを使って取り込みます。しかし、これはCPUリソースを余計に消費し、見た目も乱雑になります。開発者univrsalによるinput-overlayプラグインはこれらをネイティブソースとして直接OBS Studioに統合することで、異なるアプローチを取っています。
このプラグインでできること
このプロジェクトはC++で書かれており、WindowsとLinuxの64ビット版で動作します。タスクは単純です。デバイスからの入力を傍受し、遅延を最小限に抑えてリアルタイムでシーンに描画します。
対応デバイスは以下の通りです：
- 標準キーボード（あらゆるレイアウトや修飾キーに対応）
- マウス（ボタン、スクロールホイール、カーソル移動を追跡）
- ゲームパッドとコントローラー（Xbox、PlayStation、汎用DirectInput/XInput）
このプラグインは原始的なテキストログの代わりに、カスタムテクスチャとスプライトを活用します。ゲームパッドやキーボードの画像を用意し、状態（ボタンが離された状態/ボタンが押された状態）に分割して、グラフィックをシステムイベントにバインドします。
内部構造：アーキテクチャと依存関係
プロジェクトコードベースには、いくつかの興味深い解決策が含まれています。デバイスタイプごとに車輪の再開発を避けるため、著者は実績のある低レベルライブラリをバンドルしています。
グローバルなキーボードとマウスの傍受には、OSシステムフックレベルで動作するライブラリを使用しています。これにより、OBSウィンドウ自体がバックグラウンドにある場合や、ゲームがフルスクリーンで実行されている場合でも、入力信号を傍受できます。
ゲームパッドは異なる世代のコントローラーとの互換性を確保しながら、生のデバイスデスクリプタを操作する必要がありません。
特に注目すべきは、軽量な組み込みWebサーバーであるmongooseの統合です。なぜキーのキャプチャプラグインに这种东西が必要なのか疑問に思うかもしれません。2台のコンピュータでストリーミングしている場合（1台はゲーム用、もう1台はストリーミングエンコーダー用）、ゲーム用PCからローカルネットワーク経由で直接ストリーミングマシンのOBSインスタンスに入力を送信できます。ケーブルを整理整頓できる非常に賢明な機能です。
独自のオーバーレイの作り方
プラグインの設定は2つのファイルで構成されています：PNGのグラフィックテクスチャとJSONのレイアウトファイルです。
以前はプロジェクトは.ini形式を使用していましたが、最終的にはJSONに切り替えました。メモ帳でボタンのピクセル座標を計算する必要がないように、著者は視覚的なWebエディタであるConfig Creation Tool（CCT）を公開しました。
ブラウザでスプライトシートをアップロードし、ボタン上にバウンディングボックスを配置して、キーコードにリンクさせて、完了した設定をエクスポートします：
その後、OBS Studioで新しい「Input Overlay」ソースを追加し、JSONとPNGを指すようにすれば、ウィジェットはすぐに使えます。プラグインはOBSのグラフィックスパイプラインを通じてテクスチャをレンダリングするため、レンダリングのオーバーヘッドは実質的にゼロです。
開発者にとって便利な場面
ストリーマー専用のツールと思われがちですが、技術的なコンテンツにも同様に便利です：
- 教育用スクリーンキャストの録画。Vim、Emacs、Blender、VS Codeでのホットキーのデモンストレーションは、視聴者が一時停止に邪魔されずにリアルタイムでアクションを再現するのに役立ちます。
- ゲームパッドと入力遅延のテスト。インディーゲームやエミュレータを開発している場合、オーバーレイを使用すると、画面上のキャラクターの反応とコントローラーの押下を視覚的に照合できます。
- プレゼンテーションとチームデモ。複雑なUIシナリオやターミナルユーティリティのチュートリアル中、視聴者はすぐに修飾キーとファンクションキーを確認できます。
ニュアンスと制限事項
リポジトリのドキュメントは簡潔なので、初心者の方はスプライト構造を理解するために30分程度かかるでしょう。ゼロから洗練されたスキンを作成するには、基本的なグラフィックエディタのスキルが必要です。
プライバシーにも注意が必要です。フックはグローバルに入力を傍受するため、ストリーム中やビデオ録画中にパスワードや機密データの入力を始めると、オーバーレイは忠実にすべてのキーストロークを表示します。このような場合は、事前にOBSでソースを隠すホットキーを設定しておくのがベストです。
このプラグインはWindowsとLinux x64に重点を置いており、macOSビルドは正式にはサポートされていません。
試してみる価値はあるか
ブラウザの回避策やフレームドロップなしでOBSにデバイス入力を美しく、パフォーマンスに優れた方法で表示する必要があるなら、input-overlayは最も信頼性の高いオプションの一つです。
このプロジェクトは2017年からアクティブで、4,000を超えるスターを集め、コードベースを肥大化させることなく1つの特定のタスクに特化しています。ビルド済みのバイナリはGitHubのReleasesタブで入手でき、ゲームパッドとキーボード用の готовыеプリセットはOBS Projectフォーラムで見つけることができます。
関連プロジェクト