(This post was originally written for my blog -- but seeing as I'm still setting up the actual blog, I'm posting it here for the time being. This is long!)

The Streamer Who Spread Her Wings ~Pixelated Wings~

While I announced my streaming hiatus on October 29th, I'd been planning it for almost two months. I realized I needed a break from streaming around the time I finished up my replay of the original Rhapsody: A Musical Adventure -- which was also the first game I ever streamed, way back in 2016. I was replaying it because I was excited to play Rhapsody II, the freshly-translated sequel, so I figured I'd call it when that game wrapped up.

I didn't realize at the time that my second-to-last stream before the break would be the one I'd feel the most pressure for in my entire streaming career, the one I worked on the hardest, and the culmination of an entire series of streams over the years -- also a fitting finale, in its own way.

To explain how, let's go on a trip down memory lane...

...and get Lost in the Rules!

Back in 2020-2022, I was deeply involved with a stream group called Jank Science Theater. JST was the title of our namesake show, but once we moved things onto our own channel, we expanded our lineup from there. At one point, I was involved in 3-4 shows per week on the channel (either as the streamer or as a co-host).

One of these shows had the ridiculous light novel nonsense title of "The Game Master Said They're Okay With Newcomers to the Game, But Then I Found Myself Lost In The Rules, and Now What Do I Do?!", which was usually shortened to "Lost in the Rules". This was our weekly show for board games, tabletop RPGs, and other (virtual versions of) physical games. Every other week, we would have a new session of our ongoing D&D 4e campaign. While I wasn't the streamer for it (at least at first), I was asked to make a layout for it, and I ended up with this:

While it would pale in comparison to some of my later layouts, I still like what I ended up with. On the bottom, you can tell who's playing who, what each player's and character's deal is, and a portrait so you can see who they are -- and this information is presented in a style befitting a D&D campaign, with everything on little scraps of parchment with a fancy fantasy-looking font. The rest of the screen is a bit more barebones -- a window capture of Roll20 (which we were playing in) and a Discord display of who's talking at the moment. Basic, but functional.

