配信の画面に重ねる(OBS)
アルファ版(2026 年 10 月時点)の内容です。予告なく変更される場合があります。
ESKEES で作った作品を、OBS の「ブラウザ」ソースで配信の画面に重ねて表示できます。背景は透明になるので、カメラやゲームの映像の上にキャラクターや演出だけが表示されます。
YouTube や Twitch のコメントに反応させる機能は、順次追加していきます。
1. 作品を用意する
配信に重ねる作品は、背景を描かずに作ります。キャンバスに背景の画像を配置すると、その部分は透明になりません。
- キャンバスのサイズは、配信の画面と同じ比率(16:9。例: 1920 × 1080)にすると、位置を合わせやすくなります。
- キャラクターは画面の端に、演出は画面全体に、というように配置します。
2. ファイルとして使う(おすすめ)
- ESKEES Studio の「エクスポート ▾」→「OBS 用としてエクスポート(背景が透明な HTML)」で、
作品名-obs.htmlを保存します。 - OBS の「ソース」の「+」→「ブラウザ」を選び、新しいソースを作ります。
- 「ローカルファイル」にチェックを入れ、保存した HTML を選びます。
- 「幅」と「高さ」を配信の画面と同じ(例: 1920 と 1080)にします。
- 作品の音を OBS で扱う場合は、「OBS で音声を制御する」にチェックを入れます。音声ミキサーに表示されます。
作品は HTML の中に入っているので、インターネットに接続していれば、そのファイルだけで動きます(再生エンジンは ESKEES Player の CDN から読み込みます)。
3. URL で使う
作品をアップロード済みの場合は、OBS のブラウザソースの URL に次を入れます。
https://showcase.eskees.com/overlay?src=(作品の URL)
srcは.eskx/.emgの URL です。eskees shareで表示されるファイルの URL や、公式サンプルの URL はそのまま使えます。自分のサーバーに置いたファイルは、CORS の許可が必要です。&fit=contain(収める。既定)/cover(はみ出す)/stretch(引き伸ばす)で、画面と作品の比率が違うときの合わせ方を選べます。- セーブデータは残りません(配信のたびに最初から始まります)。
- 開けないときは、左下に赤い帯で理由が表示されます。
試しに表示するには: https://showcase.eskees.com/overlay?src=https://showcase.eskees.com/official/starter.eskx(公式サンプル。このサンプルには背景があります)
注意
- OBS のブラウザソースでは、マウスやキーボードの操作は作品に届きません(画面を見せるための機能です)。
- 表示がずれるときは、ブラウザソースの「幅」「高さ」と、OBS の「設定」→「映像」の「基本(キャンバス)解像度」が合っているかを確認してください。
- 透明にならないときは、作品のキャンバスに背景の画像や色が配置されていないかを確認してください。