Thread by @ChrisHanel

Alright, it's once again time for our traditional deep dive into the #AGDQ2023 broadcast graphics! MASSIVE THREAD COMMENCING

Before I get going, I wanna start off by crediting all the devs on the @SupportClass team, including @Dillon_Pentz, @MeSoSupe, @0xSeldszar, @hoishinxii, our newest developer, Melanie Arnold (who is wiser than all of us by not being on Twitter!)

This is our third mainline GDQ event using Pratchett, our current-gen graphics system. With that level of maturity in the code base, we had the opportunity to try some things we've wanted to do for a LONG time.

A lot of our focus this event was the break screen. The natural flow of a GDQ event means it gets a *lot* of screen time. In the 8(!) years we've been building layouts, this has been an ongoing design challenge to tackle.

The break screen needs to be informative and engaging, letting you know what's coming up as well as what incentives/prizes are still open. But this is the first event where we were really invested in making it *interactive* beyond the virtual crowd and donation/sub alerts.

The first big project was the Channel Points prediction games. I've always been a fan of channels like Twitch Plays Pokemon, SaltyBet, FTTBattlegrounds, and others that make watching a stream an active experience. This serves as a great way to entertain everyone during setups.

We made a collection of retro games capable of AI vs. AI play (natively or with a bit of code help) and built a system to automate the entire experience with the help and expertise of @TheOmnigamer, who handled everything on the gameplay side.

We have multiple titles to choose from, and techs can choose one based on the amount of time we have until we need to move on to the next segment, since some games naturally take longer to resolve on average. (Bad News Baseball remains my favorite from the collection.)

We plan to try and do more of these, as well as add it to the GDQ Hotfix break screen- so you should get a lot more opportunities to collect channel points going forward!

The next big feature is our donation display. It's not exactly a secret that one of our primary objectives is to help drive donations, and make the act of donating more special for viewers.

We already do this in a LOT of ways, large and small- years ago we went from updating the donation total once a minute to happening completely in realtime. We're also a lot better about communicating incentives and prizes, and have small popups for every individual contribution.

However, one thing that's always felt like a missed opportunity is the donation total on the break screen. It's the most important metric we have, but it was just kind of... there?

When I first did the mockups for Pratchett's break screen, I randomly sketched up the donation total being paired with a wagon from Oregon Trail, just inching along with every donation. It didn't end up in the initial release, but the idea was still there.

So, for a couple events, the donation total just looked like this, and it bugged me. A lot.

So for #AGDQ2023, we revisited the concept and came up with a long list of ideas that we could realistically make. We started with about 20 ideas, but 4 made the final cut and got in the final package: Oregon Trail, MGS3, Monkey Island, and Desert Bus.

The goal with each was to feature behavior that responded to donations. Snake climbs more with every dollar. The wagon moves west and crosses rivers at every 10k milestone. Bugs splat on the Desert Bus windshield. Stan and Guybrush see shooting stars.

On top of that, we wrapped it all in the motif of being different channels that could be changed. There's a cooldown timer to prevent frequent changes, but any viewer can change what's shown for 20k channel points. So far, it's been pretty reliably done when the timer's up.

