🤓🤓🤓🤓🤓🤓🤓

Hi, I noticed a little bit of interest in learning about how to make a tournament stream on the twitter x dot com so I wanted to share my experience. If you aren’t familiar with me, I’m ely! I do broadcast production and all the aspects of it (photoshop / animation / video editing / etc etc) but I mainly focus on the make-your-images-dance-in-obs and the data associated with it. I’m a head organizer for IPL and co-founded Under Pressure. If for whatever reason you aren’t here from Splatoon, I’ve worked on LPL English’s unofficial broadcast, Battle of BC 7, and many things with UBC Esports. You can find my work here: https://elypastworks.carrd.co/ 

I’m completely self taught (with help along the way, obviously! Thank you to Falco, Thyme, Rosen, N8te, and Xi for all the different ways you’ve contributed to my learning) over the last 3 years.

I started out by simply running streams for FTIU and learned by picking apart people’s work, then trying to make my own thing. This is my first ever overlay from 2022, if you were curious:

I could have learned how to make things not ugly much earlier if I had support. At the time, there weren’t any resources on how to do this, only a demand for the results. I would have appreciated something like this document as a learner. Now that I’m confident enough in my craft I’d like to offer my advice. If there are further questions, you’re more than welcome to reach out to me on Twitter @elymentalW, Bluesky @elymental.bsky.social, and Discord @elymental!

I love the work I do and teaching others how to do it! I want to see smaller events look good as well, and have the rest of the scene catch up to IPL’s standards for production.

Table of Contents

  1. Your machine & it’s limits
  2. Parts of a stream & general guidelines
  3. Audio / video settings
  1. Caster cameras
  2. Input / output
  1. Elements & fitting in
  2. Common dependencies
  1. SheetsIO
  1. Sendou.ink Automatic Dashboard by N8te & Xi
  1. Advanced Scene Switcher
  2. 3D Effect
  3. Move Transition
  4. Tuna / AIMP
  5. Instant Replay
  6. Transition Table
  7. Shader Filter
  8. Multi RTMP
  9. Waveform
  10. Source Copy
  11. Source Clone
  12. Asynchronous Image Source
  1. Asset creation & additional tools
  2. Run of show
  3. Closing

Your machine & it’s limits

Just as a short preamble, I am not someone that can code- all of my graphics are made purely in OBS with images, browser, and text sources. This is somewhat intensive on the machine, so you may or may not be able to use all my methods depending on what you’ve got at home. For reference, I run everything off of a laptop with a 3070 and an i7 11th gen with 16gb RAM so it’s solid (but dying lately, lowkey) on paper but even I struggle with some of the shows I make.

I mention code because there are other avenues to doing this, of which I am unfamiliar but you can pick their brains at https://github.com/inkfarer/ipl-overlay-controls https://github.com/IPLSplatoon/ if you’re interested in making web based overlays.

If it wasn’t obvious, you do need a capture card by the way. Any will do as long as it has an HDMI in and out, plus a USB out.

Parts of a stream & general guidelines

As this is a medium of art, you’re more than welcome to break the rules once you’re familiar. Conventions exist for a reason, so it’s good to understand what is standard before branching out.

Overlay for Prism Break by Under Pressure; Assets illustrated by Orcoris

Using one of my own events as an example, while it is stylized to fit the tournament’s theme, the pieces within it are very uniform. You can break this standard type of overlay down into several sections:

Overlay for Prism Break by Under Pressure; Assets illustrated by Orcoris

Overlay for Prism Break by Under Pressure; Assets illustrated by Orcoris

I think of overlays in three sections; header for team or round info, content as a variable for whatever may be displayed during a break, and the lower third which I use for information either unrelated to the set or rarely subject to change.

