MTG Commander Overlay

A web-based streaming overlay

I’m an avid gamer. I spend at least two evenings a week playing board games and card games with my friends. I’m also a big believer in the role community plays in physical gaming and helping my Friendly Local Gaming Store (FLGS) whenever I can. So, when my local store decided they wanted to stream some of their events over the internet, I was more than happy to get involved.

The Problem

When streaming a game of Magic The Gathering, especially a multiplayer format like Commander, there is essential information that needs to be on screen to make it easier for the viewer to keep track of what’s happening on the table. The problem I had to address in the design of the MTG: Commander Overlay (MTGCO) was how to best display that information and update it whilst playing the game.


The Solution

The solution, after much experimentation, was a web-based overlay that can be loaded into OBS, or other streaming software, and controlled by an admin panel on any mobile phone or tablet. This had to be hosted on the web and contain transparent elements so as not to obscure the stream.

I designed the overlay in Sketch and coded it using HTML, CSS and JS powered by Google Firebase. This allows the overlay to be loaded in any streaming software, and for the admin panel to be loaded on any mobile device.


The Process

Early designs of the overlay were very much inspired by the visual language of Magic The Gathering. Elements of the game’s cards informed the visual direction and font choices made for the overlay, and information is updated using the features of OBS on the computer running the stream. This led to a system that worked, but was quite cumbersome to update, and where all updating was up to one person who was also trying to play the game.

Original overlay graphics inspired by the art direction of Magic The Gathering.
The original overlay took major cues from the design language of Magic The Gathering

As we continued to stream each and every Monday, it became apparent that this design gave too much space to the card overlay (which was rarely used), and that it didn’t allow enough space for the information we wanted to show on the screen whilst playing. It also relied too much on producing and exporting images for each situation, putting a lot of load on the streaming software.

With this in mind, and inspired by Commander Versus, I created a new overlay using bold colours, large type and plenty of space for information. This overlay was powered by HTML, CSS and JavaScript, removing the heavy lifting from the streaming software, and allowing it to be updated through the web.

New overlay using bright primary colours in black pills.
The new overlay designs uses bright primary colours in transparent pills for a more modern look.

This also allowed the information to be updated from a secondary device - normally a smartphone or tablet - and for multiple people to update the information at a time, allowing for a smoother stream and more focus on the game.

Image of the Admin Web App running as it would on an iPhone
Everything is controlled from a web app, allowing players to control the life totals, player names, etc from any device.

The Result

Email Sam