Back2Warcraft NodeCG Bundle

Chris Stevens
Jul 30, 2017 · 3 min read

The Back2Warcraft NodeCG bundle massively improved the organisations production quality and received raving reviews from viewers and users alike. A huge number of features spanning various different external APIs bring Warcraft 3 to viewers like never before — breathing new life into this old classic and giving the B2W team the tools to continue to grow and improve. Since the introduction of the new graphics, B2W’s Twitch following has improved by almost 33%!

Back2Warcraft are the biggest Warcraft 3 broadcaster on Twitch.tv — covering 95% of all professional-level tournaments both online and on-location around the world. They came to me looking to improve their on-stream presence, while viewership and casting quality was steadily improving, production quality lagged behind.

Image for post
Image for post
Back2Warcraft’s old graphics.

Any dynamic elements of the old graphics were updated manually, either via XSplit text sources or by editing images in Photoshop — obviously this isn’t sustainable as it took up a lot of pre-show time that would be better used rehearsing and researching the days games. So we entered discussions and came up with the following list of of scenes:

  • Start card
  • Intro video
  • Talk scene
  • Player stats scene
  • Bracket preview scene
  • Map selection scene
  • In-game scene
  • End card

Four key priorities of the new graphics were also discussed, these were to firstly ensure they were clean and modern looking, next was to ensure players are given a face — as very few of the tournaments are played on-location, for the most part viewers do not get to see the players so it was important to ensure that player images are used where possible, and to include in-depth statistics on individual players, match-ups, etc. Next, the team wanted as much automation as possible, trying to cast a game and mess around with the graphics at the same time is unacceptable. Finally, giving both the Back2Warcraft brand and the viewers/supporters as much exposure as possible whilst still maintaining point #1.

After the original release, coinciding with a major tournament, containing most of the scenes you can see below, the player stats and bracket scenes were added a short while later. This was easy to do as I developed the project with expand-ability in mind, the modular codebase allows for continuous improvement of the stream in response to both viewer/caster demands, and budgetary constraints. Live, on-air, changes to the system can also be done with minimal effort and zero on-stream interruption.

The finished product depends on a variety of external services to enrich both the caster and viewer experience, including Liquipedia for player stats/images and tournament bracket data, Strawpoll for live polls, tmi.js to interact with Twitch chat, Punto to pull in live data from Warcraft 3, Streamlabs for donor/sub information, and obs-websocket/obs-websocket-js for OBS-NodeCG integration.

Image for post
Image for post
Back2Warcraft’s new graphics.

Thanks to John Nichols for the graphic design work as well as various members of the Back2Warcraft community, notably Neils and Turbosau.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store