Streaming
Streaming has become a large passion project of mine, and over the past few years I hazard to say that I've gotten rather good at it. I've almost entirely been streaming from the Game Dev Club at San Jose State University's Twitch channel, but eventually I'll start working on my personal channel again.
If you've been referred from one of the streams I run such as the "Ultimate Adventure" and are interested and how it came to be what it is read on. If you wanted to learn how to get your stream started up yourself, you can shoot me a message on social media telling me to make a video guide on how I set up everything (not sure there's a really a point if there's no demand).
Unlike the Videos page where I sectioned everything off by content, I'm going to go through my streaming growth chronologically since I'm genuinely very proud of the growth I've made in terms of production.
If you've been referred from one of the streams I run such as the "Ultimate Adventure" and are interested and how it came to be what it is read on. If you wanted to learn how to get your stream started up yourself, you can shoot me a message on social media telling me to make a video guide on how I set up everything (not sure there's a really a point if there's no demand).
Unlike the Videos page where I sectioned everything off by content, I'm going to go through my streaming growth chronologically since I'm genuinely very proud of the growth I've made in terms of production.
Humble Beginnings
|
|
When I first joined the Game Dev Club at SJSU, they were streaming with a basic Logitech C270 Webcam, a Hauppauge Capture Card, and a separate computer used to run the stream. The setup limped along for a while, mainly because the Hauppauge card was dying and needed a replacement. When I was put in charge, the club advisor James had told me we had a budget for the next year and asked for a list of essential equipment we needed for streaming. We then upgraded to a Logitech C920, Elgato HD60S, and a dedicated microphone: the Blue Snowball.
Configuring OBS for our simple streams wasn't very difficult as the elements really just needed to be put into their respective area. The only thing that I was really concerned about was that the webcam wasn't blocking any of the essential information, there were just the right number of scenes for what we needed to do, and that we started on time (which would often end up being the most difficult thing hilariously enough).
Streaming was, at the time, restricted to down to 480p and while the Blue Snowball provided serviceable audio, I didn't sound nearly as full as my Blue Yeti which I would often bring in its place. What really drived me to pursue a higher quality stream however was the viewership of the Smash Bros tournaments. People were actually watching those despite there being an ugly black box and nothing else really going on. Perhaps it was the passable commentary or -much more likely- people wanting to watch their friends/review their own games. Either way I had a viewer base and I was motivated enough to step up my game.
Configuring OBS for our simple streams wasn't very difficult as the elements really just needed to be put into their respective area. The only thing that I was really concerned about was that the webcam wasn't blocking any of the essential information, there were just the right number of scenes for what we needed to do, and that we started on time (which would often end up being the most difficult thing hilariously enough).
Streaming was, at the time, restricted to down to 480p and while the Blue Snowball provided serviceable audio, I didn't sound nearly as full as my Blue Yeti which I would often bring in its place. What really drived me to pursue a higher quality stream however was the viewership of the Smash Bros tournaments. People were actually watching those despite there being an ugly black box and nothing else really going on. Perhaps it was the passable commentary or -much more likely- people wanting to watch their friends/review their own games. Either way I had a viewer base and I was motivated enough to step up my game.
Experimentation
|
|
And so it was settled: I would work on improving the overall viewing experience of the "Did That Just Happen" Smash Bros tournament streams and find more interesting content to attract viewers over to the Game Dev Club's Sunday streams. As they say: "the squeaky wheel gets the grease," and since the Smash Bros streams were what was drawing in the viewers, I worked on that first.
I outlined and created an overlay for the both the webcam and the gameplay scenes so that I would be able to convey all of the information I needed to at a glance. While I did glance at other tournaments to see how they had everything situated, I ultimately back to just modifying the already existing layout and creating a simple image to have everything on top of.
I outlined and created an overlay for the both the webcam and the gameplay scenes so that I would be able to convey all of the information I needed to at a glance. While I did glance at other tournaments to see how they had everything situated, I ultimately back to just modifying the already existing layout and creating a simple image to have everything on top of.
|
|
Everything had a spot: the webcam, the game, and of course the text. A quick search online found me this program created by user "Zou" which I used to make all of the text elements dynamic. His program would create and edit text files, which OBS would then read and change the displayed text. There wasn't a fancy animation, but it go the job done and is what I used until the end of the "Did That Just Happen" tournaments.
The coup de grace would ultimately be a custom transition. But how was I to do that? I've never touched an animation software; in fact I still haven't. Instead, I made a game out of it: literally. I may not have animation experience, but programming I can do. I put the Smash Bros at SJSU logo on a backdrop then split it into four images along where the cuts of the logo are. Then I made a game where the game objects would converge to the center, then disperse off screen. I set the background to chroma key green, and recorded my "animation."
Then, after referencing a guide on how to make a .mov animation in Vegas, I stuck the recording into Vegas, chroma keyed the background, and rendered it using QuickTime 7. Finally I could stick the .mov into OBS as a "Stinger" transition and sit back to enjoy what I had created.
The coup de grace would ultimately be a custom transition. But how was I to do that? I've never touched an animation software; in fact I still haven't. Instead, I made a game out of it: literally. I may not have animation experience, but programming I can do. I put the Smash Bros at SJSU logo on a backdrop then split it into four images along where the cuts of the logo are. Then I made a game where the game objects would converge to the center, then disperse off screen. I set the background to chroma key green, and recorded my "animation."
Then, after referencing a guide on how to make a .mov animation in Vegas, I stuck the recording into Vegas, chroma keyed the background, and rendered it using QuickTime 7. Finally I could stick the .mov into OBS as a "Stinger" transition and sit back to enjoy what I had created.
For the Game Dev Sunday Streams, I tried to keep some on-going series on the docket as well as branch out into streaming other kinds of games such as VR and board games. Particularly, I wanted to stream Betrayal at the House on the Hill and Machi Koro but getting a setup similar to that of the very well received Tabletop Series on Youtube at the time was difficult but we made do. The stream worked mainly because the mechanics in board games naturally lead to good commentary but there was certainly room for improvement.
Refinement
With the release of Edmund McMillen's first board game, The Binding of Isaac: Four Souls, I was much more motivated to get a proper boardgame recording setup. I invested into a cheap action camera with a wide-angle fisheye lens that I planned to use as the overhead view, then the Logitech and my laptop's built it camera could be used as side angles to get closeups on cards. While the action camera's video-over-usb was lagging behind by about a full second, I was able to use it's micro-HDMI port and the Elgato to get virtually lagless and quality image from it. In the first recording, I didn't know how to turn off all of the on screen elements so some of them peep in on the sides, but in the future they won't be there. Everything worked as intended and overall was a much more pleasant viewing experience than any other boardgame stream we've had before it. Not to mention that I finally got around to making a custom transition for the Sunday Streams as well!
|
|
The Ultimate Upgrade
The release of Super Smash Bros Ultimate was met with anticipation and hype by the Smash Bros Club, and I was determined the use that energy to further improve on the stream and bring it to it's ultimate form. The first thing to change would be the name of the stream: Michael "Mickey" Morales and I were walking back from his car after picking up pizza for a Game Dev meeting when he mentioned that he was interested in renaming the tournaments. On the way, we came up with the idea to combine a meme from our group with the main tagline for the Smash Bros; and so "The Ultimate Adventure" was born.
With the new name in mind, I set out to come up with a new logo to replace the old "Did That Just Happen" stylized text. I came up with the simple solution of editing the text of the existing Super Smash Bros Ultimate Logo to read the name of our tournament but I was nowhere near skilled enough to pull off something like that elegantly. So I left the task to a close friend and artist of mine "Kyoka" who did a handful of mockups until we decided on the final design.
With the new name in mind, I set out to come up with a new logo to replace the old "Did That Just Happen" stylized text. I came up with the simple solution of editing the text of the existing Super Smash Bros Ultimate Logo to read the name of our tournament but I was nowhere near skilled enough to pull off something like that elegantly. So I left the task to a close friend and artist of mine "Kyoka" who did a handful of mockups until we decided on the final design.
Then I moved on the making the new overlays. The layout more or less stayed the same, but I completely overhauled the aesthetic of the webcam overlay to be more slick and fancy with transparency and a scrolling background; an effect I achieve in OBS itself. "Esca" a friend of mine and a frequent attendee of the tournaments offered to design a much more sleek game overlay and the images he sent over only required minor tweaking to get them to work with the OBS layout. To tie it all together, I made a new transition animation inspired by how the Smash Bros logo forms itself after the title cinematic in the game. The end product with everything in OBS is by far the best production setup I've made yet.
While this certainly was worthy of the "ultimate" moniker, it was missing one feature that I had avoided implemented since I first overhauled the Smash Bros streams: animated text transitions. Ready to tackle the challenge, I searched online for the solution and stumbled upon a guide made by OBS forum user "Jaxel." Unfortunately for me, it was seemingly dated, used javascript and css, and was implemented in a way that it was seemingly only compatible with a paid program used for editing the needed files.
At first: I was defeated. I had prided myself on having made everything from the ground up, and while I didn't mind having friends who are much more talented at art that I am help with the assets, I was already a tad miffed about using someone else's program about having to use someone else's program to change the text on my streams and while the cost of the premium program would be negligible, I felt that I would compromise the "hand made" quality of the stream (at least in my eyes). So that was it then. I resolved to rekindle my familiarity with HTML, Javascript, and CSS to finally create my animated text transitions.
My journey started out in Python. It had been a while, but after brushing up on the tKinter library I churned out a basic program that I could use to edit the text files that OBS could read from. As it turns out it wasn't that difficult, and while it certainly didn't look as fancy as what I had been using before it did the exact same thing.
Next the hard part: figuring out how the animations were even implemented in OBS. At first I thought I would need to make a custom plugin but after watching the video included with Jaxel's guide I found out the solution was even cheekier: his entire overlay was a webpage! Even now I think that's ingenious and explains why Javascript was needed. Following his sample code, I noticed that he used some methods and a library that I had never seen before: XML data requests and something called "minified.js." The former, XML, being a kind of data structure, and the latter, minified.js, a library that included some methods that made animations easier.
With that knowledge, I then retooled my Python program to create and edit a single XML file and used a grid to format the pop-up window more neatly. Long programming story short: I made an HTML webpage, that has Javascript which reads the data from the XML file; if there is a change in the data, the appropriate text will be changed and trigger an animation with the text being dynamically scaled to a text area which I assigned. My final html document ended up being vastly different from the one in the guide since my needs were a bit different; not to mention that the guide didn't use any kind of text scaling so I needed to tool that in on my own. But thankfully after creating one overlay, making the rest was just as simple as moving elements around and assigning different references.
At first: I was defeated. I had prided myself on having made everything from the ground up, and while I didn't mind having friends who are much more talented at art that I am help with the assets, I was already a tad miffed about using someone else's program about having to use someone else's program to change the text on my streams and while the cost of the premium program would be negligible, I felt that I would compromise the "hand made" quality of the stream (at least in my eyes). So that was it then. I resolved to rekindle my familiarity with HTML, Javascript, and CSS to finally create my animated text transitions.
My journey started out in Python. It had been a while, but after brushing up on the tKinter library I churned out a basic program that I could use to edit the text files that OBS could read from. As it turns out it wasn't that difficult, and while it certainly didn't look as fancy as what I had been using before it did the exact same thing.
Next the hard part: figuring out how the animations were even implemented in OBS. At first I thought I would need to make a custom plugin but after watching the video included with Jaxel's guide I found out the solution was even cheekier: his entire overlay was a webpage! Even now I think that's ingenious and explains why Javascript was needed. Following his sample code, I noticed that he used some methods and a library that I had never seen before: XML data requests and something called "minified.js." The former, XML, being a kind of data structure, and the latter, minified.js, a library that included some methods that made animations easier.
With that knowledge, I then retooled my Python program to create and edit a single XML file and used a grid to format the pop-up window more neatly. Long programming story short: I made an HTML webpage, that has Javascript which reads the data from the XML file; if there is a change in the data, the appropriate text will be changed and trigger an animation with the text being dynamically scaled to a text area which I assigned. My final html document ended up being vastly different from the one in the guide since my needs were a bit different; not to mention that the guide didn't use any kind of text scaling so I needed to tool that in on my own. But thankfully after creating one overlay, making the rest was just as simple as moving elements around and assigning different references.
The final piece of the puzzle was to add a green overlay around where the text boxes on the overlay would be. That way when they slide in, they aren't drawn on top of the overlay and are instead removed with the chroma key.
It's been a blast casting for my local competitive Smash scene, and I've had a ton of fun streaming with the Game Dev club so far. Hopefully all the effort put in by everyone who helps me put on the streams-artists, casters, and friends included-ends up creating an exceptional viewing experience!
It's been a blast casting for my local competitive Smash scene, and I've had a ton of fun streaming with the Game Dev club so far. Hopefully all the effort put in by everyone who helps me put on the streams-artists, casters, and friends included-ends up creating an exceptional viewing experience!