My Twitch experience as a Live Games Developer — Part 2: Software Setup
Introduction
During the summer, I wanted to experiment with live streaming games development to see if it could become a workable career path in the same way as live streaming playing games has become over the past few years.
On paper, it shouldn’t really work. Watching someone write code for hours at a time isn’t exactly the most exciting of prospects for a viewer and yet before I started this, some of the top game dev streamers on Twitch were averaging 50-100 concurrent viewers.
This wasn’t huge by any means but was promising as most of the viewers were engaged with the streamer or with the rest of chat. This contrasted the game playing streams with thousands of viewers who lurk or fill chat with emotes.
I wanted to see if it was possible to create a games development Twitch stream with enough viewers to generate a big enough revenue to become a full time job. Inspiration came from the Double Fine Adventure documentary series where the company created revenue documenting how they developed the game, which would normally be the byproduct of games development.
You can find my profile on Twitch, past broadcasts on YouTube and stream highlights.
Over the next month or so, I will be writing about the whole period over a series of posts covering different areas. These will include the hardware setup, the software/services used and my experience of being a live streamer alongside what I would change.
- Part 1 (Hardware)
- Part 2 (Software) - This article
- Part 3 (Learnings)
Screen Capture
Open Broadcaster Software (OBS) is the default choice for anyone new to streaming or even to screen capture. It’s well supported, mature, extendable via plugins and completely free.
Usability is a bit rough around the edges but is more then enough for someone to get started with. The popularity of the tool also means that there are plenty of guides and help on Internet if you run into problems.
OBS now has two versions, OBS Classic (Windows only) and OBS Studio (cross platform).
OBS Studio development is still in progress as it has been rewritten from the ground up to enable further development of features and more importantly, multi-platform support.
I personally used OBS Classic as there was a specific plugin that I wanted to use (more on that later) as there wasn’t a feature advantage at the the time.
Some streamers have favoured XSplit over OBS for usability and they offer different subscriptions tiers for features, ranging from free to $4.17 a month at time of writing.
OBS settings
I use the following settings for OBS:
- Base resolution at 1440 x 900 (16:10) at 30fps with no down scaling
- QuickSync Encoder at default settings
- Bitrate 1800 kb/s
The alternative setup is to use the H.264 software encoder reportedly can produce same or better quality encoding at lower bitrates then either QuickSync or Nvidia NVENC at the cost of CPU usage. Ideally you need a hefty CPU like an Intel i7 or use a second dedicated PC purely for encoding.
Plugins
There are two plugins that I used throughout all my streams, CLR Browser plugin and OBS Remote.
CLR Browser is incredibly powerful as it allows you to place a browser window any where on your stream which opens up accessibility to use any web page including ones that are self developed.
In my case, I couldn’t find a simple clock plugin to show the local time. Using basic Javascript and HTML, I quickly put together a webpage which displayed the time using Javascript and used the CLR Browser to overlay it on the stream.
Overlay/Composition
I ended up spending too much time on overcomplicated overlay for my stream. The original idea was to keep new viewers on the stream long enough to find something of interest that they could engage in rather then channel jump to another stream.
My attempt was a scrolling ticker of RSS feeds that pulled headlines from related news sites such as Wired, GamesIndustry.biz and Gamasutra. I was hoping that during a quiet period in the stream such as when I was working through a problem, that the viewers would be able to pass some of the time reading the headlines. The idea was taken from the tickers on news programmes where they display general information over top of the current news story.
Unfortunately, I have had mixed feedback on it. A couple of viewers said that they found it interesting and others say it was a little distracting to the main content. I’m still on the fence about this as I do need something to keep the audience engaged while I’m in deep thought and currently thinking of other solutions.
Over time and from watching other streamers, I found that all I really needed was desktop capture, a face cam and chat on screen.
The actual content matters more and is something I completely overlooked when I prepared the channel. The time I spent creating the overlay should have been spent on preparing and creating great content.
Clock
The clock was a late addition to the overlay as I often was asked my local time. It was easier to say when I would be back from breaks as I could give a time rather than saying, ‘Be back in 10’.
As mentioned above in the overlay section, the clock is within Javascript code as a web page.
<!DOCTYPE html>
<html>
<head>
<script>
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
h = checkTime(h);
m = checkTime(m);
document.getElementById('txt').innerHTML = h + ":" + m;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i};
return i;
}
</script>
<style>
body {
background-color: rgba(0,0,0,0);
color: #FFF;
}
div.clock {
font-size: 44px;
font-family: tahoma, sans-serif;
font-weight: bold;
}
</style>
</head>
<body onload="startTime()">
<div id="txt" class="clock"></div>
</body>
</html>
Donation/Recent Followers Ticker
At the bottom of my overlay, I have scrolling text that shows my top donations, recent donations, recent followers and a custom message.
I was using Muxy as an all in one service that covered analytics, donations/tips page and on-stream alerts for follows, donations, etc.
(Twitch have added ‘Cheering’ which allows users to donate ‘bits’ since I last streamed which Muxy does not have an on-stream alert yet).
Muxy has a program that can be generate text files with different groups of information such as Follower Count, Top Tippers, All Tippers etc. These can be overlaid in the stream via a Text Source on OBS very easily.
As I wanted a single line of scrolling text, I had to write a Python program that took the contents of text files I wanted to use and copied it to a single line in a new text file. Once I had that, I could then use the file as a scrolling Text Source on the overlay in OBS.
from sys import argv
import time
while True:
ticker_string = ""
muxy_dir = "C:\\TwitchFolder\\Muxy\\"
root_dir = "C:\\TwitchFolder\\"
total_donations = open(muxy_dir + "total_donation_amount.txt")
ticker_string += total_donations.read() + " | "
total_donations.close()
all_time_donators = open(muxy_dir + "all_time_top_cumulative_donors.txt")
ticker_string += all_time_donators.read() + " | "
all_time_donators.close()
recent_donations = open(muxy_dir + "recent_donators.txt")
ticker_string += recent_donations.read() + " | "
recent_donations.close()
recent_follows = open(muxy_dir + "recent_followers.txt")
ticker_string += recent_follows.read() + " | "
recent_follows.close()
special_mentions = open(root_dir + "special_mentions.txt")
ticker_string += special_mentions.read() + " | "
special_mentions.close()
ticker = open("MuxyTicker.txt", 'w')
ticker.write(ticker_string)
ticker.close();
print(ticker_string);
time.sleep(60)
Screen Size
Typically on Twitch, 1080p (30fps) and 720p (30fps) are the most common resolutions and framerates that are used as they are the most common monitor resolutions and console output. This is also due to limitations with residential broadband upload speeds for the streamer and download speeds for the viewer.
Sometimes streamers will drop the resolution to 720p when they do have bandwidth to cope to increase the framerate to 60fps for a smoother viewing experience.
I bucked the trend to use an unorthodox resolution of 1440 x 900 which is an unusual screen resolution since there is no monitor with this resolution.
I was considering I was watching game development streams and after talking to a few other viewers, most would put the stream on a second screen with the chat open while working on their own work.
Given the most common screen size is 1080p (although 1440p and 4K is becoming increasingly popular), after taking the chat and window toolbar into account, there isn’t a lot of screen estate left for the stream itself.
Since no-one would be watching the stream full screen, it seemed to be a waste to stream at 1080p 16:9 resolution so I started experimenting with different resolutions and aspect ratios.
I found that the 16:10 aspect ratio filled the screen space best and a 1440x900 resolution was low enough that there wouldn’t be too much scaling and I large enough for me to comfortably work in.
I found that the 16:10 aspect ratio with a resolution of 1440x900 filled the screen space within the browser best without being too small to work in.
Working with Audio
To help with managing the audio sources such as separating the music stream from the general desktop audio, VB-Cable really helped. It allowed me to control audio levels of within OBS rather then having to swap between different applications to adjust volume.
It’s really straightforward to use as when installed, it comes up as an output device and redirects to an input source that OBS can add.
During test recordings of the stream, I saw that the audio was just slightly out of sync with the camera. This is a common issue with a lot a streams that I have seen but easily fixable by adding a small audio delay within OBS.
Bots
I previously thought bots were essential so I spent a long time researching and setting one up. In practise, they were more problematic by timing out users with their default rulesets such as posting just a link or emotes.
With a small viewership, it is more than manageable to deal with users yourself and/or appoint a few moderators to help out. Twitch have also recently announced ‘AutoMod’ to prevent hurtful and troll like messages from reaching the chat at all.
That said, the one good use for bots for any viewership size, is the ability to assign custom commands such as ‘!software’ and ‘!design’ to deal with FAQs from the chat.
With time, the regular viewers will use those commands to help answer the new viewers’ questions as well.
The one I used was NightBot and it was really straightforward to use. Adding new commands was a breeze and it was hosted in the cloud which gave me one less headache to deal with.
It is thin on features though so if you need something more extensive, Moobot and Vivbot are popular alternatives.
Epic Pen
This was one of the best software tools I had for the stream as it allowed me to draw and highlight parts on my desktop like a virtual whiteboard.
It allowed me to describe and explain parts of my game design, high level logic, algorithms, etc much more effectively than without.
Best of all, it is free to use! It is Windows only but there is a paid Mac equivalent called Deskscribble that has similar features.
Programmer Break Timer
One of the toughest parts of streaming is remembering to take computer breaks. General guidance from Health and Safety Executive is to take 5-10 minute break for every 50-60 minutes of computer use. It is so easy to get caught up in the stream and not realise that you have been sitting and staring at the screen for hours.
I found this little tool, Programmer Break Timer which keeps me aware of time. It’s a simple tool that alerts you when a set time has passed which really helped me to take the necessary breaks away from the desk.
Chat Client
The default chat client in Twitch is fine as a casual viewer but can get unwieldy to use when using it as a broadcaster with dozens or hundreds of users.
This is where BetterTTV and Chatty can help.
BetterTTV is a browser extension that adds extra features on the existing Twitch Chat, most notable are:
- Recent chat history on chat load
- Desktop notifications when people send messages, mention you in chat and when channels you follow go live
- Broadcast dashboard that prioritises chat and auto-updates channel statistics
Personally I prefer the standalone, cross platform client Chatty for two main reasons:
- Displays when users enter and leave the chat
- Clicking on any name in the chat shows all the messages they have posted so far in the session
Both are incredibly useful from a broadcaster’s perspective in engaging with multiple viewers. Knowing that I had the ability to backtrack through a conversion with a particular user during a session took off some mental strain and allowed me to focus on the stream.
It is also worth noting that Twitch Chat is just IRC in the backend and it is possible to use any IRC chat client like the popular mIRC or Colloquy.
Background Music
There are three approaches that streamers take with background music:
- No background music at all so the viewer is free to play their own
- Use only copyright and/or royalty free music
- Play anything regardless of copyright
There is an even split in opinion with streamers and viewers about playing background music with some saying it’s a distraction to both the viewer and streamer. Others find the silence during bouts of deep thought uncomfortable and prefer some ambience.
Personally, I’m in the latter and generally play non vocal tracks at a low volume. The lack of vocals make the music less distracting and the low volume ensure it is just ambience.
If you do choose to play music in the background and would like to keep or upload the broadcasts on sites like YouTube and Twitch, use music that you have permission to broadcast. If not, the sites will generally mute the areas of the video that it flags as copyright breach rendering the broadcast useless.
Brands and sites like No Copyright Sounds (NCS) are great to use as like the name says, they are free to use without limitations and are very popular with YouTubers as background music.
Twitch, realising this would be a problem that streamers would have, has a pre-cleared selection of music available to use on their site which is awesome.
Another record label, Outertone allowed use of their music, royalty free for YouTubers and streamers which is very generous. They have a wider range of music then NCS and I found having a mix of both in the same playlist gives a nice variance in the background.
My streaming playlist is publicly available for anyone to use on SoundCloud. Just be sure to turn on ‘shuffle’ as SoundCloud will play related tracks after it reaches the end of the playlist which does include copyrighted music.
Gif grabber
Everyone loves gifs! They work really well on social media for demoing your work and viewer engagement. There tools available are:
- ScreenToGif - Available for Windows, feature rich allowing for captioning, clip trimming and more.
- Giphy Capture - Available for Mac, features clip trimming and resizing.
- LICEcap - Open source, available for both Mac and Windows, simple to use but lacks editing features.
During my time streaming, I was using LICEcap as I saw it being used by some of the streamers I watched. Since it was cross-platform and I work on both Mac and Windows, it didn’t occur to me to look for alternatives.
It was only recently that I found Giphy Capture and GifCam and the clip trimming feature is incredibly useful. It was really difficult to get the timing right with LICEcap and usually ended up with some extra frames at the beginning.
Next article
My next post will be the final in this series which will cover my original intentions, motivation and experience of being a streamer.
If you would like me to cover something specific, let me know below by tweeting me . See you in the next one!