Layouts

Included layouts

There are sample overlays located in the /layout/ directory. In OBS, add a Browser element, select local file, then select one of the .html in the subdirectories.

• Make sure to set the window size to 1920x1080 for the overlay samples
• Make sure to set the browser element to hide when inactive and reload on scene change, or else you will get a quick flicker when the scene is changed, or the elements won't animate again on scene change

Editing settings

You can find the global overlay settings in /layout/settings.json. Inside each layout directory, there can also be a local settings.json, which will override the global values.

Key	Description	Example
assets	Maps settings to game codes, or default if the game config doesn't exist. For all the options, see settings	{"ssbu": { "asset_key": "mural_art" }} will have it load the asset "mural_art" for the game Super Smash Bros Ultimate (ssbu)
automatic_theme	Sets the layout colors based on your /layout/logo.png
japanese_transcription	Settings related to Japanese transcription. For more information see Kuroshiro.

Theming

All overlays access the CSS variables in /layout/main.css. It defines things like font, border-radius, background colors, text color, player colors, etc. When theming, you might wanna start from this one. There are also some alternative themes commented out, so you can just uncomment them to apply these themes.

Complete overlays

Note: Not all overlays support doubles/teams or games where you select multiple characters.

scoreboard

Other examples for multiple games

Straightforward scoreboard. Has different HTMLs with differences in the overall layout. You can edit the HTML files to remove icons you don't want displayed, such as country flag, online user avatar, etc.

scoreboard_simple

More previews

Designed for Smash Ultimate, also supports doubles.

scoreboard_4by3

Designed for 4:3 games, with elements on the sides. Has variations for adding player cameras instead of characters on the sides.

versus_screen

Shows characters and player data on both sides.

Ideally used together with other widgets, such as recent_sets, stage_strike, map (add each one as a separate element in OBS and arrange them as you like)

ruleset

More previews

Shows the current ruleset configuration. Has a separate simpler HTML, intended for printing.

Widgets

stage_strike

Shows the current stage strike state. You may have to either load a set with this data or open the stage strike app once for anything to show up. Experiment with different window sizes as the number of rows/columns will adapt to it (i.e. 2000x2000, 1000x1000, 500x500, ...).

map

Shows a map with each player's location and distance/estimated ping. The ping estimation is made using data from wondernetwork along with some distance to ping estimation formula I found on Reddit (lol). This is a very rough estimate, so take it easy.

character_gallery

For multi-character games, this overlay will alternate between the player's selected characters. Can also be used on OBS to show character images centered on their eyes when the asset supports it.

character_line

For multi-character games, this overlay will show the player's selected characters in a line, adapting to the browser element size. Can also be used on OBS to show character images centered on their eyes when the asset supports it.

Acessing the layouts through the stage striking web server

Recommended for Vmix users

As of version 5.62, it is now possible to access the layouts through the stage striking web server using the followihg process:

1. Find the IP address and port of the stage strike app at the bottom of the "Ruleset" tab
   
2. Find the relative path to the layout you want to use, e.g. layout/scoreboard/ssbultimate.html
3. The URL to your layout is http://{ip}:{port}/{path}. For instance: http://192.168.1.100:5000/layout/scoreboard/ssbultimate.html

Using OBS directly (or integrating with your existing image-based layout)

When you use the program, a directory out is created in the program's directory, containing the current program data. In OBS, when you create a text element, in its properties, there is an option to load the text from a text file. Redirect text elements to the text files and the images from out to have your overlay synced with the program's output.

Tips

• In OBS you can select any element and use Edit > Transform > Edit Transform (Ctrl+E). There you can set up the absolute position and size for your elements. There are alignment options and bounding box options so that when a player's name would overflow your layout the font gets smaller instead. Also works for images, where you can reserve a space, and the image will fit that space independent of image size or proportions

Example

• Furthermore, text sources themselves can have their own bounding boxes for text alignment. Those can be activated by checking the "Use Custom Text Extents" option in the text source's properties panel

Example

• We recommend not using OBS image sources in order to display character assets in your overlay. Instead, we recommend using one of the specialized widgets, e.g. character_line or character_gallery, in order to be able to use all of the features of the software. Those widgets can be customized by editing the properties in the associated index.js file