welcome to my Simple SSBU scoreboard overlay. I felt like other options out there were too difficult to modify and were too bulky in their default configurations thus I created this web app overlay in order to create something that I hope is more intuitive to use for the average Joe so thank you for giving this a look and I hope to see some more clips made from events using this overlay ;)...
DISCLAMER
This socreboard overlay was made for my initial use case and may have some bugs depending on your use case.
For instance, the current version of the scoreboard does not have support for custom colors, fonts etc. unless you
download the scoreboard
and controller files from my github and modify them yourself. I eventually plan to add these features into the
controller to allow for customization for at least the color scheme.
Secondly, I built this scoreboard for my specific use case and as such the start.gg api integration is hard coded
for that case. For instance it will only be able to pull from the
start.gg api if your event is set up to only have one large bracket. If your event has pools the current code is
not capable of handleing that (I was unaware of this start.gg feature at the time of creation). I intend to
resolve this issue at some point
so that the scoreboard can pull match data no matter how your bracket is set up.
Though in any case, you are always able to control the scoreboard manually to set tags, charecters etc.
Finally, if you want to use this overlay for offline recording, you can download the source code from my github
repo and then open the scoreboard and controller as a live server from vs code.
click here to skip down to advanced features to learn how to use the controller with start.gg
Basic Setup
- Open the links on the top bar for the controller and scoreboard in a new tab
- add the link to the scoreboard as a browser source in OBS Studio
- Copy the link to the scoreboard
- Add a New Browser source in OBS Studio
- Paste the link and ensure that its size is 1920x1080 (also check your stream settings to ensure that its
output and window size is also 1920x1080)
- add the controller to OBS Studio as a dock, this step is optional but is recommended as it allows you to use
the controller from within OBS Studio
thus removing the need to flip through tabs
- Copy the link to the controller
- On the top bar in OBS, click on "docks" > "custom browser docks"
- paste the link to the controller and name it
- You are now done with the basic setup and should have somthing like the below screenshot,
(docks in OBS sort of behave like windows in windows so if you dont like it floating around you can drag it and
place it in the panels as you please)
Advanced Features
Using Start.gg Match Numbers
NOTE: this feature may be buggy as the current code is for the local event this overlay was originally made
for and is hard coded to take look for the bracket in a from a certain place (This is as i initially planed to not
publish this).
That said, it will only work if the ultimate singles brackets that have no pools. If your bracket is not set up
this way then the controller
will have some trouble pulling matchup data from the start.gg API.
So if your event is not set up this way, please consider checking out the
source code and downloading a version to
modify yourself
as the scoreboard can be used via launching the scoreboard and controller html files as a live server directly
from VS CODE using the
live server add on. (this
process is also how you can use the overlay in an offline recording environment)
- Obtain a
start.gg api token
- (these are case sensitive and should be treated as a password, this site does not save token info, for transparency this project is open source and hosted via github pages)
- (Additionally, start.gg will only show your token to you once upon generation so be sure to save it somewhere secure)
-
Enter your generated API token into the controller
-
in the tournament link field of the controller, enter the "/tournaments/[event name]" part of the event link.
This is the "slug" link for the tournament that the start.gg API uses to know which event to fetch data from
-
Now you can get tags from matches by simply entering the match id into the match id field (note the images are
out of date and that the scoreboard now alos pulls the round name)
