Not much needs to be said to introduce someone like MANvsGAME, a man who’s name is synonymous with Twitch streaming. His content and ambition to conquer games is one of the reasons I found video game streams appealing when I started watching. It’s more and more common to make games the focus of the designs. Shying away from overlays, bulky bars, and an overload of information is a trend that viewers and streamers alike are embracing more and more. This design is no exception.

MANvsGAME’s original overlay style was himself in front of a green screen, a spinning watermark, and alerts that would pop up on occasion. Rather than changing the formula, we did our best to embrace it. Myself, Froyd, and Tehkhop all teamed up on this project – as it involved a lot of new ideas that we haven’t yet pursued.

Designing alerts that interact with on-screen elements

You should be able tell from the demos that these alerts are quite different from what we’ve made in the past. I’ve worked with a lot of alerts, and doing so has its pros, but one of the major cons is that you start thinking within the limitations of what’s possible (or better yet easy). So, I asked Froyd to just design something cool, and not worry about how we were going to pull it off. We’ve seen alerts that interact with on-screen elements before, and got in touch with a few awesome people that gave us information about how they pulled these things off. After some support from StreamLabs we receive official support for their Websockets API.

Why use websockets?

After a few failed attempts to “fake it” we finally decided that normal alerts just wouldn’t cut it. Froyd’s design, and the direction from MANvsGAME himself, dictated that we needed a way to interact with the watermark on-screen. Not only that, but also have some data that didn’t disappear after the alert was cleared. Websockets provided a simple way for us to tap into the data feed from StreamLabs. Tehkhop created a queue system and some amazing code that filtered the alerts and even brought in emotes in from the messages.

From there, it was as easy as any other alert set that we made. The only difference is that we did it all on one page. Check out the final results below.

Retro game themed Twitch panels

It’s not often that I play favorites, but I think these panels are my current favorite set that we’ve created. Maybe it’s my soft spot for retro designs, or maybe it’s the time that I had to spend remaking them, but something about them I just love.

While there’s nothing groundbreaking about the design or the process we used to create these, we did run into a few speed bumps. These panels were originally created in Adobe illustrator across multiple art boards. However, when they were exported, they looked completely different. The simple reason for this is that pixel perfect mode was not properly utilized. If this post reminds just one person to enabled the “align art to pixel grid on creation and transformation” option that’s found in the top right of Illustrator, then its done its job. Changing things afterwards was not as easy as I thought it’d be, so double check you have that enabled when working with pixel art!

A look at a few of the Twitch panel designs we created for MANvsGAME. We took inspiration from older games such as Mega Man and created a design that uses subtle color variations and pixel art. Designed using Adobe Illustrator and Photoshop.

Social media popup

We get a lot of questions about looping popups, so let me explain the easiest way I’ve found to make these happen. First, design something cool in After Effects or similar. Second, export that as a WebM. Finally, create a local HTML page that plays that WebM on loop with a bit of delay. If you’re reading this post, it’s likely you’re interested in creating stream designs yourself. If you can pull off the steps for creating a social media popup, then you can make everything else listed in this blog post. In my opinion it’d be a solid place to start and to challenge yourself a bit.

A small feature that’s built into this is the ability to display ads/sponsor information as well. Working with a Google Doc I added in options to repeat the social popups X amount of times before the ads are shown. Meaning that MANvsGAME can easily change how long the interval is between the ad loop replaying while still being able to show his social media information.

A simple social media popup that mixes video files with a bit of web code.

We connected it with a Google Doc to give options for delays, ad spaces, and timings.

Intro and intermission scene

Last but not least is a simple design for the intro and intermission scene. Again, we didn’t want to break the formula too much. We left the background transparent so that any design or video clips could be shown behind. While we included a general looping background, I think it’d look great with clips or games playing behind that have a black filter over top.

We placed the music bars and some of the pixel art from the panels to work with the alert page, watermark, now playing text, and social popup. We actually made multiple designs for this. One uses FooBar with a mask applied to the source and another uses Plane9.

Wrapping things up

If there’s one thing that I learned from this project, it’s that sometimes it’s good to work outside or at least on the edge of your comfort zone. We would have never looked into the possibilities that websocket alerts offered if we wasn’t for designing how things should look first. I don’t recommend doing this for clients that have a tight budget or time frame. But if you’re lucky enough to have a client with patience and understanding of the process, then challenge yourself to learn and create something new.

If you don’t already, go and follow MANvsGAME on Twitch. We’ll see you in the chat.