I Made a FREE Magic 8-Ball Widget to Use On Your Live Stream!

whenever i stream or watch a stream i want it to be as interactive as possible and a fun way to add some interactivity is with a magic eight ball whether you're using it as a channel points reward or just as sort of a whenever thing your viewers can ask all sorts of fun questions like is chris gonna lose this game is chris secretly a murderer will chris die alone but the problem is that your viewers just have to take your word for the answers because of how gravity works if you try to show it to the camera the dice floats to the top so i made my own custom 8 ball widget to use on stream using a little bit of blender and a lot of javascript it looks something like this [Music] and the cool thing here is that you can easily add as many custom responses as you want by modifying a simple text document all you have to do is download the files from the discord link in the description and follow along and if you like these kinds of fun widgets the absolute best way to say thanks is to share it with your friends and hit that like and subscribe button and ring the bell for more cool stuff in the future also let me know what you think in the comments down below this has been a really fun introduction to javascript for me and i definitely want to make more of this kind of thing going forward also if you want to customize the 8 ball animation with your own logo and colors i'll throw the blender file up on patreon link in the description and cover how to make those changes later in this video all that being said let's get started my name is chris folia i'm your stream scholar welcome to stream school things first let's talk about how to bring this into obs for those of you that just want to download it and use it as is without making any sort of additional changes so when you download it from this discord you're going to get a zip file titled oracle 8 ball widget dot zip and you're going to want to put this somewhere on your hard drive where you can easily access it from obs once there we're going to need to extract this so i'm going to go ahead and right click go to extract all that'll bring up this windows extract dialog box and here under the file path you can go ahead and erase the oracle 8-ball widget text if you leave that there you're going to get an entire extra layer of folders and that's honestly just kind of annoying so here i'm going to go ahead and click extract and that'll give us an oracle 8 ball widget folder right next to our oracle 8 ball widget dot zip at this point if you really want to you can go ahead and delete the oracle 8 ball widget dot zip file so here i'm going to double click to go into the oracle 8 ball widget folder and here you'll notice i have an 8ballpage.html that's the webpage that we're going to bring into obs as a browser source then we have a fortunes.js which is really just a text document that lists out all of the different responses the eight ball can have but we'll get to that in just a little bit then under the assets folder we have the graphics that are necessary for it to work and a couple scripts that make the entire thing work just make sure that these stay in the exact same location relative to the 8ballpage.html so it knows where to find them so to actually bring this into obs we can hop over to obs right here we can go down to the little plus button to add a new source and here we're going to want to add a browser source you can call this whatever you want i'm going to call mine 8 ball then i'm going to click ok and that'll bring up the default obs html page under this dialog you're going to want to click the local file check box that'll let us grab a webpage from our hard drive rather than from the internet here i'm going to click browse and you're going to want to find wherever you stored your 8ballpage.html i'm going to double click on it to bring it in then we need to change a couple more things before we're ready to go the first one is we need to set the width to 1080. then we need to set the height also to 1080 to make a perfectly square web page source then at the very bottom here you might have to scroll down you also want to make sure shutdown source when not visible is checked and you want to make sure refresh browser when scene becomes active is also checked these two are really important these make it so when you hide and unhide the source the eight ball animation will play over again and you can just unhide it and hide it hide it and unhide it as many times as you want to use the eight ball as many times as you want so after all of these settings look the same as mine you can go ahead and click ok and that'll bring in the 8 ball animation it'll start playing and here you can scale it you can move it around and do whatever you want with it it'll show a random eightfold response no way in hell then it'll animate out so to reuse this you can hide the source then unhide it again and it'll play through and this time it'll choose a different response but to me personally hiding and unhiding this while you're streaming in obs can be a little bit tedious so personally i like to use an elgato stream deck for that so to set this up with the stream deck i'm going to go ahead and hide the source and i'm going to bring up the elgato stream deck software so under the stream deck software i'm going to go ahead and make a new multi-action that's under the stream deck category so i'm going to click multi-action drag that over to a new button and as soon as i release my mouse it's going to bring us into that multi-action so under the multi-action we're going to want to add an obs studio source i'm just going to drag that to the list and here just make sure you have the right source under the right scene selected this is all pretty self-explanatory and then finally in the upper right hand corner you want to make sure this is set to activate so it will turn on the 8 ball source but this i'm going to call 8 ball activate it's always good to name things because right now i know what this does but if i come back to this three weeks later and take a look at it it's nice to have a little reminder so then we want to delay for a certain amount of time you can find the delay function under the stream deck drop down so i'm going to click that drag it over and the magic number here is going to be 13 500 milliseconds then finally we're going to want to add another source at the very end here it's going to be the exact same 8-ball source but instead of activating it now we want to deactivate it i'm going to call this 8-ball deactivate again the naming isn't 100 necessary it's just nice so you can figure out what you were doing later so now if we run through this logically we can see it's gonna activate our eight ball source it's going to wait 13 500 or 13 point milliseconds or 13.5 seconds then it's gonna deactivate it or hide the source so in action if i go over to obs and i click the button it'll unhide the source it'll play through it we'll get a random response from our list outlook good hell yeah then it's gonna animate away and if you pay attention to the little eyeball down here you're gonna notice that it's automatically gonna hide when it's done playing which is perfect and extremely convenient then we can do the exact same thing over again as many times as we want now for the fun part let's say you want to add your own custom responses to your 8-ball widget well that's also pretty easy to do for that we're going to want to modify the fortunes.js file and for that you can use pretty much any basic text editor you want but i'm pretty sure almost everyone is going to have access to microsoft windows notepad so we're going to use that for the sake of this tutorial so i'm going to go ahead and right click fortunes.js go to open with and here i'm going to select notepad but if this isn't an option for you you can also open notepad the old-fashioned way by clicking the windows key on your keyboard typing notepad and it should be the very first item on the list so here i'm going to click on notepad go to file open and here you're going to notice that it's not showing either my 8ballpage.html or fortunes.js this is not a reason to panic by default microsoft windows notepad only shows txt or text documents so to fix that we can click this drop down right here go to all files and here we have our 8ballpage.html and our fortunes.js i'm going to select fortunes.js click open and here we have it our beautiful list of eight ball responses and i know this is a javascript document and that sounds a really scary and intimidating but really all this is is a javascript array or if you want to think about it in simple terms it's like a list it's titled fortunes and then it's all of these different potential options so then in the 8 8ballpage.html i wrote a script that looks for a list named fortunes it randomly chooses an item from it regardless of how long or short the list is and it uses that choice on the 8ball so to change this all you have to keep in mind is that you want to keep the formatting the same and by that i mean it starts with a square bracket it ends with a square bracket and semi-colon then every single item on the list is in quotes and it's separated by a comma i'll zoom in a little bit so you can see better so there's the quoted item there's the comma and you'll notice it's like that on every single line except the last one doesn't need the comma so let's say you want to add your own custom response to this now that's really easy to do i can just select after one of the commas i can hit enter on my keyboard hit tab to tab over just to make it look nice and clean i can type a quote and here i'm going to say chris is amazing i'm going to add an end quote and here i'm going to add a comma then if i hit file save i now have an updated list that my 8 ball widget can pull from but let's say you want a really decisive eight ball with only one option to choose from well you can get pretty creative with that so i'm gonna go ahead and select everything except for the first quote item i'm even gonna get rid of the comma and here i'm gonna type in something crazy and you can you can get pretty creative with this the longest one i've tested is my name is nicholas cage and i'm going to steal the declaration of independence so now if i hit file save go back to obs click the little button it'll pop up it'll reveal our message and you'll notice it's a pretty interesting one i wouldn't recommend going much longer than this though so now let's say we want to add a second response to this so first i'm going to change the first response to something else just so we notice that the text document's opening so i'm going to say this is the first then i'm going to add a comma i'm going to add a new line tab over add some quotes and i'm going to say this is the second add some more quotes and notice literally all i have to do is just make sure the formatting stays consistent brackets items in quotes separated by commas i'm going to hit control s to save pop back over to obs play it through and here you'll notice we get one of the two options this is this we got the second one wow we had a 50 50 shot that's pretty cool so just like that it is that easy to modify the text document if any of this was scary or confusing or intimidating to you please please don't hesitate to hop into the questions and help section on the discord link in the description and i will be more than happy to help you out so now let's say you're a patron you downloaded the blender file from patreon and you want to add your own logo and own custom colors to this 8-ball widget so that's a little bit trickier but in my opinion it's totally worth it so let's go through it so when you first open the blender file the absolute very first thing you want to do is come up here to the upper left and click on the shiny circle button that's going to put this viewport into rendered preview mode so you can actually see what it looks like as you're working on it so the first thing we probably want to do here is replace your logo here with your logo so to do that you're going to come over here to the right where it says logo you're going to click on it notice how it's highlighted in orange now that means it's selected then you're going to come down to the materials panel and you might have to scroll down here some but you want to find where it says your logo here.png you're going to click the x next to it then you're going to click open and here you want to find your logo now for this step you're going to need to create a solid black and white version of your logo look at my two examples here the stream scholar and the fish logo notice how most of the image is white and then our logo makes up the black negative space that'll create that nice classic magic 8-ball look so again you can look at these two examples or if you want some tips and tricks on that you can hop over and ask me on discord as well anyway i'm going to select the stream scholar logo i'm gonna hit open image and that'll come in just like that you'll notice mine already fits pretty well but if you want to change the scale of it i did add an easy control for that so you can select this little circle right here that has the cross going through it you can move your mouse out a little bit hit s on your keyboard for scale and now if you move your mouse in and out that'll scale this little sphere up and down which will coincidentally scale the logo up and down so i'm gonna leave mine somewhere right around here and for that i'm going to left click on my mouse to set that in place then the next thing we want to do is probably change this glow color around the eight ball so my channel colors are sort of like pink and purple so to change this i'm gonna come over here to the right click on glow color make sure i'm on the materials panel again then here i'm gonna change the color to a nice pinkish purple side note here if you don't want the animated glow on your eight ball you can also get rid of it by changing this color to solid black and then it'll just completely go away i personally want this glow here so i'm gonna make mine a nice pinkish purple so the next option here is the reflection color and that is the environment that the eight ball is in so you notice that the eight ball has some nice reflections on the sides of it that just makes it look like it's a nice shiny black plastic like a normal magic 8-ball would be so we can also change the color of that so i'm going to click on the reflection color text make sure i'm in the materials panel and here i'm going to change my mind to a little bit more of a pink like so you can make this whatever color you want the green actually looks kind of cool too but i'm gonna make mine a nice pinkish purple to match the glow around it so the next two options are to change the plastic color plastic color one is going to change the black areas i would personally recommend not changing these unless you really really want to because i really like the classic look of the magic eight ball as a black and white thing but just know that the option is here if you really want to make this a different color i'm personally going to leave mine as black then plastic color 2 changes the white areas which is exactly the same as the black one but opposite i guess and again i'm personally going to leave mine as white just know that that option is there if you really do want to change it so after you have this customized and looking exactly the way you want the next step is going to be to export the transparent webm animated video file so for that we're gonna go up here to the printer icon i'm going to click on it and i already have all of these settings set up exactly how they need to be to output a transparent webm video file all you have to do is select this folder right here the little folder icon and you're going to want to find a place on your hard drive to put this webm file and this needs to be named something very specific when you download the template the correct name should already be in there hopefully hopefully i can get that working but if not i'm gonna flash the text up on screen what the name needs to be it needs to be eight ball with a capital b animation dot webm the reason this name needs to be exact is because we're going to replace the webm file in the assets folder of the eight ball widget uh when we're done with this so then i'm going to hit accept and really important to note here is that this file the webm does not exist yet this folder is just telling blender where to save the webm when you tell it to render rendering is a much lengthier process than this all we but to do it all we have to do is go up to the upper left where it says render click on it and click render animation that'll pop up this window right here and then it will painstakingly slowly start to play through the entire animation and what's that what that's doing is it is creating each individual image or frame of the animation and that webm file will not exist in completion on your hard drive until this has completely played through the entire animation generating every single individual frame or image of the video file now i'm not going to sit here and make you watch and wait for this i already previously rendered one out but just know that this will take a while and it might be a good opportunity to go dr go grab a glass of water or go grab a snack or something anyway i'm gonna exit out of this this might take a second here and then we're gonna move on to step two of the customization which is the text backdrop so wait for this to finish canceling out escape out of that and i'm gonna go up here to the upper right hand corner of blender where we have our collections and i'm going to uncheck the eight ball animation and i'm going to check the text background so the reason we have to do this is because on the html page uh the entire animation and widget is made up of three layers we have this background that the text appears on we have the text itself which animates on using javascript and then we have the eight ball animation the reason it's in three layers is because if the eight ball animation accidentally overlays the text or something i don't want the text to show up on the outside of the 8 ball that would just look awkward and unprofessional so anyway to change this all we have to do is select the text bg color here go down to the materials panel and i'm going gonna change mine to a nice purple or something maybe something somewhere around there then i'm going to go to render render image note here that we do not need to render out the entire animation for this we just need one still image so again that is render render image that'll render out the still image and then we go to image save as on the window that pops up and we're gonna save this specifically as eight ball b g dot png i'll flash the text bigger on the screen but it's eight ball with a capital b and then capital b capital g at the end a ballbg.png i'm gonna save that image and now that we have both of those assets rendered out the webm video file and the 8 ball bg let's go ahead and replace those on the widget so to do that i'm going to bring up two copies of my windows explorer you don't necessarily need to that's just the easiest way for me to illustrate this but here we have our new assets and over here we have our oracle eight ball widget folder so on this i'm going to go to the assets folder then i'm going to select both of my new things the webm and the png right-click copy then under the assets folder over here i'm going to right-click paste and when it asks you if you want to replace these files the answer is yes so once those are replaced once they've copied over to the eight ball widget assets folder we can hop back over to obs i can hit the little eight ball button on my stream deck it'll pop up and now you'll notice it's using my stream scholar logo and the nice purple haze and the purple background is this cool it is certain so that's pretty much all there is to customizing it i'm gonna let that play through one more time just because i think that's really cool uh if you all have any questions on how to do any of this on discord or anything uh for you patrons that do have access to the blender file just hit me up on discord i'm always happy to help i'm looking forward to seeing what you all come up with this and that's all there is to it hopefully at this point you have a cool 8-ball widget to use on your stream with your own custom responses if you like these kinds of free widgets make sure you hit that like and subscribe button and ring the bell to stay tuned for more now i'm currently on an indefinite break from streaming but if you want to catch me the next time i do go live or just keep up with me in general make sure you go subscribe to youtube.com oraclefish as well anyway until next time my name is chris folia i'm your stream scholar and quest is out you

Channel: Stream Scholar

Views: 937

Keywords: stream scholar, stream school, streamscholar, chris folea, stream tutorial, free stream widget, magic 8 ball, free magic 8 ball, custom magic 8 ball, customizable magic 8 ball, magic 8 ball animation, magic 8 ball stream widget, stream widget, free magic eight ball, free magic eight ball widget, magic eight ball widget, magic eight ball, free stream template, free stream graphics, blender, blender 2.93, javascript, free stream popup

Id: 1ncTxXGhyq0

Length: 21min 50sec (1310 seconds)

Published: Sat Aug 07 2021