Skip to content

Overlay Usage

Jump to bottom
Evan Shimizu edited this page Feb 9, 2019 · 10 revisions

This is a list of the core template files that Soothsayer uses to generate overlays. They can be found in the resources\app\src\obs_src folder of the app installation. These files will not work correctly if moved. The app provides a shortcut to find this folder:

Open Overlay Location Button

Overlays should be added to OBS as a Browser Source using the Local File option, no custom CSS, and should be set to NOT refresh on source visible. Use the recommended resolutions as the browser source size. If no resolution is listed, use any size that satisfies the given aspect ratio.

If you are using team logos, make sure they are on the same disk partition, OBS cannot load local resources specified with the file:/// protocol, so the tool uses relative paths that only resolve if they're on the same partition.

In order to load the overlays, you must have Soothsayer open before OBS. If you don't do so, the overlays will not initialize properly.

Available Overlays

  • in-game.html
    • An in-game HUD displaying team names and the current match score.
    • Required Resolution: 1920 x 1080
  • blue-team-logo.html
    • Auto-sized blue team logo.
    • Required Resolution: none, 1:1 aspect ratio suggested
  • red-team-logo.html
    • Auto-sized red team logo.
    • Required Resolution: none, 1:1 aspect ratio suggested
  • logo.html
    • Auto-sized Event Logo.
    • Required Resolution: none, 1:1 aspect ratio suggested
  • draft.html
    • In-draft HUD displaying team names and current match score
    • Required Resolution: 1920 x 1080
  • map-select.html
    • Heroes of the Storm Only
    • Map selection, bans, and results summary screen
    • Required Resolution: 1929 x 1080
  • map-select-tiles.html
    • Heroes of the Storm Only
    • The tiles from map-select.html by themselves
    • Required Resolution: none
  • map-select-list.html
    • Heroes of the Storm Only
    • The map pick list from map-select.html by itself.
    • Required Resolution: none
  • caster-frame.html
    • Caster frame. Changes layout based on number of casters set in the app.
    • Required Resolution: 1920 x 1080
  • caster-single-frame.html
    • Caster frame (for webcams). Default file is not recommended for use, as it is partially styled
    • Required Resolution: 1920 x 1080
  • caster-single-side-facts.html
    • No Default Style
    • Intended use: caster frame with sidebox for facts/text
    • Required Resolution: 1920 x 1080
  • caster-duo-frame.html
    • No Default Style
    • Intended use: two casters
    • Required Resolution: 1920 x 1080
  • post-game.html
    • No Default Style
    • Required Resolution: 1920 x 1080
  • stat-lower-third.html
    • Base style is for demo only; you'll want to theme this for actual use.
    • Displays stats in a lower third. Must have a connected Stat Source to use.
    • Required Resolution: 1920 x 1080
  • player-popups.html
    • Base style is for demo only; you'll want to theme this for actual use.
    • Displays a popup containing player name, hero, and hero portrait.
    • Display mode controlled by options in-app
    • Required Resolution: 1920 x 1080
  • ticker-lower-third.html
    • The Ticker
    • No default style
    • Required Resolution: 1920 x 1080
  • tournament-standings.html
    • Tournament
    • No default style
    • Required Resolution: 1920 x 1080
  • tournament-bracket.html
    • Tournament
    • No default style
    • Required Resolution: 1920 x 1080
  • hots-player-profile.html
    • Stats
    • No default style
    • Required Resolution: 1920 x 1080

Clone this wiki locally