In 2016, I deployed one of my more ambitious coding projects – “Gold Stream 2.0” – a livestream overlay designed to tantalize and interact with viewers while I broadcasted my drawing process.

It only took a few days to create the initial build, but it has taken 5 years of augmenting and polishing for me to declare it finished. I can say that the value it generated was well worth the thousands of coding and animation hours I invested maintaining the app. It has served me ever since I started animating professionally, and, with the support of kind viewers, has no doubt been essential to keeping my boat afloat.

This post will be a retrospective on the project, as well as my thoughts on long-term creative work and my plans for my stream overlay’s future.

Big Feature Timeline

Near the start of development, I used SourceTree (Git) for version control. It’s incredibly handy for tracking code changes, even for when it started as a one-man repository.

2016

Init commit on 20 Sep 2016
Early Version of Goldstream
Aug 2016
Dec 2016 – First XMAS Reskin

2017

The project didn’t receive many big features in 2017, since I was getting my coding fix from the FM3K project. I did get to add the head-bang/top-song system, which added a bit more fun and competition to the song request experience.

2018

In 2018, I was starting to get a substantial number of subscribers, so I wanted to spice up my “Subscriber Alert”. Subscriptions are a significant event in livestreams, so mine needed to outshine all the other fancy notifications I had already embedded in my overlay.

I opted for a full-screen pentagonal wipe and an animation that extended depending on how long the viewer was subscribed for.

The new alert was a big hit! I wanted to thank viewers while also making them feel special. To customize it further, I allowed viewers to submit a “custom subscribe song” that I could trigger whenever they subscribed. It was a lot of maintenance to slice and export all the different mp3’s, but it made every sub event feel exciting and fresh. As of right now, there are roughly 400 different songs that can be played during the alert.

I also introduced a crucial back-end piece – a GoldTicker that scraped my web data into neat text files. Relying on Flash to do HTTP requests was getting frustrating, so a simple NodeJS app really tidied up the tangling dependencies.

image.png
I used to have 5-6 different apps running just to get my overlay the right data.

3rd party apps continued to revamp their API’s, adding support for websockets and redemption data. These API changes often came in every couple months, breaking my code at times. But as time went on, my code became more independent. It felt good to get things connected to the source (Twitch API itself).

2019

By 2019, I finally learned how to scrape IRC data (chat), and decided to decouple myself from Lachhh’s Giveaway tool, which continues to serve as a huge inspiration for my overlay.

GiveawayMinigamesIntegration.png
It was a 2 in 1 feature – Minigames & Giveaways could be triggered separately, or in conjunction.
image.png
Originally called “Red Drake, Green Drake”, viewers could only advance when the dragon was sleeping. This was too hard for them though, since heavy stream-delay would result in much death.
Around this time, I started to receive volunteer art for the overlay, as my stream numbers rose. It was no longer just a way for me to show off my work, but for others to share their own.

Growing up, I really enjoyed customization. Binders, notebooks, LEGO builds, my video game character, everything. Using the default just won’t do. For the rest of 2019, I extended this mindset to the rest of the project – I want every interaction to be customized down to the individual viewer.

Livestream Overview & Interactions - Gildedguy
The practice of rapid requirement gathering and rendering quickly improves logo design skills.
Custom Icon/Alert Guidelines - Gildedguy
I greatly enjoy drawing others’ characters, especially as simple stick figures. Like tailoring a mannequin, the foundation is there – you only need to focus on style and personality.
[Simple looping GIFs] Anything that serves as mere decoration..
..can be turned into something more meaningful with code [Animated Metronome].

Every month I’d add 3-4 commits (updates) to the project. Something notable is that I rarely set out to refactor my code – 99% of the time I was adding something new. I think I chose to just clean as I went along. If I wanted to fancy up the Follow Alert, I’d slap on more code to accomplish that, and only make minor improvements related to the Follow Alert. If the Song Request feature was running slow, I’d just ignore it. Because this app was to be run by me, and me alone. Coding-wise, “Good enough” was law.

2020

At this point, the overlay felt fully featured – adding any more types of interactions would feel too bloated. This is a great place for a project to be in, because now I could focus on adding “more content”, similar to how a studio can just add DLC to their released game.

So 2020 was about polishing and filling up my folders with viewers’ custom icons, alerts, and sub songs.

I got to flex my game-dev muscles with a bunch more minigames too.

Twitch Plays Super Gilded Knight

2021 Today

Which brings us to this year, and today. There are now hundreds of pieces of user generated content for the overlay. I’ve got six varieties of minigame, and have shipped many prizes around za world! I was not expecting my stream to turn into a sort of live-gameshow/OC-sharing platform of sorts!

You can check out the final list of features here.

That being said, it’s time to say goodbye to this project. Adobe Flash Player has been unsupported for years now, and my computer struggles to process all the dynamic content during high-activity streams.

Tasks that used to take couple minutes (bug fixes and builds) now take over an hour, so code maintenance of the project is cumbersome. Plus, I think it’s just plain old time for a fresh coat of paint, for even dynamic content has its expiration date.

So I’ve been working hard to retire my overlay, and package it up for some of my fellow art streamers to customize & use it for themselves.

Maybe I’ll open source it someday, maybe not. If you’re curious, you can examine the user manual in the meantime.

Version 3.0 – GoldStream3D

Alongside animation, I don’t think I’ll ever stop coding. It’s just too satisfying to see your mathemajicks and logick compile into a working application.

Frankenstein's E. Coli: How an artificial protein rescues dying cells |  Lunatic Laboratories

My biggest dream involves game development, and part of training myself for that will be getting good at C# and Unity. The natural progression of GoldStream2.0 is to enter 3D.

I hope to carry over all that I learned from its predecessor. Tips for developing an ever-changing overlay:

  • Clean up as you code, refactor only when things break.
  • Live-test often – allow your work to break in front of the audience.
  • Notice which features viewers love to abuse – give them even more options.
  • Make features related to money fun, fair, and free.
  • Go the extra mile for features that will be shown hundreds of times.

Twitch.tv/Gildedguy

(◙◙)

2 thoughts on “How I FINISHED my livestream’s Dynamic Overlay

  1. I remember in 2016 when you helped me set up my own overlay with flash, then you followed me to test that it works! (I’m cadrivers15)

    It’s amazing to see how far it has advanced, looking forward to hey even seeing you stream the new overlay!

  2. cool to see the background work behind the years long progression! excited for the 3d stream layout 😀

Leave a Reply