leaderboard.sb (4.6 KB)
In Streamer.bot in select
Import from the top left.
Import Code and drag and drop the
.sb into the Import String box.
Both Codes will need the following references in order to compile.
The Following Commands will import but will need to be enabled.
When using the command you can specify which platform you want so for example you can do
!rank youtube to just get the YouTube users this is handy for those who multi-cast, if you don’t multi-cast then just doing
!rank will be fine as that will bring in everyone anyway, which won’t include any other platforms apart from the one you are using.
You may want to add you own movement/effects on this.
The Codepen can be altered if you so wish, you can change the title on the leaderboard by changing the
Top Points text in the html. You can also change the colours if you wish by playing with the CSS. Around line 134 there is a
nth-child and under that it say background, altering that hexcode will change the color.
My advice would be to fork the code pen, by clicking fork in the bottom right, that way you can save and then as you change things and refresh if something goes wrong without losing all the work you’ve done. I would also check that it is working before downloading.
Once you’ve got the code pen how you like it, you will need to export it. You can do this by pressing export > download .zip. Once downloaded, extract the files and put them somewhere safe. The next step is to open the
dist folder and open the
index file. Copy and Paste the url of that file into a browser source within OBS or SLOBS.
Its also should be noted that this codepen now works over Websocket, so you’ll either need to make sure you on wsport
127.0.0.1:8080 or edit in the
boardSize This is the amount of users you want it to show when you do
valueName This is the name of your points.
The code will return a number of Variables.
|This will return the list as a whole string for you to output as a message.
|This will also return the full list but with an added
\n so it can be put into textGDI sources and force new lines
|This will state the position the user is in. **
|This is the name of the user. **
|This is the amount of points the user has. **
** X is replaced by an index
By using these variables you can create your own out put message.
You can use the default given one of
Points Are As Follows : %fullList% or you can do something more personalised such as
The Point Ranks are as follows. Taking Bronze is %userName2% with %userValue2% points, Silver goes to %userName1% who has %userValue1% points and with %userValue0% points GOLD goes to %userName0%!! GGs
It’s important to note that if you choose a number too high for boardSize the message may not post due to twitch’s or YouTube’s message character limit. Default for this is 5.