Expanding a bit further on content items, the most common scenes to make are:

  1. Maps
  1. Things to include would be the map info like image / name / mode (icon and/or name), and the winning team (icon and/or name) per map. Bo3/5 versions at least.
  1. Rosters
  1. I like to display the full roster and their team icon here. Prism Break predates the Sendou Auto Scoreboard, but as part of this sheet it does also give you the player’s weapons as an output. I highly recommend including this into the overlay as well, shown here
  3. Weapons should be added as a subheading or as icons, don’t want to intrude
  1. Commentator SOMETHING
  1. Cameras are nice, but not everyone wants them and not every event wants to put in that effort. That’s totally understandable! A nice alternative by aza @nautiIus47 is to use a commentator’s profile picture and to have it light up when they speak:
  3. These can be added as a browser source from https://reactive.fugi.tech 
  1. Replay(s)
  1. I like to show a replay of the final moments of the game (or a cooler clip from the middle in case the end was boring) after the match

Overlay for Prism Break by Under Pressure; Assets illustrated by Orcoris

Something to note is the placement of each piece of information. Everything has sufficient margins or “breathing room” between one another so that it isn’t cramped. Same applies to the text, there is a comfortable amount of room between it and the edge of the box. When ignoring this convention, I feel that the overlay becomes difficult to look at and to absorb information from.

Overlay for Prism Break by Under Pressure; Assets illustrated by Orcoris

Another must-have on your stream is some sort of overlay for the game. Elements are placed off to the side so the viewer can have an understanding of what they’re watching, but are placed so they don’t intrude on the gameplay. In regards to sizing, the green line is how I determine the size of the scoreboard. I feel that it looks best when it aligns with the bottom of the in-game HUD.

As for common features of this scene:

  1. Splatoon *needs* the ink colour displayed so a viewer can tell which team is which.
  2. Note that you don’t need to follow what we chose to do with the entire scoreboard being a colour. This is an example from NSE by Pinky_flcl that I think works nicely.
  3. I always have a feature to switch the colour of both sides, as some teams pick bravo?? It’s easier to swap the colours than to change which team is above / under
  1. Team names & scores
  2. Not required, but I like it when commentators are credited for their work on the scene where they talk the most and loudest
  3. Round info (e.g. Best of X, Round Name, Tournament Name)
  1. I opt to put this in the bottom right always, but see 1a where Pinky_flcl places it nicely in the top left corner as well.

Overlay for Prism Break by Under Pressure; Assets illustrated by Orcoris

The final scene you really want to have is a break scene for when the commentators are fully off the mic. This is very flexible and where I like to do stupid things, like throw family guy on screen. Generally though, I include the logo and name of the tournament along with info that a viewer may want to know during a break such as the amount of time before the next set, what set they’re watching next, and the next two teams that will be playing. If that is too much effort, like seen in Prism Break, we have a flavour text option that the streamer can simply write on.

Audio & video settings

I won’t bullshit you, this isn’t my forte either but from asking around, this seems to be everyone’s question so I’ll share what I think is right, but you are more than welcome to correct me.

For starters, I use the following but do what your computer can handle:

Access this menu at Settings > Video

  • If you are streaming Not-Splatoon, keep this 1920x1080
  • 60 frames per second

On the Output tab of Settings, you can determine the quality of your stream. Twitch’s maximum bitrate is 6000 Kbps, so mine is set to that. (jpg says you can go to ~8000 if you’d like). The encoder / preset are relative to your system, mine kind of sucks lowkey so I am on the lowest possible for both.

The last thing you should do on this tab is enable your replay buffer. When this is enabled, you can press a hotkey to take a clip of the last however many seconds. I set mine to 30 seconds, but it’s a free country or something.

On the Audio Tab of Settings (assuming this is for a tournament stream), you should disable the global sources Desktop Audio and Mic/Auxillary Audio (not this one if you’re going to commentate and stream at the same time). If you want to hear (and by extension the casters) the capture card, select the proper monitoring device for all that to playback through.

You can open the advanced audio properties from here. To do so, find the source in the list and change Audio Monitoring to ‘Monitor and Output’.

