Within a few minutes of discussing the ideas for JoshOG’s stream, we knew we’d have to do things differently. The most exciting aspect of this project was that the alerts were the main focus. I mean come on, how often do  you get to work on a duck driving a spaghetti shooting tank?

Flisky took on a majority of the design process and animation, while I figured out how to get things to work within StreamLabs, Muxy, and OBS Studio. Also, I’d like to thank the artist that created the duck mascot for their work on the vector files used in this project.

Creating the Alerts

There were quite a few challenges involved in getting these alerts to function properly. We started by not looking at what we though was possible, but by what we thought we wanted them to look like.  Rather than detailing each alert, I’ll explain how we went about creating one of the most complicated ones, the duck diving into a pile of money.

 

We began with character rigging and animation in After Effects. As you can imagine, anything with animation can take time and patience, but once we got something we liked, I began integrating it into the alert system. I used some JavaScript to check for the video that the video and animation library was loaded. Next, I created some code that played the video at the same time the timeline for the text animations started.  Meaning I could sync the text animations with the video. This is how I got the text to “pop out” of the pile of money at the proper timing.

However, for higher tier sub alerts, bigger tips, and large cheers, it was clear from JoshOG and his team that they wanted something with a lot of presence on the screen. In this case we needed to figure out a way to have the duck dive across the entire screen, without making a video that was too large in file size. In the past, we’ve noticed some issues with large files that resulted in stuttering frame rate for the stream. To avoid this, we kept the resolution of the video as low as possible.

This caused a bit of a problem though, as our duck dive looked far less impressive. Also, you might notice that the duck jumps off screen at the top before he flips and dives down to where you see his back.  This was so that we didn’t have to animate the turning process. In order to have the duck jump off screen before diving down (without using a video that’s the full height of the streaming area), we used some code to move the video across the screen at the appropriate time. With the previous code in place to animate the text, the only trick was finding the right distance, timing, and easing to use for moving the video while it played.

JoshOG's Tier 3 Sub Explanation
The video moves in one smooth motion as the duck is shown in it’s diving position.

We used the above techniques for a few of the other alerts – however, not all involve the moving the video during the animations. The main trick to these alerts was taking the time to look at the animation key frames and matching to them to the dynamic text for each alert.

Alert Demos

The Overlay

When reviewing the channel for changes we wanted to make, we decided that the overlay only needed a couple of updates. Drawing inspiration from what he already used, we made a few different versions of the overlay that allowed for a bit more of a modular approach. Meaning it can adapt to more than just PUBG. Also, it’s set up in a way that automatically imports the names of his supporters, making life in OBS Studio just a bit easier.

One of the simplest, in my opinion coolest, additions to the overlay was the “chicken dinner counter” that we created.  Using a couple of simple icons, we set up a text file that Josh can change each time he gets a win. So, if he the text file contains the number “3”, then three drumsticks will appear above his camera frame. Once it’s above five, the icon will slightly change and then show the icon plus “x 5”. This was done via JavaScript that checks the text file every few seconds and then updates the graphic.

PUBG Chicken Dinner Streak CounterAnother small touch is that when his sub counter increases, the clock hands on the clock icon spin backwards. I wonder if anyone watching the stream noticed that yet?

Scene Designs

The scene designs are pretty straight forward, but includes a few cool features. This was another update based on what he previously had, but of course we wanted to put our own spin on everything. First, the top area that says things like “stream is about to start” is actually created via HTML and CSS. It’s read from a text file stored on the local machine. Meaning Josh could duplicate this scene quickly and easily, then only update the text file for different scenes. We like to do things like this to make the OBS Studio sources a bit less cluttered. This also means we do things like embedding a chat iframe or object into the file that’s opened in OBS Studio as a browser source.

 

We of course had to include the duck, so we created a simple looping animation of his mascot. The aurora background is separate from the information on the scene, simply so that Josh can replace it in the future if he wants a quick update to this design. Also, I should mention that the “sponsored by” section is just an image slide show inside of OBS Studio. While we have more control over the animation if we did it in something like After Effects, we wanted to give Josh an easy way to change out or add any sponsors.

Conclusion

This project was a lot different than the normal for us. We pushed the limits of what we thought alerts could do, worked with character rigging, and had a ton of fun in the process. Sometimes we’re lucky enough to be working on a project that we enjoy so much that we forget we’re even working… and this was one of those projects.