One of the elements that sets streams apart, like YouTube channels or Podcasts, is production value1. Things donāt have to look or sound perfect, but the level of care impacts how people perceive the work that you make, regardless of the quality of the content.
Most of the time, like many streamers on Twitch, my audience is just meā¦ but during the Race Against Time, there are lots of folks watching, and I want it to look good šØāš³š
In terms of customizing your overlay, there is no shortage of ways you can do that: Streamlabs, StreamElements, Nerd Or Die and many, many other services can provide you with a complete overlay, alerts, and other widgets (often for free) that you can mix and match.
ā¦And Iām definitely no expert on how to make your stream look great, but I can tell you a tale of two overlays š
The Event Overlay
The main event, the 24h Chrono Trigger marathon, uses an overlay developed using NodeCG.2 NodeCG is a sort of toolkit that enables you to create broadcast graphicsā¦ but it doesnāt do too much āheavy liftingā. It allows you to create dashboards, graphics, cue sound effects and generally keep a bunch of different data in sync, but it does that via codeā¦ that you write.
Effectively, itās the really DIY route for making your own super-customizable HTML overlay! š
To put that into perspective, it means that I coded a variety of components that allowed the overlay to receive updates from myself, Twitch, Tiltify (the donation service), and whatever else I felt like cobbling together.
One of the screens for the main event
Although Iām fascinated with Desert Bus and how they handle their stream setup, using NodeCG was inspired by Support Classās Awesome Games Done Quick layout.3
Using NodeCG means you have ABSOLUTE POWER over how your different widgets look, and how they appearā¦ but it also means that youāre probably writing them from scratch (styling, receiving events, etc.) š¤·āāļø
The Weekly Stream Overlay
For that same Twitch channel, I do a weekly stream, and it has a different design heavily inspired by the user interface from Nier: Automata.
The āLoadingā screen
The main screen
By comparison, this layout is built using Streamlabs widgetsā¦ mostly. I had to provide some custom CSS and animations for the chat and typing effect, and the loading screen is a plain HTML and CSS combined in OBS.
Learnings
Is there a reason to take one approach over the other? Should you even bother writing your own widgets?!
For the latterāunless youāre a huge nerd, like meāitās probably not worth the effort of taking either approach. I mean, you get a ton of flexibility and can do so much cool stuff, but you could also invest all that time into the rest of your stream š
But if you do decide write your own widgets, there are some advantages.
- Writing your own widgets in Streamlabs makes it easy to iterate and test a new widgetāwith the caveat that custom HTML, CSS, and javascript arenāt exactly documented
- While you do have to write your own extensions to connect NodeCG to Twitch and other services, there are libraries to help with this
- You can create your own custom dashboard to put everything you want to see during a stream in one placeā¦ although this is now a lot easier in OBS via custom browser docks
- You can migrate the HTML and CSS into NodeCG if you decide to take that route
- You can learn a lot about server and web development š
In any case, the sky is the limit because itās all HTML, CSS, and Javascript!
Also, since the web continues to get better and more impressive, that means that with some programming knowledge, you can do even more impressive things. For example, if youāre into gaming, you might have heard of shaders. I donāt know a ton about shaders4 but I do know that a fragment shader can be applied to every pixel in an imageā¦ and since you can use shaders via WebGL, it means you can do all sorts of fancy things like this Gameboy Pixelizer! 5 6 š²
Anyway, I mostly wanted to show off some of the cool things you can do with HTML and CSS and Twitch streams!7
- Iāve never actually looked up what āproduction valueā means; Iāve just intuited it. Turns out it comes from the performing arts!ā©
- ā¦Technically, it was made using NodeCG, Preact, Parcel, NodeJS, and a variety of other small libraries š¤£ā©
- They used to have a video series explaining how it all worked, but it seems like those videos are no longer availableš¢ā©
- What little Iāve learned has been heavily inspired by Julia Evansā blog post and thinking about what I could do on stream.ā©
- Earlier this week Iād also come across this online Gameboy Camera example and I thought it was using WebGl tooā¦ but nope, just regular olā Javascript!ā©
- Also, through the use of OBS shader extensions and technologies like this tool which can convert GLSL shaders to HLSL shaders, you can even write shaders that you can just use in OBS!ā©
- I wanted to go more in-depth on NodeCG or the Race Against Time but I still need to collect my thoughts š ā©