Checkpoint 1 Production Breakdown
This artical was writen back in 2020 at the start of IPL. We now do a lot of things different but some thigns stay the same. This artical remains as a point of reference for people to learn from.
Concept to the final product. How an IPL tournament broadcast is designed and produced.
Hi there. I’m Vincent, one of the people in the IPL production team, the team that is responsible for doing all the aspects of a stream you see. My main job actually is programming things that we use to help run smoothly. But today I’m going to walk you through what happens, concept to the final stream, what happens to make a broadcast for a tournament happen.
Checkpoint 1
Before we can begin making anything for a stream we need to know what we’re making a stream for, in this case, it’s quite simple. Checkpoint 1!
Checkpoint 1 is a Discord Server dedicated to the low level and newer people coming into the Splatoon 2 competitive scene as well as a place to hang out and talk to people.
For some context, work began back in early September 2020 to design and produce a stream for Checkpoint 1’s upcoming tournament, with the tournament and stream taking place on the 7th November 2020.
The first thing to do is to work out what assets we had to work with for any kind of brand identity. For CP1 we didn’t have much, a mascot, 2 logo variants and 2 differing fonts. So to begin with we worked out what parts of these assets we wanted to use.
After we decide what logos and other assets that CP1 has provided us with that we’re going to use, we need to decide what look we want to give the overlays themselves for CP1. As they don’t have any brand identity we also need to consider this look might influence how people perceive them.
Design
To begin the design work we use a website/program called Figma, this is a UI/UX design tool that allows multiple people to work on a single design at the same time. In Figma, we draw up each screen. Then start working on the placement of items on the scenes
In a set of overlays, we usually have the following screens
- Break Screen
- Maps
- Team Roster
For CP1, we decided on giving their tournament a lined paper/notebook look to help play on the fact they are a place for people to learn and play together. Another factor of this design was that the majority of the staff for CP1 are artists themselves. So we can lean on that premise and create a sketchbook looking theme for the overlays.
Design Decisions
Break Screen: We designed this scene to show CP1’s large logo but we also wanted to be able to keep all the information IPL places on screen still on the scene. So we placed the logo on half of the page and the updating information of the other. For the updating information, we use symbols to help signify what each line showed on the scene while keeping it concise.
Teams: For this scene, we wanted to keep each team distinct in their own group with their players. To stick with the theme we designed we opted, to use the sticky notes to stay along the paper theme with thumbtacks looking like they are pinned to the background with a drop shadow on the sticky notes.
Maps: In this scene, we need to be able to display the team’s score along with the 7 maps. To help display each map, I designed it so each card with the map and mode looked like a bookmark. We use drop shadows yet again to help give a sense of depth to the scene. For each map we need to be able to show the winner after a game has ended, we do this by dimming the image shows what the map is and overlaying the team name overtop. We did this to keep the look clean.
Scoreboard: This, by far, had the longest time spent on it during the design stage. This scene is overlayed on top of the game itself and give the viewer info on what teams are playing and the colour ink of each time. At the start, we also display the information on the commentators. We went through three versions of the scene, gathering feedback from CP1 and IPL staff before deciding on a final version to use.
Overall designing the basic look of overlays for CP1 took 2 weeks, and many revisions back and forth between staff before coming to a semi-complete stage. While designing all these screens we need to make sure that we keep a constant style between each one so nothing looks off.
After the design is done, these Figma files are handed down the chain to be implemented along with annotated design stating the little design points that one might miss at a blink of an eye. While we want this design to be final, we always decide at the implementation stage to change the look of something as it might be a better fit or the original design isn’t possible in the time scale we have to do the work.
Art
After the base design was completed, we decided to add “doodle” style art onto the overlays. So we contact artists that we may want to create art for this project. For CP1 we asked Moey and Starbiit to create the art for the 3 scenes that needed them. Handing them the brief as well as the Figma designed to work on top of.
Implementation
The fun part begins! Within IPL our stream overlays are fully dynamic, meaning we can change the information on them nearly on the fly as we need to, such as team and the text on the break screen. None of this is handled in our capture software.
Implementation and usually all of the overlay design work is handled by Inkfarer. He’s the Head of Video Production at IPL, doing the majority of the streams for IPL, as well as programming the overlays for the different tournaments we run/stream.
Software
The main piece of software we use for our overlays is called NodeCG. This is a framework that uses web technologies such as HTML, CSS and Javascript to make broadcast graphics and is starting to gain wider adoption.
Currently, most of IPL’s overlays are built on top of a shared base that’s made on NodeCG called ipl-overlay-controls. This gives the base controls needed for production and is the front end we use to interact with the overlays the view actually sees.
So from here, the design created in Figma is turned into overlays. Most of this is done using a lot of HTML, CSS and Javascript making what essential is a website. Then on the overlay controls, Inkfarer needs to update it to support some of the new things we need for overlays. In this case, we needed to add support for importing team data from our own source and not Battlefy / Smash.gg as CP1 weren’t using either platform for their tournament.
One thing that viewers may not have picked up on is that during stream we used the last ink colour of either team for the art that is on the maps screen. Behind the scenes, for this, we added the ability for the overlays to automatically determine the colour that the next game may be. We can do this as Splatoon 2 has a predictable order private battle ranked mode colours go in when the same person is hosting the lobby.
Animations
When we transition from the break screen to the teams screen, the sharp-eyed may have picked up that the Checkpoint 1 logo roles back and disappears instead of doing a sharp transition. To do this we animated the CP1 logo within After Effects and exported it out to a special file format that didn’t lose its quality. Then we use a package called Lottie, that’s made by Airbnb, to display the animation on screen, and since it’s programmed in and not an image we can do cool things like reverse the animation without much effort. This is also the first overlay to make use of Lottie for animation.
Along with Lottie Inkfarer also uses GSAP to animate text and other moving objects, like maps fading down into view.
Transitions
Transitions are quite simply made in Adobe After Effects and are used to cut between the Overlays and the made game screen. These are loaded into the OBS transitions option.
Here’s one of the in-progress previews without final art:
After the overlays are designed and implemented we’re pretty much ready to get the stream up.
Streaming
On the day multiple people are involved in running the stream. One person will be responsible for contacting teams and getting them into the lobby ready to be cast, then another person does the actual streaming, controlling the overlays, camera and what is sent to broadcast.
Software
For software to stream to Twitch, we use standard OBS Studio, the scenes with the overlays and the actual game itself are added as scenes into OBS along with other things, like title cards for shout outs. The Overlays themselves are presented to OBS using a browser source.
Commentators
The way IPL does commentary is that the caster will be in the same room as the other commentators. The caster will send an OBS virtual camera feed into Discord, or to a separate internal stream to give commentators a live view of the game, without them needing to enter the lobby themselves. Then to Sync up audio with the video a delay is added to help sync up the two.
Replays
While not used for CP1, in our larger tournaments such as Low Ink we will replay previous clips from past tournaments to help fill the downtime between each round. We do this as we may have a lot of downtime between round to fill. To help store and manage these clips from OBS’s replay buffer we use a program called Clipmaster that will store and name clips for us and line up clips to be replayed on stream.
Wrap-up
The creation from the beginning conception of a tournament to the final product can be a long process, involving multiple people working together to create a single end product. However, this is how IPL produces a stream or a basic overview of how we put one together at least. I haven’t gone very in-depth into some other things we do, but I hope this was interesting to those of you who have read this.
I haven’t mentioned every person that had a hand in helping create assets and broadcast for Checkpoint 1, but if you want a glimpse of who may have helped you can visit our website’s staff page.
If you would like to look into how the graphics themselves work, we’ve uploaded the source code and assets for Checkpoint 1’s overlays up to Github for people to learn from. They’re available at https://github.com/inkfarer/checkpoint-overlays
Thank you Checkpoint 1 for letting IPL be a part of their tournament and giving us a chance to stream it to everyone.
IPL’s stream is still very much a small operation, mostly being run by Inkfarer, we hope one day we can do a stream where we have more than one staff member working on stream at once like a large esports or TV production.
Thanks for reading! 😄
