Smash Stream

ESI's Dynamic Smash Stream Content. Based on NodeCG and the Tip of the Hats 4 - Overlay but modified for a smash tournament running (see What does it do?)

Usage Note: The overlays can currently only be used with Google Chrome and OBS Studio (with v1.21 of its Browser Source plugin) or vMix which is a NodeCG restriction.

• What does it do?
  • Includes
• Setup
  • Local
  • Docker
  • Make It Your Own
• Credits

What does it do?

It provides a dashboard text update system that populates content positioned via HTML over the png overlay designs. We used ai2html to quickly turn our .ai overlay files into dynamic overlay material which is present thoughout the system. Slight tweets to text positioning were required after the ai2html conversion but this process minimized the design to production window.

This system was used by the eSports Initiative throughout their production of Shuffle: Battle of the Midwest.

Includes

• Content editing dashboard
• Game (Melee), players and casters "Hub" screen
• Melee game overlay
• Smash 4 game overlay
• BRB screen with Smash 4 looping video
• Shuffle and ESI branding assets 🎉 ;)

Setup

---

There are a few ways to install and run this overlay system:

Type	Instructions	Pros	Cons
Local	Do a local install	- Easier install - Less computer resources - Less Windows requirements	- Less isolated
Docker	Do a docker install	- Install isolation	- More knowledge required - Unix, Mac, or Windows 10 Pro required

Additionally, if you want to maintain a copy of the resources beyond your local install create a Github account and fork the repositiory to your user.

Local

Install Nodecg and Nodecg CLI

1. Install NodeJS (we used Node v7.8 which was the current)
2. Install Git
3. Open a terminal (PowerShell, CMD, Git Bash, or other)
   • PowerShell or Git Bash are recommended on Windows
4. Install Nodecg CLI
5. Proceed through the nodecg setup commands to have the full nodecg product installed
6. One should now have:
   • Node & npm
   • Nodecg CLI
   • Nodecg
7. Navigate to the created nodecg/ directory in a terminal using:
   • cd (change directory) -- cd .. to go up a directory cd <folder> to go down
   • pwd (print working directory) -- see where you are
   • ls (list directories) -- see where you can go
   • Hint: On windows copy the path from File Explorer and cd directly to that ex: cd C:\user\...
8. Install the repository by running nodecg install esportsinitiative/smash-stream in a terminal
9. Launch the overlay with nodecg start
10. Navigate to: localhost:9090/
11. Use the overlay and profit!
12. Proceed to Make It Your Own

Docker

NOTE: For Docker steps if installing on Windows only Windows 10 Pro is supported (Docker/Microsoft requirement).

All of development and ESI's stream used this installation:

1. Install Docker. If on Windows or Mac the Docker Community Edition is the version you'll want.
   • All terminal steps on Windows need to be within an Administrator PowerShell
2. Install Git
3. Then clone the repositiony: git clone https://github.com/esportsinitiative/smash-stream.git
4. Navigate to the .../smash-stream/ directory. (Same process as Local Install instruction #2)
5. Build and run the Dockerfile:

docker build -t smash-stream .
# Replace `pwd` with $pwd` on Windows
docker run -it --rm -v `pwd`:/usr/src/app/nodecg/bundles/smash-stream/ -p 9090:9090 smash-stream bash
nodecg start

6. Navigate to: localhost:9090/
7. Use the overlay and profit!
8. Proceed to Make It Your Own

Make It Your Own

Update content the following content:

File Location	Content
smash-stream/graphics/elements/ss-social/ss-social.js	social media links

Credits

The overlays are based on the work of the NodeCG Team and the Tip of the Hats 4 - Overlays. The Smash addaptation was done by:

• David Soller - Developer
• Elliot Schoolcraft - Designer
• Andrew Carringer - Editor