How I made my livestream’s Dynamic Overlay

Hello my friend, it seems you are curious about dynamic overlays.

I too was curious. In fact, I was so curious that I successfully created one from scratch myself!

If you are into live streaming, it is no doubt that you are always looking for ways to entertain your audience. A dynamic stream overlay is a great, automated way to add that value. Let’s take a look at what my overlay looks like, how I did it, and why it has improved my stream. You might get some ideas for your own stream too!

Why a Dynamic Overlay is Awesome

1. More Engaged Viewers – Traditionally, you engage your viewers by talking to them as much as often. This can get tiresome after a couple hours, so having your stream “talk” and react to viewers will lighten the burden.
2. Encourages Follows/Donations – Setting up systems to provide stats and fun animations “game-ifies” the action of following and donating. You should give recognition to new followers, since a lot of the time, new followers just want to be noticed. Donators should also be featured, so that it is more apparent that their contribution is going somewhere.
3. Self Promotion Space – Banners let’s your viewers learn more about you and the work you do. You can customize the entire overlay to be unique to your style, instead of relying on the default overlays everyone else uses.
4. Automated Entertainment Value – You set it up once, and viewers benefit from the neat animations/interactivity without any added work on your part.

I noticed the potential of dynamic overlays after seeing the “Lachhh and Friends” Twitch stream, which takes an awesome, adrenaline fueled approach to their overlay. I was amazed at how well integrated the stream was, as well as how Lachhh was able to make programming and game development look fun.

Introducing: Gold Stream 2.0

Yes, I did have a version 1.0 that only handled simple music requests, but I felt like I could do way more. Instead of relying on generic TwitchAlerts animations, I implemented my own UI with a couple more features:

• Transparent chat window from all chat sources
• Intro and outro slides (with automatically updated stream info)
• Status indicator (live, AFK, mic on)
• Tip jar meter, with donation highscore ticker
• Custom donation animation, that visually links to the tip jar
• Custom song request animation, that visually links to “Current Song” ticker
• Custom follow animation, that visually links to follow meter
• Dynamic banners, for promoting other artists and encouraging follows.

Look and Feel

As I mentioned before, a huge benefit of custom overlays is setting the mood for what your stream is about. Before I upgraded the overlay, my stream was very generic. Although it was clean and modular, it only used plain black rectangles to frame the content.

For the new overlay, I thought about what kind of vibe my live streams give off:

• I regularly stream at night due to my regular job, so people are usually joining in the evenings.
• Unlike high energy gaming streams, I have a gentler attitude and voice.
• It’s an educational stream: I like to explain the art process and answer questions.
• I decompress and relax with animation and art. I play chill music to help with this.

All of these factors led me to choose a serene, night-time theme. I want viewers to feel cozy and comfortable enough to ask questions. My stream should be a familiar club house for people to hang out in after school or work.

How it was done (technical details)

The implementation for the stream was a giant mix of services, due to the wide range of capabilities I wanted to provide. I did a day or two of research to ensure that these interfaces could provide me with the data needed for my overlay.

Technology stack overview. I hooked into these services via REST api calls and reading local text files generated by client apps:

• OBS – My livestreaming broadcast application of choice.
• Twitch API – A lot of the streaming and follower data comes from Twitch.
• TwitchAlerts + TA Client App – Provides valuable data for donations and session info.
• NightBot + NightBot Client App – Needed for reading song requests from the chat
• Snip – Needed for reading my Spotify app’s currently playing song
• Restream + Restream Chat App – Consolidates all 3 of my stream chats (Twitch, Youtube, Picarto) into one.
• Flash + TweenMax – Main architecture to tie all the previous technologies together. Renders the display.

Main Application Architecture

I wrote it all in Flash AS3, because that’s what I know the best. With it, I can animate and render graphics, I can make REST calls, and I know how to read from local text files. I had to split up the overlay into 3 separate SWFs (windowed applications). This is because I needed to sandwich my video feed between 2 overlays to achieve a nice integrated effect. The third SWF acted as a control panel, not meant to be rendered in the final overlay.

Base Layer (background graphic)

