I was given the opportunity to work with Sodapoppin, one of of the biggest streamers on Twitch. This all came about because a fan of the site tagged me in a Twitter post (thanks K!TTeN).  I enlisted the help of Froyd, who worked on the initial design for the overlay and the motion graphics. We created in-game overlays, a custom intro/intermission screen, and some of my favorite alerts yet. Let’s take a look at how it all came together.

A quick look at the finished overlay and alerts.

Coming Up with a Plan

Sometimes you struggle with a plan of action or theme for your designs, but this was not one of those moments. After discussing the scope of the project it was clear we’d need to make something simple and versatile, as Sodapoppin plays a lot of different types of games. I had two ideas almost immediately, both of which I wanted to stick with throughout creative process. First, was the idea to keep the alerts anchored to a webcam frame and have them somehow interact with the graphic we designed.

Second, I wanted to have certain colors connected to the types of alerts. Red represents subscribers, green connects to tips, purple with bits, and blue is simply the idle color. So, in essence, I wanted to create an RGB overlay!

Final Colors for Sodapoppin’s Overlay

One of the biggest challenges we were facing is creating alerts that tied into webcam frame, while making it able to move around the screen in various positions. Our initial storyboard of the alert involved some sort of graphic popping out of the top of the webcam frame. So, we came up with a solution to basically mirror the alerts vertically, while having code contain the width to be no wider than the frame. This would allow for placement anywhere on the stream.

Lastly, I wanted to create something for Sodapoppin that I haven’t seen used in any other streams. The idea was to create a highly editable and user friendly intro, intermission, and full webcam scene that included a dynamic leader board (more on that later), Twitch Chat, and a section for channel updates.  However, before we got to this, I wanted to make sure we had solid ideas for alerts and the overlay, as they were clearly the most important part of this project.

Creating the Overlay and Alerts for Sodapoppin

Webcam Frame

There’s honestly not much to say about the webcam frame, other than it went through quite a lot of revisions. Not only did we want to make something that Sodapoppin and his viewers liked, but we also wanted to make sure that it’d be something that wouldn’t distract from the games he’s playing. Our earliest concept was a bit… boring. So, we adding some simple geometry and what we referred to as “energy” to the design.  The energy sections is what will be changed for each type of alert.

The final design for Sodapoppin’s webcam frame

Early concepts involved more details to not only the frame, but the energy section animations as well. However, in the end,  we decided that less was more. We even tried full motion animation for the energy sections where it looked almost like fire and smoke.  However, at smaller sizes the animations were not noticeable, and just looked bad overall. Sometimes you just need to look at your original idea and find a way to go back to the basics.

To do so, we looked at our proof of concept that we made the same night we talked about this beginning work on this project. Instead of using gradients, textures, and heavy animation, we returned to what we liked from the original idea.

Our Proof of Concept

Alerts and Notifications

I’ve had quite a few questions about how the alerts actually change the webcam colors, and to be honest, I think people might be a bit disappointed by the answer. Going into the design,we knew we were going to be basically replacing the webcam frame with a new one, and having them line up in a pixel-perfect position. This means the idle webcam is always on screen in OBS Studio, but is then covered up by a WebM that animates the color changes and portions of the frame that are needed.

Next was the process of adding code to make the alerts update and animate properly. I wouldn’t say this was a difficult task, but it took time and patience. Using key frame information and rendered examples I timed JavaScript and CSS based animations to move the usernames of Sodapoppin’s supporters. We used some JavaScript to make sure the videos were loaded, and then made them start at the appropriate time to sync with the coded animations.

The final result is one of my favorite alert packages, which was a good thing, because I had to rework the code to match the version that was vertically mirrored.

Intro, Intermission, and Full Webcam Design

While Froyd ironed out details of the video files for the overlay and alerts, I took on the task of creating of creating something that Sodapoppin could use in multiple non-gaming scenarios.

So, I made a wishlist of items and functionalities that I wanted included in this design, which were:

1. Integration with Google Docs to make it easy for the broadcaster to update information and to hide certain parts of the design when not in use
2. A dynamic leader board to show the top 10 monthly tippers, cheerers, and recent subscribers
3. Editable sections (via Google Docs) for announcements, schedules, advertisements and other useful information
4. Supporter Labels
5. Twitch Chat

With this design, we were able to add everything in. Also, I want to give a huge thank you to Tehkhop for helping me get the leader board properly working.

Google Doc Controls

My favorite part of this design is how easy it is to make changes. I set up a document that allows for the entire bottom area and individual sections to be toggled on and off. It also contains the ability to change the timings and delays for each section on the fly.

Design elements and content can be controlled/changed easily by Google Docs

So, for example, if a giveaway is active and an important schedule update is happening, it can be changed in the doc and updated on the overlay in a matter of seconds. Don’t need to show the entire bottom area at all? One option can be changed, and the overlay is updated and the supporter labels are shifted into a different place.

Overall, I’m extremely happy with what we were able to create for this project. We had a lot of great feedback from Sodapoppin’s viewers and fans, which in the end helped us improve the products we delivered. I want to say a huge thank you to all that tweeted and messaged me your thoughts and constructive criticism about the project. It was a pleasure working with someone that has such a passionate community.