Champion of the hill game for streamer bot!

in this episode a champion of the hill game for some fun with your viewers where the victor will fight to become the champion of the hill [Applause] hello and welcome to stream robot bytes where i cover how to set up and to make the most of the awesome streamer bot there is one video per topic to make it easy as possible to follow and find when relevant sample import code will be provided to make it even easier for you to get started and add functionality to your stream so let's get started with the topic for this video so to set this up in obs we just need to add a source of a browser type to all the scenes that we want to run the game in so we're going to call it champion of the hill and copy that because we'll need that name in a moment in stream robot the url just about blank which means it's going to be a blank browser source until we need to use it the size the full canvas size 1920x1080 if you do have a different size do set it to this and resize the browser source to accordingly you'll probably want to control the audio via obs so do select that option and be sure not to select the local file option here as well then underneath the advanced audio properties for the champion of the hill i suggest you use mute monitor only mute output option here and then you can control the volume of this game to fit in with your stream levels there are a few steps to set up for streaming bot for the champion of the hill game first we'll start by copying the import code in the description below go into the actions tab on the left hand side right click select import and paste the string in there you can have three importable actions it's also going to add in a queue for us so only one game can be run at a time so once we've imported those we need to configure them it's actually very simple to set these the fire message doesn't need any changes the set fight reward will we'll need to point that at any reward we'll create in just a moment and change the text if you want there to start fight we need to point it at the browser source that we have in the bots so we can select a scene and source that we have the url is already there in place again set the scene and source it doesn't matter if you have the browser source in multiple scenes as long as you pick one that'll update the browser source in all the scenes that's why we do it this way next we'll need to create a channel point reward for this we'll just call it champ in the hill for now first time we run it it's going to change the the winner and then in the prompt i want to be champion of the hill start this reward to have a chance to be the best and be sure to join with exclamation mark join after it started so this is going to kick off the game now the cooldown you might want to do something like on our third 3600 but for now we can do six minutes and that's going to then disable the reward we can give a points amount to this it's going to be appropriate for your stream you could do a command on this with a cooldown as well global cooldown if you wanted to run the game without channel points but note if you are doing that we all need to change one of the actions so that's gonna start start fight now i've got a channel point reward added we can go into the set fight reward and we need to point it at the reward here champion of the hill because when they win it's gonna say the winner is the champion of the hill now this these commands actually get triggered by the webpage and then just optional um part later i'm going to explain through the web page script and how that works we won't be explaining through streaming or bots that's why i'm doing it now so start fight just enables the browser source waits for the fight to be finished and then disables that fight messages are used by it to just send messages to chat and the reward is done at the end and that's zoom bot set up and so now to test we just trigger the rule board see the road loading and the battle begins now it takes 60 seconds to actually give people and chats an opportunity to join every 15 seconds there's a drum beat there to get the interest to try to get people to join in let me simply join in with that it's going to pick a random side to put out our picture from that user and jump in so it's going to get the spot accounts joining as well it is limited one per person so if you try and join in multiple times it's easy to ignore those and just take one entry per person so once the first 60 seconds have passed entries will be closed off so you can't enter any more and it's going to signify that by the fight is coming to an end then over a period of 10 seconds the losers are going to be ejected out from the hill battle is going to die down and we're going to celebrate new champion of the hill and that's the optional part of explaining how this all works so we have a very basic html page noting that we've got some credits in there since it was inspired as a birthday gift which is actually a pillow pile fight so it's different so do check out ostrogothia for that uh thank you villathia for the artwork and uh in this one um we do appreciate it um the sounds from freesound.org are creative commons zero license so you don't need to attribute but i feel it's fair in this case to attribute them so that's where you can get hold of them you can always edit them as well we have a title which i've not updated that doesn't really make a difference we have a reference to an animation library between max we have a container where all the works being done and we link to our script we also have the grassy hill which is obviously where the the uh the hill we're fighting over here and we also have a style so let's go to style first so style here is doing very little setting no margins full height width we are using a pillow pile um element which is for the grassy hill so it centers it puts it to the full width of the page we are using the falling elements here so this is actually reusing some css from the um the remote rain and visual look code and on to the uh the meat of this again referencing in this because it's where the main code is we define the websocket we're connecting to we have some variables here so we're using multiple audio sources because you want to play multiple sounds at the same time i've got effectively an array of audio sources that we use we'll explain that in a moment but function connect ws or whatever connected to the websockets or trigger the connection to websites through that function call we put a request in to to look for chat messages now this is so we can look for the joints that's that's the important thing here so we will get those on so when we get response we get the old message function fired which then passes the event data we pass that we check and look for join and then we trigger the add fighter with the display name so if someone does an exclamation mark join it's triggering this function every time and what we do in here is we get a lowercase version of that we then create an xml http request and this is basically once we've got the response we'll run this function and you'll see a bit further down here this is where she send it so we'll go down to this line in a moment so when we get the response back we log that we then set a variable add to fight true because we need to see if the user's already been added so we'll check the document to see if we match attributes that's been defined as a user and if it has already been added we'll flag that variable to false [Music] so we'll only do this extra work if the add to fight is true so the default state so we don't have more than one entry we then get the container we're going to inject everything into get the width and height of the window we will then create a new object new div object so that's going to basically be the viewers object that we're going to manipulate through the fight we're going to set the user as a name so we can then search for duplicate later we've got a state as well whether it's alive or dead and of course we started live we increase the total number of diffs so we can give a unique div id the url in the background is a response text so this is going to be the request we send on xml http further down here go back down here again is to get the avatar image location so when we get the avatar image location we're going to inject that back into here background of that so it's going to fill the object size which is centified by 75 we're they integrate two random numbers and one's going to be if we're going to be entering onto the hill from the left or right hand side and the second one is going to be deciding which weapon so there's math random times two plus one it's going to give us one or two so one is on one side and two is on the other side and seven is going to give us seven different weapon choices so we then look at the the weapon choices and then we'll put them on the correct side of the avatar so the weapons facing towards the hill itself we add in the inner html so this is what's contained within the object that we're moving around so the object which is the player avatar we're going to put another image there but we're transforming it rotating the weapon moving it to a particular location so it's it fits into the um fits into the correct location where you want the weapon to be and if it doesn't match one it's going to be two it's the other side the weapon needs to be faced a different location so we repeat that seven times to know where that is and then we look at okay i'm going from the left or the right so we created this object but we actually haven't set where it starts and we haven't started where it's going to go so with tweenlight.set on the div object we can say this is the class of the object you want to actually finally add to to the actual page so we create an object we've not signed it anywhere yet this is where we want to position it so off the left hand side for case of one otherwise we move on to the far right hand side in case of two and the height to fit in to work with the hill and then we trigger an animation which we'll look into the animation left and animation right and then we'll append that into the div we also then upset seto timeout so after two minutes so it's 120 000 milliseconds we're going to remove the element we should be destroying the page after this and the way so it shouldn't be a problem but it's just good practice to clean up after ourselves and i said before we get the avatar image and go from there so these are the two animations that we use to place the avatars so starting from that side going up towards the pillow so between max use something.2 with the element we're passing in which is pass into the function taking two seconds we want to get to the point of um x which is the inner width so that's the full width of the page divided by two minus 45 because to offset it correctly so we're going to go to the middle of the page this is going to be the speed of the sine wave easing in easing out and it's going to start straight away we don't actually need the yoyo true that doesn't happen because we have no repeats so we could remove the yoyo true there then the y-axis now that's a little bit different because we want it to climb up the hill so with this the first 0.9 seconds because the delay here is zero we want to go up to 200 pixels off the bottom because inner height starts at zero and goes down so you want to get up to 200 on this point again yo doesn't matter because of that there power 2 is a more um it's easy in so it means it's going to increase slower at first and go up higher so this curve actually fits the slope of the grassy hill so at this point and 0.9 seconds in we want to do some random effect i want it to jump up a random amount to dive into the the the fight and the hill so for the next 4.6 seconds so six since uh 0.6 seconds is the time taken but we're delaying it for 0.9 so it starts after this one here you want to go to the inner height minus then 300 so it's another 100 pixels above in that time plus a random amount this randomizer function's a bit lower down that takes in a minimum minimum and maximum value and returns something within that range so it's going to be in between 450 pixels from the bottom or 650 pixels to give me a moment to work it out so over that that's the opposite section it's going to jump up a certain amount and then we're going to jump into the hill itself for the next 4.5 seconds and so the time taken for the first two months 0.9 and 0.6 is 1.5 seconds therefore the delay for the third y-axis movement and it's worthwhile noting these elevations will be happening at the same time as the x animation here which takes two seconds because 0.9 plus 0.6 plus 0.5 is 2 seconds so it's going to go down to in a height minus 150 which is going to be near the bottom of the screen so again we've got a easing ease and ease out to that so we'll jump down in a particular manner and that's going to put the fighter into position we also have the animation right which is the same animation here but uh we i left it separate just so we could control it differently should we want to next we're going to actually jump to the bottom and then we're going to see how this ties together to best explain things so at the bottom after all the functions are started we're going to trigger off the connect ws we're going to set timeouts so these are times after one second 16 seconds 31 46 51 and 56 seconds i'm gonna do a notify message to say how many seconds are left in the fight and how to join the fight so this is basically going to tell stream robots i want to use to send a message to chat for me after that time we call ws.close which is going to stop the connection to the bot now it will reestablish it to declare the winner but we need to close that connection otherwise someone could join the fight mid-fight and it wouldn't be fair it may also break it we have a start fight a horn sound near the end and we have a battle sound that starts as well and finally we have a loop so this goes through this loop 28 times also and with the delay we add up here we're going to call random weapon random weapon is the weapons you see fly out from the pillow pile as the fight's going on so let's piece that together from here random weapon we just talked about this so we get the container as before height and width again creating in elements so it's a very similar method to adding the fighter again random number of seven and depending on the results we set the weapon image and set the background size to that so instead of having the user's avatar in this this case as an image we're setting a weapon again we append it to the actual div itself to another random whether we spin it to the left or the right this time rotation so it's going to spin the elements either rotating clockwise to 180 or on the other environment if random is not one the other way and we'll throw we're gonna throwing it to the inner width so it's twice a bit so we're trying to throw it really far away and it's going to take seven seconds to do that or so either going left or right depending here and again the y we've got some random elements so it throws it in different directions and the ease is back to exact so you can search for these easing for the tween max libraries or gsap is the library name you're looking for but we're setting the path so we're adding it in setting the path and doing some cleaning up as well and onto the next function called utes so if this pretty much does what you expect it to it will get the id it'll find that object to be the element it's going to get a random position on the x axis and another random number rotation of that as well so if we get a rotation there we're going to be moving things spinning to one side and off to one side and spinning the other much like before and what's going to happen here again setting the animation because it's already been injected the element we have we're going to do rotation of rotation z which is set up here or here the y's always come the same level for the first four seconds and then we can drop it down on the white so it's going to simulate a bit like gravity is the theory there and the x is going to be the x value let's see the set here up by minus one so x is the it's uh in width times two or times five so it's going to be a varying amount of really far away from the screen so we can actually do a randomization just to control the speed you know a certain amount of time to take to move to those locations and so that heat is something which is going to be done later on loose sound which is triggered by this so the it is basically a uh a viewer's character when they get basically in a lost state the loose sound is going to get a random one of 14 entries and it's gonna play back the yeat plus around the number dot mp3 setting the volume level and playing that now we're doing this through audio and sound play the sound play is going to be a variable we set at the top of the script so we can reuse objects so it's going to go through sound play if it's greater than lines it gets to 10 we're gonna set it back to zero so we're reusing those objects so i think we've got certain like ten tracks or so we can use and since we played sound on that current track we're setting it to the next track which means that we don't use the same track over and over winner time we have the cheer we play that we do the volume again sound play there just to be clean we get the elements by id so the winner is id passed in there so this is the winning person's avatar image development i'm going to move up on top of the pillar pile i'm going to make sure it's in the right um said index as well we've got a remove element this is a clean up code we've talked about before your set winner set winner is going to send and do action to set fight reward and the message is going to be what's passed in which is actually going to be the winner's name start fight so this is at the end of the 60 61 or 62 seconds after we actually start the web page so this means we've disconnected any new people to join so we're going to re-establish the web sockets we're not going to subscribe to any messages so if we do reopen it it's okay because people it won't pick up our messages to do the join to react because that function's being closed off at that point if we have no winner what's going to happen here we have no champion of hill is the default so if you've got no div number so no users there we send a notify message to send a message in chat to say no one's joined so no the champion hill otherwise we get that attribute from the element that's left from the id and we need to minus one by the way that the numbers have done and we notify the champion of the hill set a timeout message to do that in the time because we need to wait once we've started the fight we need to decide at this point who's won then we want to say okay when that's all finished we want to notify chat at the right time so that's why we do the set timeout on the message here which is notify function again then for the eat user eat time mute id we go through each of the other div elements we have because we candid them up then we get those objects as a user if they're not the winner get the time so we divide so what's happening here is we get the amount of time which is 10 seconds to to go through the fight divided by the total number of people and then we set a timeout on the youtube command for that user id and the amount of time so that means over 10 seconds we're going to ut every single person that's basically lost so we split up so whether it's two people fighting to be the champion of the hill or 200 it's going to then split that up between those 10 seconds to make it a sort of better experience then we build up the winner command and set passing into the command who's the winner and again appropriate time for that and the set winner as well notify is purely sending a message to the do action websocket call with the fight message and passing it in there so this calls a fight message action industry and bot through web sockets this is a randomizer where it basically looks at the min value plus the random amount of the max minus the min the battle sound we trigger need a start that's the battle to mp3 that i've mixed together with creative commons tracks so again if you want your own tracks you can potentially download all these files and to make them yourself again we've got the multi-track function there we also have a horn sound to play the horn near the end as well and there we go a full explanation of how the champion of the hill code works please like and subscribe to be notified of more videos like this if there's a topic you'd like covered please do let me know in the comments or on discord check out my twitch stream to see the bot in action and for other examples the links to my twitch social media and streaming bots can be found at vrlad.com additional links to others that provide stream robot content can be also found in the description finally thank you net for making a great bot and please consider supporting his patreon which is linked from streamr.bot

Channel: VRFlad

Views: 3,139

Keywords: #StreamingTips, #StreamerBot, #OBS, #SLOBS, #twitch bot, #live streaming, #twitch

Id: HPRP0D3UQQ8

Length: 29min 37sec (1777 seconds)

Published: Wed Mar 16 2022