The English version of the README is here.

Beat Saber Overlay 改良版

これは、Reselim氏が製作したBeat Saber Overlayに各種表示オプションを追加し、機能改善した物です。

Beat SaberをOBS等で配信や録画する時に、曲名やスコアなどの譜面情報をオーバーレイ表示します。

※画像はHttpStatusExtentionを使用したフルオプションのサンプルです。

インストール方法 (OBS)

1. Beat Saberからオーバーレイにデータを送信するためにHTTP StatusかHttpSiraStatusのどちらか一方をインストールしてください。

   初心者は導入が簡単なModAssistantからHTTP Statusをインストールする方法をオススメします。なお、HTTP StatusとHttpSiraStatusを同時にインストールすると競合するため動作しません。

   • HTTP Status　※ModAssistant登録のオリジナル版

     

   ほかに、デンバ時計さん製作の改善版があります。

   • HttpSiraStatus

     

   オプションの pp 機能やカスタム難易度表示を使用するには、デンバ時計さんのHttpSiraStatusとHttpStatusExtentionも導入する必要があります。

   • HttpStatusExtention

   ※手動でインストールする場合は、別途依存modをそれぞれのmodの説明に従ってインストールして下さい。 特にModAssistantにあるwebsocket-sharpのインストールが必須です。入れ忘れトラブルが多いので注意して下さい。

   

   ※オーバーレイの動作確認は、このmodのバージョンで確認しています。

2. リリースページから最新のリリースをダウンロードします。

   

3. ダウンロードしたzipファイルを適当なフォルダに解凍します。(例: C:\TOOL\beat-saber-overlay)

4. OBSのソースにブラウザを追加します。

   

5. 新規作成を選択して、適当にソースの名前を設定して、OKを押します。

   

6. 解凍したzipファイルの中にある、index.html をダブルクリックするか、ChromeやEdgeブラウザで開きます。

   

7. ブラウザのアドレス(URL)欄を選択してコピーします。

   

8. コピーしたアドレスを、OBSのURL欄に貼り付けます。

   

   ※ローカルファイルだと、オプション設定が出来ないのでこの様にURL表記で入力する必要があります。

   ※画面サイズに合わせてサイズを設定します。(1280x720等)

   ※(オプション) 1080p(1920x1080)の画面サイズの場合、オーバレイ表示を1.5倍に拡大する scale 修飾子を使用して下さい。

     file:///C:/TOOL/beat-saber-overlay/index.html?modifiers=scale
   

9. 必要に応じて URLのindex.htmlの後に ?modifiers= を追加してオプションを設定します。複数のオプションはカンマ(,)で区切ります。

   

