How to use the ticker in OBS - xblbaseball/ticker GitHub Wiki

Streaming with the Ticker

The ticker assumes you are broadcasting at 1080p exactly. If you want to stream at any resolution besides 1920x1080, you will need to get creative with your stream layout to make it look good.

The steps below assume you're already familiar with OBS.

  1. Open OBS
  2. Add a new browser source
  3. Under Properties for the browser source, set the following values:
    • URL: https://xblbaseball.github.io/ticker/news
    • Width: 1920
    • Height: 1080
    • FPS: 60
    • Custom CSS: leave blank
  4. Click on the browser source. Right click, go to Interact. This should open a full screen version of the ticker
  5. Click anywhere on the ticker to open up the settings. Read the instructions and change the settings as you'd like. The settings close button is in the top right. Close the browser window when you're done.
  6. Resize the game capture to fit the space available. Right click your game capture, go to Transform > Edit Transform. Set the following values:
    • Position: 128px, 0px
    • Size: 1792px, 1008px
    • Positional Alignment: Top Left
    • Bounding Box Type: No bounds
    • All the crop settings should be left at 0

It can be kind of annoying to change the settings in OBS. You can alternatively use your normal browser to nail down your settings, then copy them to OBS.

  1. Open https://xblbaseball.github.io/ticker/news in Chrome
  2. Click anywhere to open the settings. Change the settings to whatever you want
  3. At the bottom of the settings, there's a big block of text under "Current Settings". Copy it
  4. Go back to OBS, interact with the browser source (step 4 from above), open the settings (step 5 from above), and paste the settings into the box at the top of the settings window labeled "Import"