How to Stream Your TTRPG Show

Megan Tolentino
Tabletop Micdrop
Published in
13 min readMar 3, 2020

When we decided to start streaming shows for The Redacted Files a year ago, I was nervous. Sure we know a lot about audio with five years of podcasting, but streaming and working with video was completely new. Most guides I found were written for streaming Video Game RPGS, which don’t have the same requirements as a TTRPG, especially since our players are from all across America and Canada. So here is what I do to stream. A lot of this is hacky, but it’s a workflow that works for me! Plus it’s all free!*

*I do pay for two things, but they’re not required for streaming.

Part 1: Overlays

The first thing we are going to do is create an overlay for our stream. I suppose this isn’t necessary, but it makes your stream look pretty and professional, allows you to share information, and makes you stand out a bit. I make all of my overlays in Powerpoint. This is because it’s easy, I get it for free through work, and I understand how it works. I do have PhotoShop, but I don’t understand it well enough to make it work for me. However, any photo editing software is probably going to work. (I know Powerpoint isn’t intended to be for photo editing. It’s still what I use.)

Tools I Use: PowerPoint, Images from Online

You can set this up however you want. I usually find art on UnSplash that is related to the game we’re running. Make sure you have the rights to the art that you use! It should be displayed on the site or on the image, just look for licensing information. I have started making overlays that have a transparent section in them so that the overlay is the top layer. This means everyone’s video will be the same size, even if the capture of the video isn’t the same.

Once you’ve decided on a picture, put it in Powerpoint and resize it to be the same size as a slide (or more accurately 1920x1080 pixels to match Twitch exactly). Then decide on the placement of your videos. Important things to remember: You might have a lot of information to show on your screen. Decide what’s actually important. When we stream Gold Wings, Black Skies I have two overlays, one for combat and one for when we’re just roleplaying because the maneuver chart takes up a lot of space. Things like closed captions also take up space. Or if you want to display Roll20, the Twitch chatbox, current HP, all of this is taking up your real estate. Play around with format and dump anything that isn’t important.

For videos, I’m a traditionalist and I like rectangles for the shape. I make a box about the size that I want the video to be and color it some color that doesn’t match any other colors in the image. I also add the title of the stream and any other pieces that aren’t going to intersect with the final transparent area.

A screenshot of powerpoint showing a slide with a starry background and four orange rectangles.

Then I select everything and go to Arrange->Group. Once they’re grouped you can right click on the grouped images and save it as a picture.

A screenshot showing a slide with a starry background & orange rectangles. All the elements are selected to be grouped
A screenshot showing a slide with a starry background and four orange rectangles. It shows the menu where you save as picture

Load the new, new picture back into Powerpoint. Click on it and go to the Picture Format Tab. Click on Color->Set Transparent Color. Then select one of the boxes you added to the image. The areas where they were will become transparent.

A screenshot showing a slide with a starry background and four orange rectangles with a menu to show how to change colors

Now you can add anything that is going to appear over the video feeds. I usually let some of the name overlap. I’ve also added flares to corners sometimes. This is also where you would want to add any frames that are going to be intersecting with the videos.

For names, I add another shape, and select a good transparency that will make any font I use stand out. I add information for each feed like Player Name, Character Name, Player Pronouns, Character Pronouns, Twitter Handles. Add whatever is appropriate for you. Make sure your font is readable, especially when smaller.

A screenshot of powerpoint showing a slide with a starry background & the 4 orange rectangles have been replaced

Once you’re done you can select all, group the images, and save as a picture again. And you have an overlay!

The overlay has a title and twitter handle. Four white rectangles line the sides with a name, pronouns, and handle under each

Part 2: Setting Up Your OBS

Next we have to set up an OBS (Open Broadcaster Software) to create your video and broadcast it to Twitch. There’s a lot of options out there, but I use StreamLabs. It has a lot of integration into Twitch that makes things easy, and the first time I used OBS I got frustrated.

Tools I Use: StreamLabs, Twitch

StreamLabs has you login with a social media account, I sign in with my Twitch account. You do have to give some permissions over to allow StreamLabs to send the video to Twitch.

My StreamLabs is already set up, but I’ll guide you through the important parts! Scenes are your different views to display. I try to make one for when we want to take a break, and one for showing everyone. This is where the overlays from above come up! If you want to have one scene for narrative parts of the story and one for combat, that will allow you to have focus on your players when not needing to pay attention to something else on screen. It does require a bit more management on your end to switch between scenes. I also tend to keep a scene for each show we’re streaming, that way I don’t have to rebuild each time. How you manage this is really up to you, whatever works with your system.

