Esports Overlay System for Live Broadcasts
Company: N3rd Street Gamers
Problem
There is no standard for amateur esport broadcast producers to edit dynamic data on stream overlays, or broadcast graphics.
Solution
A web server is spawned on the production PC. Producers use an HTML based user interface to edit any dynamic data on the live stream overlays. The production User Interface (UI) can also be accessed by any device, giving the producer the option to delegate on-screen updates to anyone with a web enabled device, including a phone.
The fact that the overlays are HTML based, they can be easily be loaded into any amateur broadcasting software like OBS and xsplit.
How We Got There
PNG Files Over Video Source
When we first started producing esports streams our team would keep photoshop open and have to constantly over-write PNGs through out the duration of an event. From there we moved the location of the PNGs to a linked dropbox. This gave us the ability to have a remote photoshop user update overlays. But this still required that user to have basic photoshop knowledge.
TXT Files Over Static PNGs Over Video Source
From here we moved on to .txt files. In the broadcast software you could link text layers to a .txt file. This made the process a lot easier for amateur computer users. But required 20 to 30 text files open on the screen. We started developing a .txt file front-end to help manage all the text files from one window. Then the broadcasting software we were using added a plug-in to import HTML files.
Screenshot of the scene used between games.
Producer can easily change teams and start times.
Transparent HTML Over Video Source
Around the same time, we started to get more interested in motion graphics. It also helped that the broadcast software's browser plug-ins were all updated to support CSS animations (and JS). After brief discovery session, we found that a node-based app would be the best solution.
It is here we brought in a full development team.
- UX Designer to plan the front facing designs and the Production User Interface
- Graphic Designer to design the static overlays
- Motion Graphics artist to mock-up each overlay's animations
- Front-end developer to translate the mock-ups into code
- Back-end developer to tie it all together and create an easy to install package.
Once completed one producer could easily change any dynamic data in one easy window.
The core of my involvement.
Processes
- User Research
- User Testing
- Low-Fidelity Wireframes
- High-Fidelity Wireframes
- Motion Graphics
- Prototyping
- Front-End Development
Tools
- Axure (Wireframes)
- Adobe CC
- Github
- NodeCG
- OBS
- Xsplit
- Twitch.tv