readek / melee-stream-tool

A Melee overlay and control panel for tournament streams

Melee-Stream-Tool

Also available for Rivals of Aether and Rushdown Revolt!

So you're interested in doing SSBMelee streams, huh? Luckily for you, with this tool you'll be able to update all the variables you need for the provided overlays with the provided GUI, and easily customize the overlays to make them your own!

Any doubts? Join the Discord Server!

---

Features

• Handy interface to quickly change everything you need, like player names, characters, scores, round, casters...
• Easy and fast setup using a browser source. Drag and drop!
• A game overlay is included, with renders for all characters and skins!
• A VS Screen is also included, to be used in pauses between games.
• Easy to customize! Made in html/javascript, every file can be edited at will!

---

Setup Guide

These are instructions for regular OBS Studio, but I imagine you can do the same with other streaming software:

• Get the latest release.
• Extract somewhere.
• Drag and drop Game Scoreboard.html into OBS, or add a new browser source in OBS pointing at the local file.
• If the source looks weird, manually set the source's properties to 1920 width and 1080 height, or set your OBS canvas resolution to 1080p, or make the source fit the screen.
• In the source's properties, change Use custom frame rate -> 60 (if streaming at 60fps of course).
• Also tick Refresh browser when scene becomes active.
• Manage it all with the Melee ST executable.

Repeat from the 3rd step to add the VS Screen.html, though I recommend you to do so on another scene.

Interface shortcuts!

• Press Enter to update.
• Press either F1 or F2 to increase P1's or P2's score.
• Press ESC to clear player info.

2 basic transitions are included in the Resources/OBS Transitions folder, if you don't have a transition yourself of course. To use them on OBS:

• Add a new stinger transition.
• Set the video file to Game In.webm or Swoosh.webm.
• Transition point -> 350 ms.
• I recommend you to set the Audio Fade Style to crossfade, just in case.
• On the scene's right click menu, set it to Transition Override to the transition you just created.

The interface will also update basic text files with the match info at Resources/Texts/Simple Texts/ so you can add them to OBS with ease.

If you drop an image in Resources/Team Logos/ and write the name of the image to the tag of a player, the image will appear on the game overlay.

---

Customizing stuff

For the overlays/images, there are PSD files for both the game scoreboard and the VS screen to help you customize them.

For the video backgrounds, you can either replace them with other .webm files or just cover them with an image overlay.

And if you're brave enough to dive into the code, I tried my best to document everything inside the code so you have an easier time, so go grab those html and js files!

If you want to customize the GUI, thats going to be a bit complicated since you will have to learn how electron works yourself. In any case, the source code is also on this github!

And most importantly, this project was created using RoA-Stream-Tool as a base, so if you wanna go crazy on customizations, I really recomend you to check out that first, since it's way more documented (and also has a wiki!), especially if you wanna adapt this to other games. This Melee version is way more locked down.

---

Do you want to adapt this project to another game but can't figure out how to? I would be happy to help! Contact me on Mastodon or on the project's Discord Server!

Do you want to support this project? Buy me a ko-fi or tip me directly!