Screenshot of the layout of StreamLabs. The Scenes section is highlighted with a red rectangle.

Sources is where you manage anything that is going to be going into the stream. These sources are available in any stream. So the first thing I want to add is an overlay. The overlay is going to remain at the top for the most part, so I need to keep it at the top of the sources list. To do this we hit the + button above Sources, and get an option for all of the types of sources available.

A screenshot of the types of sources you can choose to insert into StreamLabs.

We can choose to add our overlay by selecting Image. From there we can choose an existing source — which is any image we’ve added before, or select the toggle at the bottom to add a new image. You name the image first (I frequently forget this step so a lot of my sources are named things like Image(1). You can rename it later, but it’s best to name it now to save time) and then are able to select the one you want to add from your computer like any standard file upload. You then make sure your picture covers the black rectangle, and then at the bottom click on the lock sign to lock the image in place. This will prevent you from accidentally moving the overlay around while rearranging everything else.

Part 3: Adding your audio and video

Now that your OBS is ready to go, time to add your audio and video. This is the single most frustrating step involved.

Tools I Use: StreamLabs, Twitch, Zoom

First off, I lied at the beginning. Zoom costs money unless you don’t need a lot of features. However, you can use Skype or Hangouts following these steps just as easily. However, Zoom has some great features, like being able to record audio and video of your calls- you can even have everyone on their own track. We use this as a backup for TRF, and it’s pretty useful!

With that out of the way, the way to capture video to an OBS is to use Window Capture. This lets you pick one program running on your computer and stream what is showing on it at any given moment on the OBS. If the window changes sizes, that will cause you problems. If the order of people showing up changes, that will cause problems. Be mindful of your source at all times. First set Zoom to show all of the videos at once, this is the Gallery View.

You add the Window Capture similar to how we added the overlay. Add a source, and select Window Capture->New Source. This will show your entire Zoom Window, which is not what we want.

Screen shot of the sources pop up with Window Capture selected.

**Edit: My original instructions here were the most difficult way to accomplish this task, and BBWolfeVox and MRaichelson let me know about this much easier method. Thank you!

To crop the video, select it so source is outlined by green lines, and hold down ALT key as you drag these edges to resize the window capture to just include the feed that you want.

Screenshot showing full zoom window and then a cropped one.

Once you have it cropped, you start again with adding a new window capture to get the next person’s video. Don’t do this until everyone has shown up for the call. Zoom will resize and move the video feeds as people appear and disappear and there’s no point in doing all of that work, just to have to start over. Similarly, if you want the chat open during the call, do it before applying the cropping filters. This is also how you would add Roll20 to your stream.

You can select the video feeds either by clicking on them, or by clicking on their name in the source list. Center them as needed in the correct frame. Remember, sources at the top of the list are on the top layer of the stream

Gif showing the cropped feed being moved into the correct position, & the order of layers being changed

If you want to add additional features to your stream, like subscribers or the chatbox, StreamLabs makes it easy to add those as sources as well, just add a source as normal and look to the right where the widgets are. Here I’ve added the chatbox, which currently is transparent. You can change the appearance by clicking on the chatbox in sources, then clicking on the gear directly above.

Screenshot of the scene that is being built with a selected empty space which is where the chatbox will appear.
Screenshot of the options you can choose to change the appearance of the chatbox.

Part 4: Adding Closed Captioning

Accessibility is something we’re always trying to improve at on TRF, and this includes recently adding closed captioning to our feeds. Our CC is live and definitely not perfect, but we think it’s a great way to work on making our streams open to everyone!

Tools I Use: Streamlabs, Webcaptioner

My instructions are based on this guide. For more detailed instructions, best practices, and troubleshooting help, please check it out!

Have every member of your stream go to https://webcaptioner.com. Click on one of the buttons that says ‘Start Captioning.’ You will need to be using Chrome. You will be taken to a big empty screen like this:

A screenshot of the Web captioner, which is a black screen with a start captioning in the bottom right corner.

Hit start captioning to have it start transcribing what you say. Make sure it’s working and associated with the correct mic! You might need to give your mic permissions.

A screenshot of the Web captioner, which is a black screen with text that reads “Hello this is Megan” now

Once you can see your transcript click on the person icon in the bottom right corner, go to settings.

A screenshot of the Web captioner, which is a black screen. Clicking on the account button opens a menu that shows Settings.

In settings click on the experiment option in the sidebar and search for ‘share’ to add. If the experiments option doesn’t appear, click on the other tabs until it does appear.