(Guybrush and Stan also have some random dialogue, and will also react to particularly large donations when they happen. I haven't managed to catch many of these on stream, though. Might have to play with the frequency on those.)

Of course, we didn't leave everything up to chance...

So, about this. @Dillon_Pentz and I were spending a lot of time thinking of potential dialog/gags, but I kept thinking about trying to expand the idea of what Stan and Guybrush could be reacting to beyond donations.

GDQ has a storied history of Snake Eater being sung during the event. There's also an OCremix edition of the song that's in the break screen rotation.

Hrm.

Our first idea: if that song played, and Stan and Guybrush were visible, they would sing along. However, we couldn't guarantee sync- the overlays are only told that a new song is playing, it doesn't know where it is in the playback.

Additionally, while I was writing the dialog/singing, I knew I wanted to do more than just provide text strings with durations/pause timings, I wanted to change the size as well as have some lines spelled out.

So what's ACTUALLY happening: instead of rendering HTML, we swap in a video that contains all the dialogue rendered and the song itself. We then override the "Now Playing" graphic at the bottom to show that Snake Eater is playing as if it's a part of the rotation.

And yes, it's true: Most of the tech crew had no idea what was about to happen. They were given a big button, told to press it at the correct time, and to trust us that it would be entertaining.

https://twitter.com/musicaldaredevl/status/1613763214659002368

NOW-- all of that has been a huge success and everyone's loved this new feature, but we still wanna do more. Also, this is a pretty self contained feature, and exists in its own little sandbox with lots of modular things swapped in and out.

Thus, it's our goal to make this part of the presentation open to community contribution. Not just shouting ideas at us that we try and implement -- we provide a repo with rules and all the necessary hooks, you submit a PR, and approved concepts make the actual broadcast.

This is a VERY new idea that we're really excited about. Please stay tuned for more info on this, we should have links and guidelines extremely soon!

Moving onto gameplay layouts now. Our game info box: No more fading elements, everything's on screen at once. Cleaner execution. I like it. Still remains hard to make it work responsively on every possible configuration, but it's doing alright!

For the Spyro 2v2 Lockout Bingo race, we built a new module for displaying a Bingosync board that fit our presentation and added score displays. @MeSoSupe did a great job of untangling some very old code we still had and cleaning it up.

The last big thing I wanna talk about is the trackers we made for the Metroid Prime 1+2 Co-Op Randomizer run, because this was the first time we've been able to do something different with our workflow.

https://twitter.com/Dillon_Pentz/status/1613991620210458626

In a previous GDQ graphics breakdown (almost exactly a year ago), I mentioned the frustration with the lack of support for our time of motion graphics work. I won't dive too far back into it, but you can read it here:

https://twitter.com/ChrisHanel/status/1482120620577939459

Well, for these trackers, we finally got to use @rive_app, which allowed me to build all the animation states and transitions myself, each with their own timeline, all the logic handled internally, and it renders in the browser. Marvelous.

Rive still has a couple key features coming (looking at you, text rendering), but I am pretty sure this is going to be a workflow I use a lot more going forward.

This is not an ad. I've just wanted this kind of application support for a LONG LONG time.

I will spare you a more in-depth breakdown of how @rive_app worked for us, because I know @Dillon_Pentz wants to get into that himself from an engineering perspective. I will link that thread here when he posts it

Well, I will share one thing: One quirk meant we had to fake mouse clicking events in order to trigger some behavior. Got the job done.

Going to take a break for a bit and then will start answering questions!

In the meantime, thank you everyone for your continued support of GDQ and the excitement that we get to experience every time we release a new feature. This continues to be some of our favorite work!

https://twitter.com/jessegamble/status/1614015052037906432

All of this is managed by our tracker system, which knows when prizes are available based on the schedule. Nothing has to be toggled manually, which THANK GOD

Yeah, this was noticed by us as well as being visually confusing, and we're gonna move those nameplates away from the cameras in the future

https://twitter.com/BrosirisLIVE/status/1614015379256352770

This is a design discussion that could be an even longer thread, but the current package doesn't have a consistent place for hosts that feels right. We're fixing so that going forward they always have a place on screen regardless of number of commentators

https://twitter.com/fleischie28/status/1614016826064932864

Color blindness and other visual clarity comes up a lot! Always a difficult balance when trying to prioritize the legibility of gameplay while also showcasing a firehose of information, and always trying to do better.

https://twitter.com/civildisstream/status/1614014083619246080

For example: The highlight color of nameplate pronouns ended up being way too bright of a color, and the lack of contrast made them too hard to read. We darkened it a couple days into the event

Pratchett is built using NodeCG (nodecg.dev), which handles both rendering the graphics as well as the control panels, server data, and connecting with external data sources. More studios should use open source solutions like these!

https://twitter.com/DJBrohawk/status/1614012540991819798

This really just comes down to what bandwidth we have and how we prioritize where our dev time goes. We can definitely get more fancy with stuff like the schedule - and we want to - but haven't found the right idea + the free time to implement it

https://twitter.com/DijitalAnimal/status/1614014201424678912