Vespyr NodeCG Bundle

The Vespyr NodeCG bundle is an interactive Twitch.tv live-stream experience I created for the League of Legends tournament host, Vespyr League. It encompasses a huge number of features and helped drive up viewership, improve fan engagement, and even attracted the interest of a number of startups and international corporations… The code is available to view over on my Github.

History

The first iteration of the ‘Stream Controller’ (as it’s known internally) was a basic C# application that took data from the streamer and an API, and wrote that data in a specific format to a number of text files that OBS then read and displayed on stream. It was pretty primitive and didn’t really allow for much flexibility — although the results weren’t too bad.

Screenshot from the Houseparty5v5 EUW stream (now known as Vespyr League) and the stream controller (inset).

Inset is the stream controller - It was thrown together, which explains the abundance of ‘shouty’ text and distinct lack of any styling whatsoever; however it made up by being an incredibly useful tool for the organisation, it allowed the streamers to easily access and update data during the stream, without having to go through tons of dialog boxes in OBS. Additionally, it is able to generate OBS scene configuration files in one click, meaning the streamers can spend more time streaming instead of going through all the sources changing C:/Users/Chris/… to C:/Users/John/… — when combined with the fact that this single executable also contained all the stream graphics, it meant I had a system that allowed me to ensure the streamers always had the latest graphics (due to the simple version number in the stream controller) and that updating the graphics was as simple as downloading the latest application, clicking a button, and importing the generated config into OBS.

Houseparty5v5 EUW then rebranded to Vespyr League during December 2015, and I decided that I wanted their Twitch streams to rival the likes of Riot Games and ESL’s production quality, regardless of whether it pulled in 1 or 100,000 viewers. I started researching how I could make this a reality and while watching Awesome Games Done Quick (AGDQ), I thought that their overlays were pretty impressive — a quick search uncovered that they were made using a framework called NodeCG, and that the code behind them would be open-sourced after the event along with hours of explanatory videos. The rest, as they say, is history…

Development

Considering I hadn’t even heard of Node.js before this project and my experience with HTML/CSS/JS was restricted to some Bootstrap websites and some basic jQuery stuff, it’s safe to say I was a little out of my comfort zone. But onwards and upwards, after a lot of searching and trawling through hundreds of StackOverflow posts, I got my first commit pushed. The feature-set at the start was limited to just the champion-select scene, and didn’t have any of the API-goodness it does now, but what it did have was smooth animations, a dashboard that could be operated by people other than the streamer, and it looked damn good. With a week until Vespyr’s qualifiers started, and three weeks until the first game of the main season. I had a lot of work to do.

Over these three weeks, I added features at a ridiculous rate — by the time the first game of the season came around, the entire bundle contained: Strawpoll Integration, Autofilled Casters (from hardcoded list), Autofilled Teams (from external API), OBS Remote Integration, five different scenes (coming-up, champion-select, in-game, analysis, end), and lots of silky-smooth animations.

The champion-select scene on the first day of the main season.
The coming-up scene.

Fast forward two weeks, after more furious coding the bundle now contained: seven different scenes (start, loading), Autofilled teams & rosters (from external API), and hide-able in-game elements (through a ‘keylogger’ on the streamers PC sending certain key events to the server). At this point, little over a month after I had first heard of Node.js and NodeCG; I had a fully functional package that I genuinely believe fulfils my original goal — “to rival the likes of Riot Games and ESL’s production quality”.

The champion-select scene three weeks into the main season.

Legacy

While development on the stream controller had to stop in order to allow me to focus on school exams, it’s flexibility meant it adapted to the needs of the organisation throughout the rest of it’s main-season and play-offs. The Vespyr NodeCG bundle was a huge learning experience (I’ve now heard of Node.js!) and I’m keen to put what I’ve learnt to bigger and better projects in the future, maybe yours could be next?


Thanks to John Nichols for the majority of the graphic design work, Vincent for the Vespyr Tournament Platform API, everyone else at Vespyr League, and the NodeCG Gitter community for putting up with a constant flow of noob questions.