A screenshot of the Web captioner settings, the Experiment tab is selected, showing a search box.
A screenshot of the Web captioner settings, the Experiment tab is selected, showing a search box and the result of share.

While here, go to appearance and set the font size to 3.

Now close settings and click on the little radio tower next to the stop captioning button and you will get a button to make a link. You will want a random link (unless you can manage one of the custom links)

A screenshot of the Web captioner settings

Get the link from each player each time you start streaming. Everyone will need to leave the browser open until you are done recording. It will record anything you say, so everyone will want to mute their mic, not Zoom, when they don’t want to be heard.

You will add the captioning link from each player by clicking on sources, then selecting Browser Source. You can manage the appearance by selecting the source from the list, and then selecting Settings.

Part 5: Going Live

Now you’re all set up, it’s time to go live!

Tools I Use: Streamlabs, Twitch, Buffer

If possible I would test this a with another Twitch account that doesn’t have followers, making sure that everything looks and sounds ok! All you really need to do is click the Go Live! button at the bottom of the page. There is a pop up to select the game and other information you want to be included. I recommend having the name of the game you’re playing first, and then other details. You can also link your twitter account tweet as you go live!

Screenshot of StreamLabs showing the go live options, including an area to write a tweet that will be sent when you go live

Since I usually manage social media, I also use Buffer to schedule tweets that will be sent soon after our planned start point. There’s a few drawbacks to this, mostly that if you are late or delayed, the tweet won’t be accurate. Since I have a few accounts that I usually want to tweet from, I can schedule my tweets earlier in the day with any extra details, instead of last minute while I’m also setting up everything else. This is one thing that really helped reduce my stress!

While you’re live, you can keep an eye on the chat from the StreamLabs console, as well as manage your scenes. Remember that the stream is on a delay, so viewers will be responding on a delay. If you have a lot of people in chat you should probably find someone to help you moderate so that you don’t have to split attention from the game.

One thing to note that I have messed up on! You can’t remove the internal microphone source (Mic/Aux), so if you are on a break, the host’s audio will still be transmitted. You can mute it in the console, but remember to unmute when you come back! Your players will still be able to hear you as normally, but the stream will not.

Part 6: Post Game Work

If you don’t want to do anything after your game, then you’re done! Hit the stop button and go on with your life! However if you want to do any post-broadcast editing or to upload it to YouTube, here’s what I do.

Tools I Use: Twitch, OpenShot Video Editor, YouTube, Audacity

Download the Video first! You can do this from the Twitch website under video producer. You can also delete other videos from here. They stay up for two weeks, so make sure to grab it before then. If you don’t manage to do so, you can always use your Zoom recording instead. It won’t be pretty, but it’s there!

A screenshot of the Twitch Video Producer tab. It shows two recently recorded shows.

Next, does it need editing work? You can trim chatter at the beginning of the stream or bio breaks using something like OpenShotVideo Editor. This tool works pretty well, but be aware that re-exporting any videos is going to take forever.

If you need to clean up the audio, you can drop the mp4 into Audacity, a free audio editing software. Don’t delete anything, because your video and audio will be out of sync, but you can run Noise Reduction on the audio to get rid of things like static or hums. Then drag the new audio track back into OpenShot and delete or mute the original track.

YouTube makes uploading very easy. You can also add videos to your playlist. This will take a long time as well, and processing takes even longer. However! You can push publish right away and the video will publish as soon as it’s done.

A screenshot of the YouTube upload screen. You can drag and drop a file to upload it.

Part 7: You’ve Done it!

With that you should be all set with making and streaming an episode! Now for the fun part, actually playing the game. Congratulations!

Megan Tolentino is a cofounder of the Redacted Files Podcast Network with her husband Aser. They currently run The Redacted Files (a multi-system, multi-campaign, rotating cast Actual Play podcast), The Amber Clave (a Numenera Actual Play Podcast), and Firefly Podcast (a…well…Firefly Actual Play podcast). You can find her infrequently streaming on Twitch or actively interacting with the world on Twitter. If you run into problems setting up your stream, just reach out on Twitter!

The tabletop mic drop logo shows a microphone being dropped

Tabletop Micdrop is a publication about tabletop roleplaying games (TTRPGs), storytelling, and the RPG podcast industry. We want to share our passion for the TTRPG audio medium, introduce folks to new shows, and explore the RPG podcast industry together.

Subscribe to our newsletter today! If you can, support our work via Patreon.

--

--

Megan Tolentino
Tabletop Micdrop

GM on the Amber Clave and The Redacted Files, player on The Redacted Files and Firefly Podcast. Web developer, octopus fan, and accessibility advocate.