As for leveling your audio, this is a guide I stole from IPL for how loud things should be:

Except I changed some of the values because I disagreed. These show the high points, so if a caster regularly speaking is peaking in volume, then they’re too high up.

How do you even get audio from the casters?

There are a few ways to do this, but the easiest is just to join a Discord VC and capture that application’s audio. This way, the stream can hear them but not you (the streamer).

The other option is within the red box, with browser sources. This gives you a larger range for customization. When we use caster webcams, we invite them to a https://vdo.ninja/ room then use the Solo View Link as a browser source.

Be sure to enable this option to have these added as sliders for audio.

This pops up when you add the browser source.

If you do this purely for audio, simply put the browser sources under everything else that is visible. Receiving video feeds is the exact same method, but you’ll want to crop the camera and put it within some kind of frame, generally with their name/pronouns/social media on top of it.

Casters need to see/hear somehow. I just stream my OBS preview in Discord, but VDO works too!

Elements & fitting in

Overlay for Prism Break by Under Pressure; Assets illustrated by Orcoris

How do you stop this from happening? It looks silly when text or images spill out of where they’re meant to be. With the various transform options, you can limit where things with variable sizes sit.

1) You can select a bounding box type here. I usually use ‘Scale to inner bounds’ for images and ‘Maximum size only’ for text.

  1. ‘Scale to Inner bounds’ makes the image fit a predetermined size.
  2. ‘Maximum size only’ allows you to determine a size, but maintains the aspect ratio.

2) You can determine the size of either option here.

3) I only use crop for map images, but you can do other things to them too like use a scroll filter then limit the width.

You may also notice that the Prism Break overlay’s corners and that the maps fit within that box despite not being pre rendered to be that shape. This is done with image mask filters.

By using image masks and cropping, you can have an image take the shape of its mask.

This allows you to work with shapes other than just squares.

Apply the mask using the Alpha Mask (Alpha Channel) option, then select the file that has the desired shape.

Afterwards, visit the transform menu to crop the image to the bounds of the mask.

Do note that like assets, masks are not one size fits all- you will have to create an individual one for each purpose you have.

The final thing on this topic is Custom Text Extents, which can be found at the very bottom of the properties tab of a text source. This forces text to line break when the width is exceeded. In conjunction with a bounding box, you can ensure your text looks and stays where you want.

Common dependencies

