◆   ◆   ◆

OBS Overlay Setup

How to add a live gamecast scoreboard to your stream using OBS Studio.

1. Get Your Overlay URL

Start a game in Straight Pool Deluxe and tap Gamecast to get your gamecast link. Replace /gamecast/ in the URL with /gamecast-overlay/:

https://straightpooldeluxe.com/gamecast/abc123/
↓
https://straightpooldeluxe.com/gamecast-overlay/abc123/

That's the URL you'll paste into OBS.

2. Add a Browser Source in OBS

  1. In OBS, click + in the Sources panel and choose Browser.
  2. Paste your overlay URL into the URL field.
  3. Set Width and Height — see the sizing table in Step 3 below.
  4. In the Custom CSS box, make sure this is present (OBS usually pre-fills it):
    body { background-color: rgba(0,0,0,0); margin: 0; overflow: hidden; }
  5. Click OK.

3. Size and Position the Overlay

OBS has two separate places that control a source's size, and both matter:

  • Properties → Width/Height — how the page renders internally. Font sizes and layout are calculated from these values.
  • Transform → Size W/H (right-click → Transform → Edit Transform) — how large OBS displays the source in your scene.

The rule: set Properties Width = Transform Size W (they should always match). If they differ, the overlay will render at one size and then be scaled up or down, making fonts look wrong.

LayoutProperties WProperties HTransform Size WTransform Size HTransform Pos XTransform Pos Y
Full-width, top 1920 150 1920 150 0 0
Full-width, bottom 1920 150 1920 150 0 930 (1080 − 150)
1000px wide, centered top 1000 150 1000 150 460 ((1920 − 1000) / 2) 0
800px wide, top-left corner 800 150 800 150 0 0

These examples assume a 1920×1080 canvas and a 150px bar height — adjust for your setup.

⚠ Minimum recommended width: 900px. Font sizes in the overlay scale with the bar height (not width), so widths below 900px will cause the score and stat boxes to overlap. If you need a narrower bar, reduce the bar height proportionally as well.

4. Customize the Look

Add query parameters to your overlay URL to change the color scheme and transparency:

ParameterValuesDescription
theme dark (default), light Dark uses a near-black background with white text. Light uses an ivory/cream background with dark text — better over bright video feeds.
opacity 0.0 – 1.0 Controls the transparency of the bar background. 1.0 is fully opaque, 0.0 is fully transparent. Default is 0.82 (dark) or 0.90 (light).

Examples:

/gamecast-overlay/abc123/
/gamecast-overlay/abc123/?theme=light
/gamecast-overlay/abc123/?theme=dark&opacity=0.6
/gamecast-overlay/abc123/?theme=light&opacity=1.0

5. Tips

  • After changing the URL or pushing code updates, click Refresh in the browser source properties to reload.
  • The overlay connects to the live game via Server-Sent Events — no polling, no manual refresh needed during the game.
  • If the scorer cancels the gamecast, a "Gamecast cancelled" message will appear over the overlay.
  • Use Shutdown source when not visible in OBS if you want the connection to drop when the source is hidden.