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!

streamScreen

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 “Lachh 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 Lacch was able to make programming and game development look fun.

Introducing: Gold Stream 2.0

streamScreen4

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.boringStreamOverlay

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.

streamScreen2

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.

goldStreamAPI

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.

GoldStream

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.

streamScreen3

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.

streamscreenSongreq streamscreenSongreq2

  • 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.

streamScreen6

  • 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.

streamScreen5

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.

streamScreen8

Control Panel

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

controlPanel

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.

bartAnimator

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.

movieTheater

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 Lachh 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.

Join my email list to get updates on new blog posts, tutorials, and more!

Having more subscribers helps me improve the content I deliver to you guys (and gals!)
I won't spam ya. Unsubscribe any time you want.

9 thoughts on “How I made my livestream’s Dynamic Overlay

  1. I found this by accident as I too run with a custom overlay using AS3, it’s such a great feeling!

    One thing I didn’t see mentioned here that can be a fun thing to do for giveaways is script a chat-controlled minigame.
    Ankhbot offers the potential to write to text files when a command is used allowing you to pass the input of selected contestants directly through to the overlay.

    Another good-but-bad thing is when things go completely wrong and chat capitalise on it haha. I have a cheer command that throws roses on the screen sort of like an audience at a stage production and when you get a couple of hundred being thrown per stream you very quickly realise when something has gone completely wrong.

    • Thanks for letting me know about Ankhbot! Chat interactivity already gives me a ton of ideas for the stream.

      Just checked out your channel: Damn, dude. All that gaming while standing and stomping?

      Huge props on maintaining a consistent schedule from all that physical work. And I thought animating was strenuous haha.

      • No problem, thanks for checking me out also, my reaction is pretty much the same to what you do frame-by-frame!
        Drives me nuts so I almost always resort to tweening or very quick 2-frame smears.

        But yeah Ankhbot has also allowed me to make a functioning subscription system via patreon and some additional use of Microsoft Excel combined with VBScript (basically importing my current list of subscribers from patreon, seeing how long they’ve been subscribed for, outputting a text file for that user if their subscription has ticked over another month and then whispering the contents of the text file to them when they enter the stream next).

        It’s such a powerful bot and I’m always excited to see what ideas myself and others come up with while using it.
        Looking forward to catching one of your streams soon 😀

  2. That helped me a lot ! I’d like to do it myself but one question.. how do you code ? I’m an animator but I’m not good at coding and I hope you help me .. anyway good luck with your animation”Basement Busk” and keep streaming

    • If you can do basic math, I think you can code. You should try out a free game called “Coding Combat”, it teaches the basics of scripting/coding very well. Try it out and see if you like it!

  3. Hi I’m really interested in how to do this, but you don’t mention how you actually fetch the song meta data etc, do you have an tutorials on how to actually get the song data etc into the animation? That’s the bit I’m stuck on.

    • Getting the song meta data is straight forward if you can code something that can read text files. Almost all Twitch Stream-Helper Applications provide a generated text file that is automatically updated with the current song information. In my case, I use Ankhbot now, which places this “currentsong.txt” file in My Documents folder. OBS even lets you display text on your stream directly from these text files. So you’d provide a path to OBS that would like similar to “My Documents/currentsong.txt”, and OBS will display “Darude – Sandstorm” or something.

Leave a Reply