I love this part the most! This is a list of resources I regularly use to make my shows happen.

  1. SheetsIO
  1. Grandy, the beautiful idk your pronouns that you are. Bless your soul. This app allows us to download information from a Google Sheet onto our computers as text / image files. This app is the basis for all the data you see on stream.
  2. I will skip over setting up a dashboard because we have created a template that is available for use: SheetsIO - Sendou.ink Tournament Production Template
  1. Make a copy!
  1. To adapt this to your tournament, do the following:
  1. Add your commentators in the Commentators tab.
  2. Change the format in the Info tab to what fits your event.
  3. Create a config file with the contents of Column D on ‘Output’. Template and instructions for this are available on the SheetsIO Github Page.
  1. Advanced Scene Switcher
  1. This plugin allows for so much. Any automation or multi step animation in my stream is done with this and show/hide transitions.
  3. You can access its menu here!
  4. I encourage you to explore this plugin’s capabilities yourself, but here are common macros I create in every tournament overlay:
  1. Toggling text sources on the break scene (turning one on turns others off)
  1. Scene item visibility change in any of those text sources disables the visibility of all the other text sources besides the one selected.
  1. Swap colours on the scoreboard
  1. There are actually two sets of colours but one is always disabled until this is toggled. I create an image source linked to nothing as a button/switch to hit, which changes the visibility of those two hidden colours (it’s just the reverse position of the correct colours)
  1. Toggle map winner
  1. There are many many sources involved in displaying a map winner, like an image or filter to darken the map info behind the winner, the winning team name, their icon, maybe a frame for it. You don’t want to click all of them at once, so similar to the Swap colours macro, I create image sources linked to nothing as switches/buttons. When their visibility is triggered (each one pertains to a different map), it displays a group of items related to the task.
  1. Automatically switching sources based on timer
  1. Space is limited on a screen, so not everything can be on there at once. One such item is commentator info. I create a macro with a timer to enable/disable the visibility of the socials/pronouns text sources every few seconds to switch between the two.
  1. Multi step animations
  1. For more complex things like the animations seen in the LPL overlay, I set show/hide transitions on the relevant sources (right click a source to set this) then chain them together
  2. E.g. When the scene changes to rosters, I want the lines of the roster box to be drawn in. So, I’ll enable the visibility of the first few lines, then create a second macro that enables the visibility of the next few lines once the first lines are visible.
  3. If you want to offset timings, like if you want the next few lines to appear before the first set finishes appearing, then I create an invisible source with a show/hide transition that is faster than that of the first lines, so that it finishes before they do. Then, I use the invisible source to control the second macro.
  1. This is the most complicated plugin in the list and I have not even gotten close to explaining all of its use cases. I don’t know all of its use cases. It is huge. Feel free to reach out to me for specific help on this! There is just no way to have this part of the document be all inclusive. The best I can do is provide examples of what I use.
  1. 3D Effect
  1. This plugin adds a filter that allows you to control the position/scale/rotation of a source and also adds a third axis with pitch and yaw.
  2. I commonly use this in conjunction with Move transition as part of multiple step animations as seen in the LPL overlay (Head to Head and Highlight scenes specifically)
  1. Move Transition
  1. This plugin adds a transition type based on the position of sources between scenes. Prism Break uses this and simply moves sources up and down off screen.
  2. The secondary use of this plugin is that it has a filter, which can be used to record positions. In conjunction with 3D effect, you can telegraph specific movements then with the Advanced Scene Switcher, you can automate the different steps to create a smooth animation.
  1. Tuna / AIMP
  1. These two are a package deal; AIMP is used to play music, but has an option to upload your current listening activity to Last.fm.
  1. CTRL + P to open settings, then see the ‘Scrobbling’ tab. Log in with Last.fm and be sure the percentage to scrobble is set to 1% so that it updates your activity as soon as a song starts.
  1. Tuna can read listening activity from Last.fm and output it as a source.
  2. You can access it here!
  1. Tell it to read from Last.fm
  2. Input your Last.fm username (don’t worry about the API key)
  3. Specify what the text source looks like
  4. Be sure that the plugin has started
  1. This is how we show song names on stream!
  1. Instant Replay
  1. This script replaces a media source with the last file created by your replay buffer.
  1. Access the scripts menu from the top bar where the last two plugins were.
  1. Add the script (replace the file already there)
  2. Select the media source you want it to overwrite
  1. Go to the hotkeys tab
  2. Set a keybind for “INSTANT Replay” (can you tell this has historically been a problem? Beware of this easy mistake)
  1. Be sure that the media source itself restarts when it is visible and does not display nothing when it is over. Either freeze frame or loop the clip.
  1. Transition Table
  1. This plugin allows you to determine what transition is used when going between a certain scene to another. It is good for freaks like me who do not use studio mode, but you should also just use studio mode.
  1. Shader Filter
  1. This adds a filter to sources with many possibilities, most commonly being drop shadows and borders within the app. Animations are there too, you can preview them on the website.
  1. Multi RTMP
  1. Allows you to stream to multiple destinations at once. I highly recommend streaming directly to a VODs channel, as Twitch deletes your videos after 2 weeks whereas YouTube does not. If you forget to export a VOD from Twitch, it is gone forever. So, cut the middleman and just stream to the VODs channel directly.
  1. Waveform
  1. Completely optional, but gives you the option to create waveforms from a specific audio source. I use these as part of my graphics semi frequently.
  1. Source Copy
  1. Not related to the making of a show, but if you need to bring things over from another scene collection, this is the way to do it.
  1. Source Clone
  1. You can use this plugin to clone a source, allowing you to apply different filters to the same source.
  1. Asynchronous Image Source
  1. With SheetsIO, you are constantly overwriting images which can cause lag spikes. Adding image sources with this plugin instead of the default image source will have OBS display the previous image until the new one loads.