(As an aside: I know the "normal" way to do a tabletop stream is to just throw up a bunch of face cams. This wasn't an option for us, and I don't think I would've gone with it even if it was. Even though we're playing tabletop games, those tabletop games are vehicles for collaborative storytelling. If it comes down to a choice between immersing people in the game world or immersing people in the world of "sitting down and playing a tabletop game", I'll go with the former where I can.)

Variations on this layout would get used for other TTRPGs we did, usually with the fonts and/or backgrounds swapped out for something more thematically appropriate.

Let's get fancy!

So, not every game worked with this exact approach. There are a lot of simpler tabletop systems out there, and it wouldn'tve been worth configuring Roll20 for those. I could keep doing the same things with the bottom 1/3 or so of the stream, but I was faced with two new problems:

1. Our main way of sharing our game was as a Twitch stream. Twitch is a streaming video platform. I needed to do something with that upper 2/3 -- and preferably something related to the ongoing action so it's not completely static.

2. Despite being the streamer, I was specifically not the GM. (This was a deliberate choice we made for our D&D streams, so the audience wouldn't see things before the players did.) So while I wanted it to reflect the ongoing action, I didn't want to know what that ongoing action was ahead of time -- that'd spoil the game for me as a player, after all!

This first came up with "Into the Dracula-verse", a one-shot run using Risus: The Anything RPG. Risus is very rules-light and made for shenanigans, so it was a great choice of system for this kind of game. I ended up with two scenes. Here's the first one, used outside of combat:

There were three places for me to put pictures (left, middle, right), and a virtual dice roller (with sound effects and animations) laid on top of it. The pictures were set up so I could put anything there, and I told the GM to send me pictures when we got to the appropriate part of the game for them. It would mean a little work on my end while we're playing, but it helped illustrate what was going on, so it'd be a little more active.

The other layout, used for battle and inspired by the early Final Fantasy games, took things even further:

I didn't know how many enemies to expect (and wanted to leave room in case I came back to this layout for something else), so I left space for up to 9. And I put character info on the right, including current HP and their current stats. (Their stats go down as they take damage, and their HP is the total of their stats.) These values were all set manually (they're all just OBS text sources with the text specified in OBS), so it meant a bit more work while the game was going, but it conveyed the information it needed to convey and was a useful addition to the stream.

An Excel-lent Choice

So, I had a layout I could use for relatively rules-light systems, where I could just throw up whatever graphics I needed. I even had a way to display stats! But the text for the stats was manually entered in OBS. This worked well enough for Dracula-verse, where the stats only changed once per turn in combat, and not at all outside of it. But what if I wanted to show a stat that would be in constant flux throughout the game, to the point where it'd be hard to keep up with the numbers in OBS and play the game at the same time?

This was exactly the predicament I was in when we decided to run a game of Golden Sky Stories. Golden Sky Stories is a system for telling cute and cozy stories, and it has a stat called "Dreams" that everyone (GM and player alike) can award each other when the character does something cute or helps someone -- points for good roleplaying, basically. The game encourages you to give these out like candy, so you can use them between scenes to strengthen the emotional bonds between your characters (PC and NPC alike).

If I was just adjusting these the same way I adjusted the HP values for everyone in Dracula-verse, I wouldn't have time to play the game with all the adjusting I'd be doing! People suggested half measures I could take to make things easier -- like having people keep track of Dreams by themselves and just showing the totals on-stream at the end of each scene -- but I wanted to do this right.

Fortunately, OBS has a way to make this easier (though not fully automatic) -- instead of typing text in OBS, you can instead have it read the contents of a text file and display that in the same way. This meant I could have a separate, simpler tool to keep track of the numbers, and still keep them updated on the actual stream.

I tried writing something text-based in Python, but what I was putting together would've been a bit clumsy to use. So I resorted something that I knew I could make work effectively: Microsoft Excel with a handful of macros.

Now, I could just type in the number of Dreams someone has, or use the +/- buttons to add or subtract them. When the value changed, it would write it to a text file, which would be read by the OBS text source and shown on-stream. I'm sure using Excel macros at all is blasphemous to a lot of people, but it did what it needed to and it did it well, and let me track this info in real-time on stream while actually being able to play the game I was in.

(It was actually a little more involved than that. I had it show a number of icons up to a certain amount, and the icon and an x and a number if it's larger than that amount, and I used emoji for the icon so I had to install a special variant of the standard OBS text source that had color emoji support... but I digress. XD)

A Fresh Start

Eventually, Lost in the Rules (and Jank Science Theater in general) kinda fell by the wayside -- but I still wanted to stream tabletop RPGs every so often, because tabletop RPGs are neat! At the same time, there was no need to keep doing things the exact same way I always had over at Jank Science Theater -- I was streaming on my own channel instead, and there was no standard now -- so when I streamed Wanderhome a few months ago, it looked like this:

Visually, this is quite the departure from what I was doing back in my Jank Science Theater days! Wanderhome doesn't really have much "gameplay" in the traditional sense -- no dice rolls to speak of, only tokens that could be given or taken under certain circumstances. Based on that, I took what was originally the bottom 1/3 of the Lost in the Rules layout and expanded it to be the whole screen, replacing the static avatars with large PNGTubers representing our characters.

Behind the scenes, I was still using the same token counter I used for Golden Sky Stories, so in that regard it was still an evolution, not something entirely new.

It was also the first TTRPG stream that I had music for! I felt like the Lost in the Rules RPG streams were a little quiet, especially when we were trying to figure out what to do next, so I figured some background music would punch things up a little. In this case, I didn't sweat the details of it too much -- I just put on a playlist from Pretzel and called it a day -- but it definitely added to the whole experience.

In terms of presentation, I was really happy with the Wanderhome stream, and I still am. (Unfortunately, two of the players ended up dropping out a few minutes in due to Internet connectivity issues. We still saw the stream through, so that just means we'll have to have them back sometime!)

Biting off more than I can chew

So, even if you're into indie tabletop RPGs, the chances that you've heard of Princess Wing (at least before my stream, if you're reading this) are slim. Japanese tabletop RPGs are a niche even within the niche of TTRPGs that aren't D&D or Pathfinder. Some Japanese TTRPGs have official English translations -- the aforementioned Golden Sky Stories is one, for instance -- but a lot of TTRPGs that are well-known over there, like Sword World (the fantasy RPG from the creators of Record of Lodoss War, among other things), don't have any official localization.

Princess Wing itself doesn't seem to be one of the bigger Japanese TTRPGs, and it's only thanks to the efforts of fan translators that it's even known, let alone accessible, to people who don't speak Japanese. I probably wouldn'tve heard of it myself, if it wasn't for my friend Fel (who's been doing tabletop stuff with me since the JST days, mostly as a GM) getting into it.

He offered to run a game specifically for me, to help celebrate my 2nd HRTiversary. I jumped at the chance to play and stream this, especially because I've always wanted to do more TTRPG stuff on-stream.

And then I realized what I'd signed up for, and started low-key panicking.

I wasn't joking about how obscure this game is. There's very little information about the game in English -- to the point where I realized that my stream video would be the only English-language YouTube video about the game. This meant that my little one-off stream would be a lot of people's first introduction to the game, and the best way to see what it's like before actually playing. It would also be a lot of people's introduction to my streams. People would judge this little-known game based on my stream of it, and it might also be a lot of people's first introduction to my work.

That was a lot of pressure!

My first thought was genuinely "oh god, the fate of this game is in my hands now", until I took a step back and accepted that a) it probably wasn't, and b) even if it was, the fate of Princess Wing outside of Japan wasn't my burden to bear.

But it was still important to me to do justice to this game -- to make this the best and most polished TTRPG stream I could -- and that drive took up basically every moment of my free time for the next two and a half weeks.

Building the Stream

So, a week out from the stream, we scheduled the stream and were all trying to figure everything out for it. Fel had the pitch for the session worked out but not all the details. The rest of us were figuring out our characters. (GiantRobots had played the same character in a previous game, but wanted to tweak some things; meanwhile, claire and I were figuring out our characters basically from scratch.) And on top of that, I had a layout to make -- and I was putting a lot of pressure on myself to get it just right, whether that was justified or not.

The virtual tabletop we were running things on behind the scenes was PlayingCards.io. (Roll20's support for playing cards is limited, so this worked better.) The setup we used on there was simple -- each player's hand on the left (arranged from top to bottom), and the board for battle on the right. We were keeping track of HP and TP levels separately, and the text of any handouts was just given in the Discord group DM we were using for the game.

Under normal circumstances, I might've just put the virtual tabletop on the top of the stream, our avatars and HP/TP values on the bottom, and called it a day -- but these weren't normal circumstances in my mind. I would still include character information on the bottom, but I already decided to put their cards with them.

And on top of the virtual tabletop and PNGTubers? Since the game has handouts, I absolutely wanted to display them onscreen, too. I thought of showing what everyone could do at any particular moment based on what cards were in their hand, but that would've made the screen so cluttered it'd be impossible to follow along. I was already scaling my plans back a bit when I put together my first draft of the layout (with placeholder characters), and...

Hoy. That was still too much onscreen at once. The two left handout panes (the ones labeled "Handout (Common)" and "Scenario Clear Conditions") needed to go, and the one on the right still had too much text in it -- so much that it would be overwhelming, and at a font size so small that it'd be hard to read at lower resolutions. I figured that I could put about a paragraph of text on-screen at the most -- any more than that would be pushing it.

Other than that, this was a solid foundation to work with. With that was in place, I could move onto everything else -- adding more features I can swap in and out, making it prettier, and making it all functional (using Microsoft Excel once again). Here's a list of everything else I did and how I accomplished it:

Make it prettier and easier to read

This one was simple enough. I just ended up making the windows darker and giving them rounded borders. (The window backgrounds are just OBS color sources, but OBS-ShaderFilter handled the rest for me.)

Add a "Scenario Tags" window

There was a great little space for it, right in the middle between the GM window and the handout window. Implementation for this was pretty straightforward -- I used the same tricks I used for Excel in my previous streams, just having it put together text from a few lines instead of just one.

(In hindsight, I wish I'd either made a 2nd window for mysteries or formatted it differently to include both the mystery we're investigating and the associated scenario tag once we got it, to make following along with what was going on in the investigation section a bit more straightforward. I'll definitely keep it in mind if I stream this game again!)

Make the handout window as modular as possible

Oh, this one was a whole journey.

I started off with what I had in the first draft of the design -- a big window with a bunch of text. Then I realized it would be useful to show an image alongside the text sometimes, so I made a 2nd version of the handout window with an image and some text.

It used an image source (with a bounding box) and two text sources -- one for the title and one for the text. I could easily automate these with my Excel macros, but I still had two problems. First, there were now two separate info boxes (one with an image and one without), and I'd have to remember which one to bring out at any given time. Second, it would look a lot better if the text wrapped around the image. This isn't something that OBS text sources can handle -- they're meant for small bits of text, not for complex word processing.

Overall, it worked -- but I could do better.

I could make something completely unhinged.

I could make a Microsoft Excel macro that would combine multiple fields into an HTML file that it exports and is read by an OBS browser source which is refreshed when the handout window pops out.

I feel like I'm in absolute galaxy brain territory here, but it did what I wanted it to do. Plus, I built it so I could put in the text of multiple handouts into the Excel sheet at once -- and copy-paste information in pretty quick -- and select which one's currently displayed.

My Excel sheet would look at the handout it's currently set to, and:

1. If there's both text and an image, it would generate an HTML file with the image to the left (scaled to a reasonable size) and the text next to it, wrapped around the image.

2. If there's text, but no image, it would generate an HTML file of just the text with no image.

3. If there's an image, but no text, it would generate an HTML file of just the image, centered, sized to fit the entire info box.

#2 and #3 were shown on-stream. If #1 showed up, it would've looked like this...

...but I forgot to show this handout at the beginning of the stream. Ack! ^^;

There was one other bit of awkwardness with the setup I ended up with. I didn't mind that the body of the handout would only refresh when the window was pulled out and back in -- I'd want to do that anyway -- but this only applied to the body of the window, not to the window title (which was still a standard text source and would refresh as soon as it changed). So it did what I needed to, but I had to be careful with it during a live broadcast that I was also trying to participate in as a player.

Make the whole thing modular, so I can slide things in and out instead of having separate scenes!

This one looked slick and sounded harder than it was. The biggest thing I had to do was to organize things so each window was in a group -- have the scenario tags as one group, have the handout as one group, etc. Then I could just turn each group on and off with a single click. OBS would handle the sliding animation for me -- I just had to configure each group to slide in from (and out to) the appropriate side, and add a transparent color source to the group bridging the gap to the edge of the screen (to make sure it would come in and out from there).

Add HP and TP bars

Gosh, I wonder what tool I could've used for this. If only I had some program designed to work with numbers that could visualize that data...

That's right, these were just data bars in Microsoft Excel. Everyone's current and max HP and TP had to be entered in there so it could be thrown up on the layout anyway, so I just had the Excel sheet render these as data bars, captured that, keyed out the white background so the empty part of the bar would show up as transparent, and put the curved border around it (the same way I did around the other windows onstream).

The little flash effect that happened whenever someone took/healed from damage was completely accidental, but I strived to keep it once I found it -- it was a nice little effect!

(That said, there were two limitations I ran into here:

First, I wanted to either have it change colors from green to yellow or red as the number goes down or show a gradient that reflects that similarly (without ruining the above-mentioned little flash effect), but neither of those were possible without some of the most ridiculous, kludgy nonsense I've ever seen in Excel, even compared to what I'm making it do.

Second, the HP and TP numbers above the bars were still standard OBS text sources, read from the text files that my Excel sheet was writing. This was necessary due to limitations in Excel -- the data bar had to be based on a value written in the same cell as the bar itself, so I could've had current HP/TP there, but not max HP/TP. Since OBS only refreshes text sources once every second or two, this means that the numbers lagged behind the actual graph a little bit.

Still, what I had worked well enough, so I just kept it.)

Add PNGTubers, including separate transformed ones

PNGTubers were old hat for me at this point -- I used them in the Wanderhome stream and several non-tabletop streams, and if Lost in the Rules had gone on much longer, I would've switched to using them for that, too.

If anyone's wondering how I made them, I based mine on this CSS customizer -- make an OBS browser source with the Discord StreamKit pointed to your channel and use put in the CSS code this form generates instead. This let me have separate PNGTubers for each speaker (unlike Veadotube), let me switch between 2 PNGTubers for the same user (see below) and let me set up the custom images well in advance (unlike, as far as I can tell, Fugi's Reactive).

Having 2 PNGTubers for someone isn't really different from having one with this particular setup -- I just set the PNGTuber up twice with different images. I switched between them the same way I switched windows in and out (as previously described), and I decided to pair the transformed PNGTuber with the battle info to make the changeover a bit cleaner.

Figure out music

This one wasn't difficult, but it was a bit time-consuming. But this was one of the rare cases where I could get elaborate with my music choices for a tabletop game, so I decided to. A session of Princess Wing made to mimic an episode of Sailor Moon or PreCure, and is formulaic in the same way those are. That meant that, even if I didn't know the details, I knew the general gist of how the episode's story would go -- and that meant I could figure out a playlist of video game music that would work with every part of the scenario.

(I specifically went with video game music because it seemed like it had a slimmer chance of getting DMCA'd, especially on a video game streaming site like Twitch.)

The only thing that went wrong here is that I didn't really have a good grasp on how long each section would be and how much music I actually needed. This meant that I was seriously overprepared for the music in most sections (except for battle, where I didn't have enough music and ended up putting in more music for the edited version)! Again, I have a better grasp on this now that I've actually played the game, so I know better for the next time I do something with this system (whether it's on-stream or off).

There's not much else to say about this one, really!

It's Showtime!

The stream happened! Not much to say about it, since things went off more-or-less as planned. If you somehow read all this without seeing the stream, you can watch it here:

But, of course, what you're seeing there isn't the stream as it was originally broadcast, not exactly. Instead, what you're looking at there is the edited version.

The editing took at least as long as putting the layout together, but compared to that, there's less to talk about there. It was important to me to have a properly edited version of this, for the same reasons it was to have a good layout.

There were a few snags I hit along the way. Some of the neat little touches I had for the stream itself came back to haunt me in the edit. The way that Hibiki's profile portrait overlapped slightly with the handout window was one, because it meant I couldn't easily just splice in another handout window without cutting off part of Hibiki's portrait in the process. The other thing that ended up being an issue was the little bouncing effect when someone starts talking. If someone's microphone picked up a little background noise right before someone started speaking (or if I wanted to cut off the beginning of what someone was saying because they were stammering a bit), I had to preserve that bounce, to keep it all looking consistent. This limited the edits I could do -- at least if I wanted to get this edit out with a reasonable amount of time and effort put in.

The only other thing really worth noting here is that the YouTube video has proper, edited captions. I really appreciate it when YouTube videos have this! (I'm not even hard of hearing myself or trying to listen to videos in a second language, but I still find it useful.) Once I had the edit done, I ended up running the audio of the voices only (no music or anything else) through an open source, self-hosted voice recognition tool -- specifically whisper.cpp -- and then had it output as an .srt subtitle file, which I then edited over the course of two evenings. It wasn't perfect, but it was a good starting point to work from.

Don't Do What Donna Don't Does

Some select messages from my DMs around the time I was working on this:

I've just been getting home, working on stream stuff, and going to bed"

"I feel like I'm veering towards the second half of 'if you don't schedule time for maintenance, your equipment will schedule it for you'"

"I am just... tired and broken and not okay

So, to remind everyone, everything I did in the "Building the Stream" section was done in about a week. While figuring out my character. And working a day job with a lengthy commute. And maintaining my relationships. And dealing with a week that -- for reasons I'm not going into here -- was rough in a lot of ways.

I was constantly shortchanging myself on sleep, and neglecting chores and my own self-care, just so I could get a little more work done on this. I focused on it single-mindedly, to the exclusion of a lot of other things -- to, frankly, the exclusion of my own health and well-being.

I'm proud of what I've put together here. I'm not at all proud of what I did to myself in the process. Don't do what I did, please. Take care of yourself, and of your own health, physical and mental. Being worn out just makes it harder to do your best work.

Looking Towards the Future

In putting this together, I ended up stretching my setup to its limits. Part of this you can just tell from some of the issues I was working around during setup. On top of that, I was thinking about the kind of things I'd theoretically do to bring this to the next level, and what came to mind were things like animations (a pen writing down the scenario tags we found in a notebook) and sound effects (pen on paper above, impact sounds when someone's hit, a "ping!" when it's someone else's turn in combat) -- things that my current tooling can't handle at all.

Normally, when I throw a ton of effort into something like this, I figure that I'll reuse a lot of the work for another thing down the line. In hindsight, that might not be the case here. If I want to keep building up my tabletop streams and making them better, then I need to graduate from the very string-and-duct-tape setup I've been using and move to something more purpose-built.

I mentioned earlier that I'm currently on a streaming hiatus. Part of the reason for this is that I want to renovate huge parts of my stream. There are things I want to change that will make the stream look different, and things that are only visible behind-the-scenes that solve other longstanding issues or just make setup faster.

So while I haven't dug into exactly what I'll use yet, my plan is to build a tool that makes more elaborate elements to display on-stream. Whether that's just little programs written in Pygame or Godot or something that I modify as needed for each stream or something more modular, I'm not sure yet.

What I am sure of is that the other reason I'm taking a break from streaming is just that I'm tired and need one.

Good night, friends.