Is Godot *the* tool for overlays?

So, I’ve been broadcasting for the past four years. Not regularily, but often. One thing, that I struggled with from the beginning was the overlays.

At first, I was using Java with javax.Swing and luma-keying the black background out in OBS. This worked but was kinda unstable and not really smooth. Swing is not made for realtime graphics, especially not at the Full-HD scale and it was lagging a lot. Even with these issues, I’ve still managed to deploy it for two broadcasts (one and two) and it worked pefectly.

On stream, this looks really nice, as all the graphics change colors in-sync. This is done using multiple windows with StarshipTools, as you can see below:

You can see a few remnants from previous iterations, like the event bar at the top, which essentially does nothing in the final release, as it was half-baked at the time of the broadcast and after it, there was no need to finish it.

All of this was for the IFT-1 launch. After Starship launched, it took half a year until the next launch and one and a half years until the next broadcast.

The next broadcast (IFT-5) was broadcasted on iQLANDIA’s channel with Martin Gembec and it was a lot of fun doing live, but as for the technology, it was primitive and rudimentary.

I’ve written a simple application, that hosts a webserver, where a simple frontend is hosted. This can be added to OBS using a Browser source and works allright, but I’m really bad with writing HTML and basically unable to do anything cooler than a simple text overlay in HTML.

The same overlay was used for the broadcast of Flight 7. But here, everything changes.

First, I’ve acquired a greenscreen. I’ve been thinking about this for a long time and this time, I felt it was time to transfer to greenscreen production. Looking back, I should’ve hung it in landscape as I didn’t have that much space around me. But primarily, I’ve (for the first time) used Godot for something broadcast-related.

I’ve been inspired by NasaSpaceFlight’s weather forecast (Ryan the weather man 🌤) so I made my own. It took me about two days to finish this project (for reference, previous projects took me usually more than a week), and it was really smooth in the transitions.

This was the last broadcast I made as of writing this post. But this doesn’t stop me from leaking, what’s coming. It’s public anyway so it doesn’t matter and you wouldn’t steal my ideas, right?

For an upcoming stream with iQLANDIA, I’ve made an app in Godot, which really underpins the advantage of Godot for broadcast development.

It’s a simple app, which basically monitors a selected YouTube chat and if a message comes in, that contains only a number (like “1”, “2”, “3” or “4”), it adds it to an internal counter and updates a graph. It also has an editor mode, question handling and really nice animated transitions.

Also a big thing for me, developing these tools: TRANSPARENCY. Let me explain.

Using javax.Swing had one big issue. The background had to be removed in OBS as javax.Swing doesn’t work with transparent backgrounds (at least I couldn’t find how).

This was somehow solved by the move to HTML, which supports transparency in OBS, but that had other issues:

1. I’m bad at writing HTML
2. I’m bad at writing CSS
3. That’s it, I’m just bad at webdesign

So what is the solution? Godot’s UI system. You can set Godot to transparent background and the UI system is really intuitive to develop in, it runs on C#, so you can do really anything in there and generally, it just works.

So that’s it, that’s how I do my stuff. Thanks for reading until the end, sorry for any spelling/grammar mistakes and have a nice day 👋

UPDATE (16.3.): Small reminder for anyone trying to use my stuff for commercial/non-commercial usecases. Please read the README.MD file of the project before using. There are some rules to keep in mind while running this software in production/development environment.