NodeCG for Smash - easy dynamic stream graphics/overlays for Melee

[kaabistar]

NodeCG is a broadcast graphics framework and application for Twitch streamers that's been used for the stream graphics at events like Games Done Quick and Tip of the Hats. Basically, it lets people easily create and use dynamic stream graphics using a convenient dashboard.

I made a NodeCG bundle for Melee tourney streams and have been using it for tournament streams in Vancouver. I've been working on this for a few months now and it's finally ready for public release. It's pretty easy to setup and use and my hope is that this will allow local streamers to upgrade the quality of their stream graphics and make updating stream overlays much easier. It's all web-based so it'll work on any OS and isn't very resource-intensive, which means fewer framedrops, as opposed to something like StreamControl which is Windows-only and uses Flash. The background graphics are easily modified in Photoshop, and the layout of the graphics and the animations can be customized if you know HTML/CSS/JavaScript.

It includes:

• Player tag/country/character/score display, with 2 player and 4 player modes that you can toggle between.
• Top info panels, with support for displaying short messages (like stats or bracket updates) for a short period of time
• Playercam text
• Lower third text
• A top 8 bracket display. You can pull brackets from Challonge or manually edit it yourself.
• Remotely changing OBS scenes from the dashboard, including a transition animation
• Crew battle rosters showing players and who is knocked out, supporting up to 10 player crews
• Customizable graphics if you know how to use Photoshop. Customizable layouts/animations if you know HTML/CSS/JavaScript.

Installation instructions on GitHub
This project is open-source so please feel free to fork the repo and make modifications to suit your needs or if you want to contribute just make a pull request.

Screenshots

Spoiler: Screenshots

The dashboard

Two player layout and crew battle roster

Four player layout

Pop-up message

Lower third

Bracket display

Future plans

• Add sponsor icons
• Add tags to a persistent file so they can be autocompleted with associated country
  
• Support for other Smash games?

 

[TastyCarcass]

Hi, this is awesome! was looking into creating NodeCG overlays myself.

Have you had luck installing this on mac, or OBS Studio? I get an error when I NodeGS start it:
Failed to mount nodecg-for-smash extension: Error: Cannot find module 'obs-remote'

Nothing shows up on the dashboard afterwards.

 

[kaabistar]

Hi, this is awesome! was looking into creating NodeCG overlays myself.

Have you had luck installing this on mac, or OBS Studio? I get an error when I NodeGS start it:
Failed to mount nodecg-for-smash extension: Error: Cannot find module 'obs-remote'

Nothing shows up on the dashboard afterwards.

Hi, sorry about the late response. To fix that, try entering 'npm install obs-remote' in the command prompt in the nodecg install directory. It should work after that.

 

[TastyCarcass]

Thanks for that, I really should have noticed the node modules were empty.

I tried to use the graphics htmls to display the information after updating the dashboard, but the text isn't appearing on the pages. Is there something I'm missing? I do expect to alter their positions in the css depending on what's required.

I'm fairly new to website development and using nodecg, so I'm sorry if the answer is obvious. Hoping to work on an overlay for the needs of my scene, and hopefully contribute.

 

[kaabistar]

Have you tried opening the graphics in the browser? Try opening the browser console in the dashboard and the graphic page (Ctrl-Shift-J in Chrome) and check if there are any errors or messages.

 

[Dandy_here]

I keep getting jade has been renamed to pug
EDIT: Fixe dthat but when I do the npm install -g bower thing, nothing happens