StreamerBot Credit Roll Setup

what's happening all you cool cats have you ever wanted to thank everyone that participates or supports you while you were streaming I have and do but for some of you out there with more than 10 to 15 people to name off that might be a little hard or maybe you just can't remember every single person that contributed to the stream in some fashion well then having an onscreen credit reel might be just the thing for you listing off all of the people that followed subscribed cheered the most spent the most gave you a kidney I don't know in this video we're going to do a deep dive into setting up a credit reel so you can have something to effortlessly thank your supporters after every stream it is a lot of information to cover but I'm going to do my best to go through all of it in a smooth well-paced manner so that it's easy to understand and and follow first thing let's get the necessary files to make this work there are too many variables to this for them to have baked everything directly into streamer bot allowing for simple box checks and information requests so if you click the link in the description below it will download the browser Source link needed for OBS to receive the information to populate your credits the CSS file needed to change the style of your credits and the J a script file to change the information's headers scroll speed looping duration and more all of this is courtesy to Lifesaver who is absolutely fantastic and just did a Sailor Moon cosplay for his birthday that I can never unse if you would like to show him some support for doing all of the heavy lifting on this one I have left his link to his Twitch in the description below if you are familiar with coding in any fashion you'll be right at home home in this and know how to adjust more than even I am going to cover in this video or even be able to skip most of it and just go off on your own and do your own thing for those of you watching that are not familiar with coding don't worry I'm going to walk you through everything and even give you some tools to help you with uh The Styling of your reel after you download the files place them somewhere you will not lose them for me I put them in the same folder I keep streamer bot in and added streamer bot to the beginning of the folder name so that it would be easy to find again if I need to all right you ready to go yeah you are cuz you're amazing you're an amazing individual detective/genius and nothing can stop you all right getting us started we're going to set up our browser Source inside of OBS so open OBS create a new scene name the scene something to do with credits like uh credits I I'm not kidding I just thought of that I actually had it different I'm never mind anyway name it something that makes sense like credits credit reel credit roll roll credits whatever you want really because it doesn't matter name it JoJo's hobos I don't care inside of your new scene at a browser source and name it credit real or again whatever you want because it doesn't matter at all but if you do name it credit reel you won't have to change something further down the line we'll get to that later name things whatever makes sense to you and you're comfortable with that's really all that matters in the browser Source properties change the resolution to whatever your canvas resolution is and then if you need to you can rescale this later next tick the local file box at the very top and then click the browse button and locate the index.html file in the folder that you just imported from the description below okay that's it we're done congratulations all right no I'm kidding we're not we're not done uh next thing we have to set up some stuff inside of streamer bot so go ahead and open up streamer bot so we can set up a websocket and what information we want the credit reel to pull from twitch at the top of stream rbot go to the servers SL clients tab which will open to the websocket server Tab and tick the auto start box at the top and then click Start server after that click the settings tab and then click the credits tab this is where you can choose what information you want shown in your credits so tick any box that you want to grab information from Once you have everything you want selected ticked just adjust the auto reset time to something outside of your average stream duration but not too long that it won't refresh for every stream okay that's how we get the uh credit reel to thank everybody from that day's events good stuff that's the end of the stream robot setup for now see you got this it's easy we're just we're going got it and now that you're feeling all confident and comfortable let's destroy that comfort and start with uh messing with some code shall we yeah no I'm kidding you got this I got you and you can do this I believe in you in this demonstration I'm going to show you how to set this up using visual studio code because it is the best tool for things like this so if you want to grab that tool I have left a link to it in the description below however if you do not want to grab that and want to just use these files using uh notepad++ or notepad or something that'll work too it just makes things a little trickier in the uh color picking department but that isn't a big deal and I will also provide something to help you out with that as well first let's set up the Style by opening the style.css file from that folder you imported and before changing anything in here I would suggest duplicating this file to another location on your computer in case you mess up and don't remember how to change it back safety first the first line is the font link this code uses Google fonts so if you want to change your font you can go to font. google.com to browse whatever fonts they have available I again have left a link to that site in the description down below trying to make it all easy Once you find a font that you like the look of in the URL link after where it says family equals that's where you will type the name of that font so for me I am using archival black and I type in archivo plus black anything with two words in the name you're going to put a plus sign between those two words if it's just one word for the name of the font you just just put that word there if it's two words first word plus sign second word follow I hope so if not I'm sorry that's the best way I can describe that then in the wrapper section where it says font I changed it to also say archivo black you do not need to put a plus sign in between the two words in this sector you can play around with this and find a font you like or leave it on the default if changing it is too much unnecessary work for you I understand I'm not the best at describing the font stuff maybe so if it's easier for you to just leave it what it's on have at it I won't hold it against you to make it bigger and Bolder make the number at the end of that URL at the beginning bigger for the opposite make the number smaller so I changed mine to 400 up in the top line and then down where it says font in the wrapper section it is 440 PX over one to make it Bolder and if I change the first number to say 100 in both areas the font becomes much smaller thinner less bold saaby so again you may play around with this to get the desired font you are going for anytime you make a change in the code you can hit the refresh button on your browser Source inside of OBS and it will update and show you what you have changed making it easier for you to decide what you want to do next the color of your text will be set in two places one for the headers and one for the names of the people the names Color Picker is in the wrapper section and it says color go figure if you're using vs code you can simply hover over the RGB area and choose your desired color if you are using notepad or notepad++ to edit this you want be able to do that so I have included in the description below a link to an HTML color code site where you can see the RGB values of colors listed so you would just go to this site and select your color look where it says RGB above the color box and then copy those three numbers and paste those numbers in between the parentheses the way you see them on my screen see told you I got you covered yeah the header color setting is located under job where it says color and again you can either simply use the RGB selector and vs code or the HTML RGB tool Linked In the description the last thing we want to set up in the style department is our fonts sizes for the headers and names this is again in two locations job is the header font size so where it says font size change it to make it bigger or smaller the name's font size is under name so where it says font size change the number to get your desired size again you may adjust the sizes and then refresh your browser to see how big or small your font is becoming as you edit it making it pretty easy to decide what you want to do that wasn't too hard right I hope all of that made sense and I hope you got through it okay if not you know just throw this in your VCR and hit rewind as many times as you need to to catch up on uh any information you missed and again if this is too much or stressing or confusing you can always just leave all of this stuff on the default settings that are already there and it it'll still work you'll be fine okay cool now for a less daunting and stressful possibly coding experience we are simply going to change the names of our headers and set how many times this whole thing plays it's not challenging at all you you've done most of the hard stuff now we just go into something a little more chill and easy I hope I have made good on my word that this would be smooth and well p paste if not leave a comment below telling me how much I've failed you so I can apologize I'm very sorry ready to continue good all right open up the script.js file in either you know notepad notepad++ or vs code whatever you're using and go to the section where it says headers this is a list of all of the fields that that we chose to pull information from inside of stream robot and the names of the headers that will appear inside of OBS the only things you need to change here are the segments in quotes after the word title so it's fairly simple and self-explanatory change all of these titles to something that fits your theme your style your community and [Music] then that's that's that then once you're finished renaming all of them go down to where the animation settings are it's uh it's where it says duration equals the very last number after the two 100 seconds is the number you want to change to affect the scrolling speed of your credits so to make the credits roll faster make that number smaller and then to make them scroll slower make the number [Music] bigger this much like everything else in this tutorial is a matter of personal preference but if you want something moderately paced I would suggest UH 60 or 70 you can leave it on the default if you have a larger community and a ton of names populating your credits go with something around like 40 or 50 35 it it'll scroll fairly quick that should work out for you a little way below the duration stuff you will see iterations Infinity this is how many times the credit role plays while it is set to Infinity yeah you guessed it it just Loops over and over again playing forever if you only want it to play one time delete the infinity and replace it with the number one alternatively you may change it to whatever number you choose so if you want it to play three times set it to three so on so forth you get it I know you do I know you do I trust you lastly in the JavaScript if you don't have information to display so you can test this and see how everything looks while you're setting it up you can change where it says get credits to to test credits at the very bottom and it will populate the browser source with random information to display inside of OBS so that you can see what you are doing and that that you know that'd be helpful I might have wanted to lead with that in the beginning of this video I'm sorry after you populate your browser source with random test information and are able to actually see stuff if you haven't had data this entire time you can now go back and you know play around with the font and font sizes and colors and refresh your OBS browser source to make sure it looks good cuz it's very [Music] helpful ah me I should have put that in the beginning of the video but I didn't and I'm not not going to I'm sorry all right now for a real cool down we're going to set this up to automatically roll the credits when you switch to your ending screen or on your gaming screen if you just raid out from there when you finish streaming because you know why manually trigger this when we can have it automatically play I mean that's the goal right so open streamer bot and go to the actions tab and create a new action and name it uh credit controller or credit control or something that makes sense okay set the group to credits so you never lose it I have a lot of stuff inside of stream bot I can lose things in the triggers box to the right click and go to OBS and click OBS scene changed set the scene to whatever your end screen is named and then that will trigger your credit real whenever you go to that scene okay next right click again go to Twitch hover over raid and click raid send now it will trigger the credits when you decide to rid out so as soon as you click the the send raid button and the raid timer starts your credits will start to play on screen okay fantastic next in the subactions box below right click and go to OBS hover over sources and click set Source visibility State set the scene to whatever you named your credit rle scene in OBS and the source to whatever your credits browser source is named and then click okay rightclick again and go to core select delay and set the delay to 300 milliseconds then rightclick again go to OBS and click raw I have left the code you need to paste into the raw in the description below and all you have to do is set your Source name now way back when in the beginning of this video when I said if you leave your browser Source name the same as what I have it you won't need to change something down the road this is where you wouldn't need to change something if you did change it just just change it in the Raw code where it says credit re just change that to whatever your source's name is this code is a browser Source refresh code since there is no built-in trigger inside of streamer bot to refresh a browser Source I figured I would set one up next rightclick your delay that you set and duplicate it and then set it to something longer than your credits will run so depending on the size of your community or the duration you set the credits to roll you will want to change the number to something higher or lower you know yeah it makes sense you get it you should be okay with setting it to something around what I have Minds set to which is 35 seconds or a 35,000 millisecond delay if you do end up needing to increase it you can obviously do so and then uh lastly duplicate your Source visibility State and then change it to Hidden instead of visible and click okay and then check that out you finished you freaking Trooper seriously that actually is it I know I said that you were done a couple times in this video and you weren't but that really is it that's the finale we're done I hope you found this tutorial helpful and all I ask in return is that you give me your soul no I'm kidding I'm just kidding but if you did find it helpful please pretty please hit that like button you know hit the likey likes all the likes I don't know what I'm doing with my hands ah stupid seriously please click the like button if you found this video helpful and the information was good and I didn't suck at this and I didn't lead you astray and just destroy your hopes and dreams and waste your time and if you'd like to be extra awesome you know and maybe stick around in the future to learn more things or tell me how much I suck in the comments maybe hit that subscribe button it means a lot to me it really does I appreciate every single person that clicks it I'm trying to hit uh trying to hit that thousand subscriber goal this year for science yeah science if you have any questions comments or notes please leave a comment down below and I will get back to you promptly alternatively you can always come by a live stream on Twitch where I can give you live one-on-one support with any issues you have I go live every Monday Wednesday and Friday at 11:00 a.m. Central except for this upcoming week February 13th through the 17th of the Year 2024 thank you all so much for watching I hope this was helpful I hope you had fun I hope you learned stuff I hope it looks great on your stream and you enjoy it and I hope you all uh you have a great day take care of yourselves stay safe I look forward to seeing you in the next video yeah all right for real I'm out

Channel: Geefbird

Views: 1,038

Keywords:

Id: HQnrinJ4g1c

Length: 23min 34sec (1414 seconds)

Published: Sun Feb 11 2024