This is one of my first projects in Javascript, if you know your stuff and look at the code, you may find ways to make the thing a bit more optimized (because right now... it isn't), and I would be happy to hear how to! Please, use this github to leave suggestions on how to imporve things.

---

Resources: The spriters resource, the Melee HD Asset Library, and the VS poses.

melee-stream-tool's Issues

include notes on how to use developer tools with Game Scoreboard.html

users may run into trouble customizing Melee Stream Tool if they try to preview it in a normal browser, due to CORS:

Access to XMLHttpRequest at 'file:///C:/Users/jmlee337/Downloads/Melee.Stream.Tool.v1/Melee%20Stream%20Tool%20v1.1/Resources/Texts/ScoreboardInfo.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

I suggest adding something like the following to the Customizing stuff section:

Game Scoreboard.html will not work in a normal browser. To customize Game Scoreboard.html with developer tools launch obs(64).exe with "--remote-debugging-port=9222" then open your local chrome and go to "localhost:9222".

Unable to build Windows version from source

Hi! in this repo, in the "Stream Tool" directory, there's a .exe file for the Stream Tool. How was this built?
The provided Windows build method (electron-forge make) does not generate a single .exe file but a whole folder of things, mostly Electron specific stuff, and building this and moving it into the "Stream Tool" folder still does not work as the file paths in the code are all hard coded to be relative paths from the "Interface Source Code" folder to the "Stream Tool" folder.
In my fork I have made the paths dynamic based on an environment variable and this works fine for tile Linux AppImage, but I'm still unable to recreate or make a replacement for the single .exe in the "Stream Tool" folder.
Could you please provide build steps to recreate or replace the .exe file? Thanks!

Game Scoreboard.html doesn't want to update

When I attempt to update the stream, it will only update the VS Screen HTML file, but the Game Scoreboard HTML file will freeze in OBS.

Tested:

- Deleting and re-adding Game Scoreboard.html from OBS Studio
- Quitting Melee Stream Tool and restarting it
- Both deleting Game Scoreboard.html and quitting MST, then adding back GS and opening MST (it works at first, but when I switch to VS Screen and then back, it doesn't work)

I use Pop OS 20.04

Suggestions / Questions on contributing to PRs

Hello!

A friend of mine was asking for advice on how to add certain things to this project - and then I ended up digging into the source code and modifying it myself.

My main goal was to add character icons underneath the score counters for the game scoreboard.

I got this working and then I dug into things some more!

I was able to get an application running on MacOS (my personal platform). I upgraded the packages within package.json as well.

I have further ideas + suggestions, such as:

• Utilizing the forge.packagerConfig.extraResource to package all of the additional files relied upon
  • This would remove the need of having to place the executables in Stream Tool
• Separating out the images, CSS, etc. from the javascript code
• Generating an output HTML file
  • This goes hand in hand with the extraResource modification above - basically separating all of the electron application code from the outputs of Game Scoreboard.html and VS Screen.html
  • This also resolves possible pathing issues between operating systems - mainly MacOS. I found that utilizing relative paths for the generations .app couldn't reach "outside" of the application to files within Stream Tool - it only worked if I packages the files within forge.packagerConfig.extraResource

All this being said, what would be the best way for me to present changes?

I could perform incremental changes, such as:

• PR for my initial change of character icons
• PR for updating packages in package.json
• PR for separating out code and resources
• PR for generating the output HTML files
• etc.

I could also fork the repo as well! I recognize that this repository hasn't been active in a few years. I also recognize that this project (and all other stream tools) have been passion projects of yours!

If I do end up forking, I'll be sure to direct everyone to the original repo and to encourage them to support you via your ko-fi. Additionally, if my fork contains the changes I outlined above (if I ever get around to it as I am also busy), I'd love to talk about them with you / help integrate them into your original project.

Suggestion: Do not mirror the P2 portrait

Since it looks a little silly with Luigi's backwards L on his hat, and in general I just am not a fan of the practice of mirroring images personally.

Is there a technical reason the P2 portrait is mirrored? I think it would look just fine if it wasn't. :)

Suggestion: Have a Button to switch the sides of the Players

When running an event with a Camera, often times the players sit in a different order than expected, having a single button switch the sides of the players would be very helpful. As an example, going from this:

to this:

currently requires you to retype everything and reset characters and score, and as this is something that I as a TO think is quite frequent having a single button swap them would be great.

Suggestion: Adding More simple Text

I really love the simple text feature as it allows myself to sue custom fonts to make dynamic Stream overlays. I think good additions would be a Round type (Best of 3, or Best of 5) A player 1 and 2 Score (Just a number). Player 1 and 2 WInners/Loosers (A text file that is empty if not selected) Player 1 and 2 Tag. A player 1 and 2 character name (simply says who they are playing). Additionally if there was a way to make it possible to save a image source of obs that changes based on player 1 and 2 character to teh stock icon that would be awesome. Similar to the big house 9 overlay.

Player names don't appear on the scoreboard after updating OBS to version 28

Player names won't appear on the scoreboard after installing OBS 28.0.1. I've tried re-adding the scoreboard html to the scene, I've made sure to check the refresh when inactive and custom framerate options. I've also refreshed the cache. The caster names and round names show up fine. I also tried changing the character border color and no dice there either. :(
It can sometimes also take a moment to fully finish loading while the score ticks bounce around, but that also happened in previous versions.