This layer simply acted as a backdrop for the stream. It contains the fancy background art, banner animations, and the streamer status indicator. The base layer doesn’t contain much dynamic content or coding, so it is essentially a looping screensaver.

Overlay Layer (all the interactive cool stuff)

The overlay is where all the magic happens. This layer handles anything that moves above my video content, or contains calculated data (follows, new donations, song requests). There are 3 modes for the overlay:

1. Intro mode – Displays my stream’s Twitch status on a title card.
2. Live mode – Displays interactive overlay elements meant for the live stream.
3. Outro mode – Displays end of stream stats.

To display live data, I took advantage of TwitchAlert and Nightbot client apps. These apps update various local text files that I can read from my SWF. I poll for this data every half second. When an change is detected, my overlay app plays an appropriate animation.

• Currently Playing Song – Nightbot app for user song requests. As a neat bonus feature, I fetch the requesting user’s profile avatar and display it alongside their request. If I’m using my own personal Spotify playlist, I use Snip to grab the album art and song info instead.

• Custom Donations – Grabbed from TwitchAlert’s “session_donations” text file. It contains all the needed info to render a custom donation animation (name, amount, message). I really wanted to personalize the animation to appear as a gift. I want the donator to feel as if they are actually placing cash into my tip jar, instead of feeling like they’re paying a bill online. The donation animation also gives the person some notoriety, as larger amounts lead to a longer “coin flowing” animation.

• New Followers –  Also grabbed from TwitchAlert. I felt that my current, GIF based follow animations were getting stale. I decided to customize them a bit, by accompanying each follow with a new animal and sound effect.The Sunmoon character lightly guilt-trips new viewers to follow, increasing a counter until it reaches 10.

A key point to this layer is that a majority of it renders a magenta background. This allows me to apply a chroma key filter within OBS, so that my video content replaces the magenta. In turn, all the non-magenta overlay content appears to float on top of my video.

Control Panel

A third SWF app acts as a dashboard that lets status/modes to be switched and toggled.

Drawing the art

Drawing and animating the banners and background was very enjoyable. Doing graphics for a user interface was a new challenge. You want everything to be grouped in panels, yet also free flowing. Most of my time was spent animating and drawing the live banners that appear at the bottom of the overlay.

Inspiration for Animator of the Minute

Some of my banners feature animators and artists that I know from Hyun’s Dojo. They display their usernames, home countries, and some of their released projects. I even asked them all for a personal quote that they like, relating to art.

The idea for these little spotlight features came from “fun facts” that I watched at my local movie theater long ago.

I fondly remember going to the Multiplex Cinema with my brothers. And whenever we grabbed our seats early, the projector would be displaying some fun Hollywood movie facts before the film. I distinctly remember the my pent up excitement, since I knew I was in for an awesome film in a couple minutes. While stocked up on candies, snacks and high quality good movie popcorn, these movie facts were a perfect lull in the anticipation for the film. This was before smartphones, so there was nothing to distract you. There weren’t any previews, or loud advertisements either.

The theater was always well air-conditioned and sound proofed. Other movie-goers were whispering, so all you heard was a gentle murmur as these movie facts popped up on screen. It was a cool, quiet auditorium in the middle of the summer. It was just so chill.

I aimed to replicate that memory in my new stream overlay.

Conclusion

Deconstructing how Lachhh did his dynamic stream was a fun puzzle. I feel like this was one of those rare projects where I knew how to do everything up front, and all I had to do was implement. There was very little troubleshooting or problems during development.

I’m very happy with the result, as it will last me awhile. I’ll still have to upgrade the overlay over time though, to keep things fresh. This thing took me a week of solid work (couple dozen hours). I’m playing around the idea of developing these overlays as a side-gig. Let me know if you’re interested in commissioning me to develop one for you! (2/24/17 edit: Based on my current projects, I cannot offer this kind of commission work right now).

Having a custom, dynamic overlay is great. I stream multiple times per week and I am exposing/expressing my brand the way I want to each time I do it. Streamers should make their channel their own thing.

It gives you some pride, and if you have the coding know how and art skills, you should invest in it.

(◙◙)

If you enjoyed this post, please check out my other animations and sign up for updates using the form below.