Creating UI Sliders in GameMaker Studio

hi everyone welcome back to game maker cast it's Mickey and in this video we're gonna be taking a look at sliders you can see I have a program in front of me that we're gonna be generating here and if I move the music slider up and down you should hear the music come on and I have a couple buttons that right now if I click them nothing happens but if I turn the sound effects slider up you should be able to hear those clicks so let's close this and roll the intro and get right into the coding [Music] so in my project here I have a couple things already set up if I open up the settings object and in the create event you can see I have two global variables the music and sound volumes so this just means that we can use these two variables in different rooms without having to refer to this object I have a music object and in the create event we're just playing some music here and then I have the buttons which is going to play the sounds in my room main I have the two buttons and the music and then in the room in it I have my settings object there which will switch the rooms so if I run this project here we should hear the music and we should hear the buttons when I click on them so that is what we're gonna start off with I'm gonna go through the music one and I'm just going to comment that out so when we run the program we're not going to be hearing the music every single time okay so let's go ahead and create an object and let's just call this one object slider I'm gonna make sure that I use the bar sprite and one thing done one thing to talk about here is the birthright the origin is set to middle left I normally have a set to the middle center but they keep the math a little bit easier we're gonna set it to the left so you don't have to worry about taking away half the sprite back in the object slider the first thing we're going to do is we're going to have some user feedback when they hover over the slider so we're gonna have a great event and two more events one for the mouse enter and one for the mouse leave so in the create event let's create a variable called cursor and send it to you see our others were none this is going to be the cursor that we're gonna be hanging on to while the person has hovered over our slider so in here in the mouse enter we'll set our cursor variable to the window on the sport yet cursor so this will grab whatever is default so right now - set to the point pointer you may have something else like as the type button who knows but he'll grab the default one and set it into this variable next we need to set the cursor so we'll use window set cursor then we want to set it to CR underscore hand points that will change it into the which will let our users and know that we're able to click on this particular item now when they leave the slider we need to switch it back to the cursor variable that we stored so this will change it back to the default and the main let's go in and let's add two sliders here and here and when I hit f5 let's see if our cursor now works if I hover over it you can see we go to the hand and when I hover off of it we go back to the default one so that is a step one if we close this now we're going to be working on the actual knob so the thing that we can drag up and down we're going to have a bunch of different variables so stay with me here we'll have an amount on the score maxed which is a hundred so this will be your percentage an amount on the score 90 equals zero we also want to make sure that we have a variable is being dragged we'll set that to false so this will tell us whether or not we're able to drag the knob up and down now let's see here we want to go to the draw event so let's create a new event for draw and in here this is where we're going to handle all the drawing of the sprite they're also all the drawing on the bar and also the knob so we could either say draw cell which would draw whatever spray is associated over here or we could specify it by saying dress right and either passing in at the sprite name however because I have specified it over here obviously use the sprite on the square index at the image index which is the frame we're on and the X&Y position which is where we set it up in our room so if I do this right now we're left with what we had before which is just the bar so the next thing I want to do is I need to figure out where to drop the knob so in the create event we had the amount current at zero that's changes something to like 60 so this would be 60 percent of a hundred and said the draw event we need two variables we'll need a variable for the knob amount which is this going to be whatever our current amount is divided by the amount my so that will give us a fraction so right now set the 60 so our fashion will be point six the next thing we need to do is figure out what is going to be whatever the result of this is in our case it's 660 we need to figure out 60% of the sprite with so we could say are not position X is going to be equal to our current x position so that's where we place the sprite plus our sprite don't scroll with / sorry not / times the knob amount when we're using x here because this nominal is going to be zero weight six or it could be 1 so this will give us our actual how many pixels we need to move to the right now if we just say draw sprite we draw the SPR knob at the image index of zero we're going to use the knob position of X and the current Y position so right now we've set all of our sliders to 60 if I hit f5 this should be on the 60% so right now you can see that the nub is on 60 however I cannot drag it back and forth so to get this working we're going to add a couple more events we're gonna add a mouse event for meadow stress we also need a global most event from left release when we actually let go of the button itself so in the left pressed on the copy that is being dragged ramble here we're going to change us to say crew and when we released the mouse button we're going to change the is being dragged defaults so we're just titling in the flag on and off now we're going to create a step event and we're going to check to see if is being dragged as set through so if is being a dragged a set of true then we want to do a little bit more math and here we need to figure out the amount that we have dragged from the start of our sprite to whatever RMS is so we could say the X X position is going to be the x position of our sprite - the mouse x position so if I load up my room if our sprite starts let's see if I can get something here or sprite starts up a hundred and I drag this way to 63 then that XX amount will be 63 pixels so now that we know that the one thing to keep in mind is if I'm dragging to the left and I drag over here and I get to 50 we're going to have a negative number so we need to make sure that we're always working with a positive number so we can use the absolute value which is a default function in game maker and this will always give us positive numbers so now that we have the amount that we're going to be dragging we need to just say the air amount is going to be the drag amount divided by key spring quit and so that will give us a number between 0 and 1 and then we need to make sure that we clamp yes because we could have a negative number or sorry we'd have a number bigger than 1 so they say amount 0 and 1 so it's it can't go any lower than 1 and it can't go any higher so are any lower than 0 or any higher than 1 next we want to set the amount current which is a variable to whatever our mount is times 100 so if we run this we'll run into one small problem but we'll fix that in one second now if I click you can see that I can drag this and I can come over here and I can come over to the left now the problem exists where over to the right works but if I come over to the left and I'm still dragging because we're using the absolute value you can see that we are dragging too far over and the scroll bar is going the opposite way to fix this all we have to do is check the most position to see if it's less than the x position which is the last part of our slider here so before we do any code we could say if our mouse X is bigger than the x position then we want to make sure that we calculate everything here otherwise we'll just set the amount current to zero so if I drag all the way to the left the amount current is going to be automatically set to zero we can't go any further if I drag all the way to the right well we are clamping it between zero and one so that's why we can't and go any further than that now the only little bit of feedback that we need here is in the sprite itself we have a regular spray and then we have a sprite that we've clicked on some frame 0 and frame 1 in the actual slider object we are using a variable called is being dragged let's actually true or false value true or false then gets replaced with a 1 or 0 so that means that because the way that we have our sprite set up is being dragged the first frame is 0 and then it is being dragged to set to true which the second frame one would be here is being dragged frame we can use that boolean on our actual draw call so in here and so saying dress right knob at the index of 0 we want to just use that boolean flag so if we hit f5 now we should be able to click and get some user feedback and then when we click off we get we go back to the regular State now the last thing we want to do is hook these up to some of those global settings so this is going to be a little bit difficult but stay with me here in the slider we're gonna have a new variable and we're gonna set this variable need to settings or just let's just see you setting for now and then we're gonna set the type to a list make sure we click the gear icon and we're going to add two different things right now the very first thing we're going to add is music and then we will add one for sound by default it's going to set it as music or you could set it as sound I'll leave mine as music so close the variable definitions and I'm gonna go to my room me and in here if I double click on my first guy here and I go to variables I can change this by clicking the pencil icon and changing it to sound so right now we have sorry we have a sound one and then we have our default one which is set to music and I'll just click that so for sure it's always going to be music now what we can do is in the create event we can instead of saying the amount current is set to 60 we could check to see what those global variables are and we could set the amounts are based off of those variables so we'll just set the amount burnt to zero and I'll just say Swift so this is gonna check that variable definition which is right in here it's going to either be music or it's going to be sound so I could say case music and then break and I'll have one make sure I spell music right I'll have one for sound if the case is music then I'll say the amount of score current equals the global variable dot music sound otherwise we're going to use not music but we will use the sound of volume now if everything is a setup we should see different amounts here unless we get the random numbers exactly the same you can see that we do get those two different amounts now I'm going to unpause I'm gonna actually play the music here so we can actually get some stuff going here now that we have some music going the only thing we need to do is change these two sound volumes of when we left click off so this is going to be within American global left click once again we're going to be checking the setting on the particular instance so and we can use another switch statement to say switch based on setting and we will check for music and we will also check for Sam now for the music because we only have one we could just say the global dot music volume equals the amount current in case we wanted to save it somewhere in a nine hi file or something and then we could set our audio gain sorry audio sound underscore gain and we want to set the track of music and we're going to set the current amount which is zero to a hundred so we're going to divide it by hundred which will make it 0 to 1 which is what this function expects and we want the milliseconds and time to be zero so this will be instantaneous so if I hit f5 let's see how we did now we can hear the music if I turn this down the music goes away I turn that down it does really matter and I can turn this up and you can hear the music has come back so the only other thing we need to do is we need to set the button clicks as well so we can copy and paste this code in now the one thing that we need to talk about right now is we have two different sound verse or two different clicks we have the regular one and then we have the like two so we could do it like this where this is definitely going to work so I can turn this music all the way down and the sound all the way down and I can't really click anymore however what's going to happen is if you have a lot of different sounds then they're going to end up kind of putting all of your sounds in this code and it's just it's not really going to work so we're gonna go up to tools and we're gonna say audio groups and in here we're going to create a new audio group and you can see we're gonna use the group on all of our exports and we can to rename this one so let's just name this one audio group I can't spell by audio group s FX for sound effects and I want to add our resources so I want to add the click and the click to you so now that we've done that if you take a look at the default one you can see that only music is in here but now we have another one of our sound effects now what's going to happen is if we hit play right now game maker is going to complain because our sounds aren't actually load it so we have to tell game maker tool order sounds and you would probably do this in the settings variable just so it would load up all the sounds you need but I gotta have it inside here so I'm going to use a audio loop load function and I'm gonna pass in the name that we gave it which is the audio group sound effects here so once this is loaded what that means is I can come over to my global left press and instead of doing the set gain for each individual one I could do an audio underscore loop and use a set gain where I set the entire group to whatever the email current is divided by hundred and make sure it is instantaneous or zero milliseconds so if I hit a file let's see we get any errors and I can see I'll turn on the music here but I can see that the audio group one is loaded so if I click my buttons you can see that they're working and if I turn my sound all the way down you can see that once again that buttons happen needed so hopefully you're able to implement these sliders into your games and you can start working on some settings on your own thanks for watching today's video is accompanied by the f1 2019 anniversary edition use the link in the video to grab your feet first-come first-serve thanks again for watching [Music]

Channel: GameMaker Casts

Views: 600

Keywords: gamemaker studio 2, gui, slider, music, ui, sound, effect, tutorial, gamemaker studio, gamemaker

Id: dn7a5qLfJmc

Length: 16min 26sec (986 seconds)

Published: Tue Jul 14 2020