Asset creation & additional tools

We’ve talked about everything but designing the stream, which is totally up to you. I hope that you create a brand and look for your stream/event that is interesting and sets itself apart from the rest. Once you’re comfortable enough with OBS, maybe you’ll break away from the norm. Refer to the FTIU overlay, where we display all of our graphics within the environment of a cafe. That is what I hope to eventually spawn.

I don’t have input on how you should design your graphics besides use colours that don’t hurt my eyes and go together well, but here are the resources I use to make mine:

Purpose

Tool

Acquisition

Image Assets

Photoshop

Buying this product legally*

Image Assets

Figma

Limited

Video Assets

DaVinci Resolve

Free

File Conversion

Shutter Encoder

Free

Stinger transitions are the one thing I’ll address:

  1. This video should cover the entire screen for at least one frame
  2. Should not be too long or your computer will explode and will be hard to time

I think After Effects is the ideal program to use for these videos, but that is beyond my paygrade so I use Resolve:

To export a video with transparency in Resolve, you have to use these settings. Or maybe there is another way, who knows. Please also set your timeline to 60fps unlike what I did in this screenshot.

Afterwards, you want to convert the file to WEBM to compress it, which is done via Shutter Encoder.

The function VP9 lets you convert to WEBM. From there you can enable transparency then export the video.

You can then add your stinger to OBS like such.

Run of show

This pertains to Splatoon only in case you are here from elsewhere, as our game is much faster pace than anything else so it won’t all apply.

So, you have everything made. How do you actually do this?

I do have a bit of a mental flow chart when it comes to Splatoon streams for what to show and when. Obviously, this differs between overlays and events, but you get the idea.

  1. Tournament starts or break ends
  1. For the start of the tournament, you should go live 5-10 minutes early so people following your channel have time to get situated after getting your notification.
  1. Have casters decide who speaks
  1. I like to ask them who will go on first so they’re prepared for when the mics are on
  2. In other esports, the play by play caster goes first in case you need a tiebreaker
  3. Be sure to give them a countdown before throwing them to the wolves
  1. E.g. Are we ready to go? Okay, 3-2-1; you’re live now!
  1. Sign on, then show team rosters
  1. I like to show the players at the start of the set since they’re more interesting then the opinions on Splatoon maps I’ve heard hundreds of times already
  1. If there’s time before the game, show maps
  1. I send the commentators live when there’s 6 players in the lobby to reduce the wait, but the game is very fast so you may not have time before the first game.
  1. Go to Game
  2. Observe match & take replays
  1. I may write a separate document about my thoughts as I observe games, but Boing, IPL’s head of broadcast wrote a document that I mostly agree with:
  2. Splatoon 3 - Observer Cam Thoughts
  1. Game ends, show replay(s)
  1. Sometimes I skip this step if there’s nothing interesting to show
  1. Back to roster or maps, then repeat
  2. Set ends, go to break
  3. Repeat until the tournament ends, then raid
  1. Send the people to another streamer! Support other Splatoon streams

Closing

Hopefully you found this guide / advice helpful! As mentioned, I’m more than happy to help; feel free to contact me through Discord @elymental, Twitter @elymentalW, or Bluesky @elymental.bsky.social if you’re looking for more assistance!

Should you feel like content is missing from this document, please let me know and I’d be happy to update this with more information.

If you like what I do, my site and portfolio are here: https://elymentalw.carrd.co/ 

I do take commissions! Pay me to make images dance for you in OBS :D