10. プロパティの幅は意図的に縮めることで、オーバーレイの表示幅を絞ることが可能です。

    曲名、アーティスト・作譜者、難易度(カスタム難易度）が幅を超える場合に自動でスクロールします。

    

    

11. オーバーレイのソースの順序をゲームのソースよりも優先度を上げて、オーバーレイがゲーム画面に重ねて表示されるようにします。

    

オプション

次の様なオプションがURLに設定可能です。

file:///C:/TOOL/beat-saber-overlay/index.html?modifiers=top,all

modifiers

複数のオプションは,(カンマ)で区切ることができます。

• top
  • オーバーレイの表示を上部に配置し、レイアウトを垂直方向に反転します。
• rtl
  • オーバーレイを右に移動し、右揃えのレイアウトにします。
• scale
  • 1080p(1920x1080)の画面で使用するために、オーバーレイを1.5倍にスケーリングします。
• test
  • テストのために背景を黒にします。
• bsr
  • bsrの検索・表示をします。
• miss
  • ミス数を表示します。
• mod
  • Modifierを表示します。(DA,FS等)
• energy
  • エナジーバーを表示します
• pp
  • ランク譜面の時に精度100%のpp値、Star Difficulty、リアルタイムのpp値を表示します。（※１）
• label
  • カスタム難易度がある場合に、デフォルトの難易度と共に表示します。（※１）
• all
  • bsr, miss, mod, energy, pp, label オプションを全て表示します。（※１）
• no-performance
  • スコア表示を消します。
• no-hidden
  • 終了時に表示を消しません。

※１：pp, label オプションを表示するには、HttpStatusExtentionの導入が必要です。

ipまたはport

ゲームとOBSが別のPCの場合に、ゲーム用PCのBeat Saber HTTP Statusに接続する場合に設定します。

オプションは省略すると、ip=localhost 及び port=6557 となります。

file:///C:/TOOL/beat-saber-overlay/index.html?ip=192.168.1.10&port=6557&modifiers=top,bsr

機能追加、表示変更スキン

オーバーレイに機能追加、表示変更する追加スクリプト、ＣＳＳがあります。

• BSDP-Overlayライクなオーバーレイ オーバーレイ改造のサンプル
• OBS Studioで自動シーン切り替え
• Streamlabs OBSで自動シーン切り替え
• タイトル表示変更、エナジーバーの色変化スキン ぬるぽんさん製作

※XSplit Broadcasterの自動シーン切り替え (オーバーレイとは関係ありません)

オーバーレイが動作しない場合

トラブルシューティングを確認してください。

オーバーレイの改造について

オーバーレイは改造し易くするため、いくつか機能が用意されています。

HTMLの書き換え対象のid属性の有無チェック

オーバーレイのスクリプトでは特定のid属性値のHTMLタグに対して、プレイに合わせた書き換え動作をします。

HTML内のid属性値は起動時にチェックし、存在しない場合は書き換え動作をしないため、HTMLやCSSを改造して好きなレイアウトや表示項目にすることが出来ます。

初心者向けに改造方法の記事を書きました。 HTMLを知らない人にも分かる、オーバーレイの改造の仕方を説明してみる

参考に、精度・スコア・曲名・bsr表示だけにしたシンプルな表示のhtmlを用意してあります。

file:///C:/TOOL/beat-saber-overlay/simple.html?modifiers=bsr

modifiersオプションの追加

modifiersフォルダにCSSファイルを追加すると、CSSファイル名でmodifiersオプションを指定して読み込める様になります。 独自スタイルのCSSを作成した場合に任意のCSSファイルを作成することで、オリジナルのOverlayのファイル群を直接改造する必要がなくなるため、アップデートに追従しやすくなったり、他人に配布が容易になります。

外部スクリプト起動用オプション配列

スコアに応じて色を変更するなど、動的にオーバーレイを変化させるにはJavascriptを作成する必要があります。

オリジナルのJSコードに手を付けなくても以下のオプション配列の要素として関数を追加すると。各イベントで呼び出されます。

なお、追加するスクリプトは最初(options.jsより前、startup.jsより後)に読み込んで下さい。

ランクの色分け表示サンプル

参考として、ランク表示をCounters+の様にSSは水色、Aは黄緑、Bは黄色、Cは橙、DEは赤にする例を示します。

下記のコードをindex.htmlの<script src="./js/options.js"></script>の上の行に挿入して下さい。

<script type="text/javascript">
ex_performance.push((data,now_energy) => {
    let rank = document.getElementById("rank");
    switch (data.status.performance.rank) {
        case "SSS":
        case "SS":
            rank.style.color = "cyan";
            break;
        case "S":
            rank.style.color = "white";
            break;
        case "A":
            rank.style.color = "lime";
            break;
        case "B":
            rank.style.color = "yellow";
            break;
        case "C":
            rank.style.color = "orange";
            break;
        case "D":
        case "E":
            rank.style.color = "red";
    }
});
</script>

Release v2021/02/22以前のオプション関数(op_*)も互換性維持のため読み込むようになっています。

ただし、オプション関数はスクリプト全体で１箇所しか使用できないため、他のスクリプトと競合する場合は関数を合成する必要があります。

オプション配列の場合は、そういった問題はありませんので今後は配列に関数を追加して使用して下さい。

その他

他のオーバーレイでは一般的なGitHub Pages等による本オーバーレイの提供は以下を理由にあえて行いません。

• 本オーバーレイはオプションスクリプト追加機能や、ユーザでの改造を推奨する設計のため
• オリジナルの(Unnamed) Beat Saber OverlayではURL変更等によるトラブルが多かったこと
• GitHubに繋がらない場合など、ネットワークのトラブル時に使用できないこと
• 少し手間になるが、ダウンロードしてローカルで表示する使用方法で問題ないこと