MTG Commander Overlay

MTG Commander 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.

Old overlay

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

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.

Admin panel on an iPhone

The Result

Email Sam