Scrollbars - Gamemaker Studio Tutorial

hello everybody is the dankest or here and welcome back to another and make your tutorial today we got something fresh fresh off the grill hot off the press sizzling off the out of the oven unn freshing believable and whatever so today we're gonna be talking about scroll bars bars that scroll and right now we're into a game of mine that I've been making for a little while now a little too long if you ask me called symphonic mayhem here's a bit of shed unless she must plugging over myself but I basically I recently did this in this game so I'm gonna kind of show you what it's about but I also kind of show the game a little bit but not really I don't this is a night gets official like debut I just wanted to kind of a sneak preview so if we select my profile we come up here to upgrades this is what I have here's the list of all the upgrades you can play in the game as you can see we got our little guy down here we're like no where you at guy so I'm actually using a gamepad right now for the controls so if I just so I go on the d-pad as you can see we've got this little scroll bar on the side and then we got like everything that kind of goes up and down with it as you can see when the scroll bars on the bottom we reach the bottom like of this one right here for instance you know so like this guy isn't like at the top or anything like that and as we see if we hit the top of here it's like the bottom so it's just kind of like this area pretty cool so basically this is what we're going to be doing today so I just want to show this a little bit exit do that stop put my gamepad down all right now let's go let's go so I've whoa I've pulled out an oldie but a goodie actually actually not that old it's just Monday's tutorial which the two days ago the profile saving tutorial I decided that this would be a good one to show to use whoa something we're talking over here whoa okay we're good there's just second screen doing some stuff so we're just gonna show we have so far excuse me I just downed a bunch of animal crackers before I started this video so we're gonna head some of that so right now we got our profiles right we calm down but a little loop right if we can make a new game Laurie whatever right clawed that mmm Laurie and Meg and Claudette where's Dwight there's Dwight so we can make like our profiles and stuff right basically we're gonna use these to like scroll all right so we're gonna make like more that goes down so first off what I'm gonna do is we're going to increase the amount so yeah if you want to get this this is just another tutorial I'll probably link in the description if I remember so you can take a look at this but basically we got this for loop that makes all of our profile things like this and so we're making ten of them right now let's go ahead and make 15 now let's make it even 60 right all right and then let's make a room a little bit bigger just a little bit taller like 880 you know just so we can see like the top of the last one cuz I would say that's a that's a tip of buying your pro gaming game design tip is that you can have your scroll bar and stuff but like if um I might I'm actually gonna make this like a little bit shorter but it's good if you can give them if they can see that there's like a little bit of more stuff down here because as it's kind of coming off the screen they can see oh this probably Scrolls down right right so we can go ahead and let's go back to our room I'm gonna make it um 864 I think let's just check that really quick but basically yeah we're gonna have 16 actually we're gonna 17 oh yeah I need to go back and adjust that or am i I don't know uh so yeah as you can see they go off the screen and then work probably and we're probably just making a scroll bar right here so first off let's make the art for it because art is good we do this really quick actually cuz I want to make it as tall as like here to like down here so I'm not sure but we can find out like what this is how many pixels this is so for instance I'm just gonna go over here our file normal size is 64 pixels tall okay and if we go to our make profiles where you're making them 80 pixels apart all right actually but there's 64 that means their origin is 32 and if they're starting at 54 okay ah let's do some math even though this is new it's actually the answer is the answer is 22 well I'm gonna do it anyways 34 minus 32 yet 22 okay something makes it easy so we don't like our border so our room is 684 we minus 22 from that and that gets 842 all right alright now let's make art so let's do SP our scroll bar it is we're gonna make it seriously like 12 like it's not gonna be very wide in fact it's gonna be less than that's gonna be 8 and then it's height is 8 38 42 yeah alright so this I'm not gonna to go too crazy with pretty much we're gonna go make it like give it like a dark gray like border like all the way down we can maybe zoom out just a little bit and just come down here dark gray dark gray dark gray making a scroll bar look let's make this fullscreen whoa I forget scrolling doesn't like scroll you know it makes it like big it scales it not scroll which throws me off every single time because every time I try and do it but then they everytime I learned that it's incorrect all right boop boop do this now we're at the bottom to where we're gonna go all the way down like here all the way down there right here let's get ourselves like a lighter gray just a little bit not crazy and like that all right cool and now we're gonna we are we were we hit center but we're not going to do that we're actually just gonna Center it on the X because our width is 8 so putting in the middle is 4 we want to keep our y at the top though and then we want to make our scroll button SP our scroll button alright this I'm gonna make a little bit wider than our bar so we're gonna make it width of 10 and a height of like 12 all right yeah that's good now what color should this be I'm gonna change it I'm gonna make it a height of 16 there we go um let's make it let's make it green yeah I'm gonna make it like a rounded a rounded square nice alright we're gonna get this like kind of darker green and make that like it's base color we're gonna shade it a little bit over here source gonna be like boop boop boop boop boop like that put a little bit in there like that you get this color again make a little brighter we are the same thing Buddha Babu and Babu and then we put a little bit that in there sweet we have our scroll button to which we are going to actually Center this one oh it's still running ha ha that's hmm yeah ok so first off let's make our scroll action is just gonna be scroll bar this is actually gonna be our object right here is the scroll bar and very first thing I want to do is come into our profiles and this isn't really something I'm just gonna go instance create let's see if our things are how wide are our things there are 256 let's see 256 plus 22 because that's like a border 276 and we're gonna plus 4 to that 282 let's do that 282 right now I'm just making our scroll bar thing 22 object scroll bar yeah yeah except I call this skull bar oh my goodness I always do that scroll bar and this is our sprite - scroll bar ok typing spelling I'm good at spelling don't even worry about it all right so let's go in here and run this just to see that we got ourselves a nice little scroll bar setting up some stuff it's really close I'm gonna move it over a little bit but you see it's there and it goes down a little far but that's ok honestly it's okay because I'm probably just gonna go resize canvas top make it like 820 there we go and then the bottom here we go I know no I know I know no we got to get to the scrollbar stuff it's just extending it up this is putting it this is putting it into our putting it into our game making it making it good kind of to give to little show a little bit you know like this is what this is what I do with it well this is what I would do with it or how I would get it in here we'd first all you'd make is that object or just put it in the room or something like that so you run this make sure it's looking all the good size and everything goofed up a little bit see there we go now let's looking great all right cool now let's actually get to some scrolling stuff now I'm gonna go to my example over here as well all right so first we're going to go into the create event and we're going to say we're gonna call this button y equals zero this is gonna be the Y at which our scrolling button starts all right then we're gonna say scroll amount equals 20 this is going to be that how fast is Scrolls if we're gonna use the mouse wheel in this tutorial we're gonna do both the mouse wheel and the like clicking on it just with the mouse and whatnot all right oh yeah and then in that case we're gonna have to say active equals false so false there we go all right cool so let's do this first oh and then we want to make one more thing we want to say global scroll Park equals zero okay and then our scroll bar is 8:20 we're getting to remember that actually that just make a variable bar height equals 8:20 all right this is what we have right here okay so now we're gonna make a step event and very first thing we're gonna do is go global scroll perc equals alright and then we're gonna have our button Y divided by bar height basically we're just getting a percentage you know a number between 1 and 0 or 0 percent of 100 percent zero percent being all the way at the top and 100 percent being all the way at the bottom that's we're getting right here so we're taking our button Y as where our scroll button is on our bar and dividing it by the total bars height and that gives our you know our percentage of what we have so now let's do let's just do scroll wheel first if mouse wheel up pretty easy and I'm gonna add a little bit in here I'm gonna say if mouse X is less than X so basically we're gonna say if our mouse is to the left of our scroll bar so we're only going like scroll in that area right then we're going to say button Y plus equals mouse wheel up but we're gonna wait - equals scroll I'm out I believe is what we call it let's check scroll amount yep there we go scroll amount and then we save if mouse wheel down same thing if Mouse letters score X is less than X button y plus equals scroll amount and then as always we want to say button button why we're gonna say equals and we're put use the clamp function and we're gonna say button underscore Y minimum value zero maximum value is bar height so I'm putting this little thing so yeah if we're scrolling up and if our mouse is to the left of our bar then and we're going to that's gonna scroll up and if it's if we're scrolling down on the mouse wheel and if the mouse is to the left or that we're gonna scroll down on the bar then word is limiting using this clamp function where we're making sure that our butts and Y or you know our button on our wheel never or button on our bar never goes below zero and never goes above the bars height all right so this much we can actually go in here oh and then one more thing I also forgot we want to draw event I want to say draw self dink and wanna say draw sprite and the sprite is going to be SP our scroll button sub image 0 X is X Y is y plus button y so we can test this out we can go in here and we can so so far we got just regular scrolling with our mouse wheel boom here we go so and nothing's gonna change over here but as you see I'm scrolling right now nothing's happening if I scroll down you can see that our bar goes down and as I scroll up you can see that our flight team goes up and it goes to the bottom I'm still scrolling down right now but as you can see our buttons not going anywhere so if I scroll up and I'm still scrolling up our button also doesn't go anywhere so we got our limits and stuff like that which is really neat now I'm gonna make it no well not I'm gonna make it but now we're going to make it so that we can scroll like by clicking on it and dragging it as well so let's go into here scroll bar so we have this active variable and that's what we're gonna use so we're gonna say mouse left pressed yeah F pressed so then when we move so basically when we click anywhere on the bar if-if-if active is equal to false actives is equal to true I think that's all we need to do right here actually yeah yeah okay and then we go mouse global Mouse global left released and then we're gonna say F active is equal to true active equals false all right it's basically saying that if we press if we click anywhere on the bar then if we're not already active active is just a variable that we're gonna use it being it like if we're scrolling with the by dragging or if we're scrolling by scrolling that's basically what we're showing right here so if we're scrolling by dragging is what this is basically saying then you'll say yes we click on it we are dragging but if we release this anywhere else on the screen so basically it so basically it doesn't make it so that we wanted to be like precise on the bar we can just you know we could just like we can kind of move the mouse around and if we can still scroll which is pretty cool but whenever we release the mouse button anywhere on the screen if we are active make it false then we're going to our step event first thing we're going to do is we're gonna say if active equals false so basically if we're not dragging it with the mouse so then I'm gonna tab this off forward so that it's all parallel and it makes sense so first now we're gonna put all of this that we did before into some curly brackets safe active equals false so if we're not dragging it that Detective and we're gonna scroll oh no the animal cracker bits are coming to haunt me hmm okay else if active equals true this is gonna be pretty easy then we're just gonna say button Y is equal to Mouse Y minus y I know that's a lot of Y right there we're gonna take our button Y because at the top let's just say it's at the top at the top our button Y is going to be 0 right but if our mouse is at that point right then the mouse is y is gonna be 22 because if we remember that's how far down we made our bar so our mouse is y is going to be 22 so we're subtracting it by the bars Y basically we're taking that out of the equation so that when the mouse when our mouse wise at the top it's also going to be like this is going to equal out to 0 making that the button Y and then we keep this on the bottom though this clamp we want to keep that outside of everything else so that way even if we go like below or above our bar our mouse will still like it'll still just stay within the bounds so let's give that a try let's give it let's let's just do it and I hope I'm not going too fast and I hope I'm not like making anything too crazy so now if we like as you can see if you click on it I can like as you can see we can like grab it right and as I let go and I'm clicking over here and nothing's happening and like dragging stuff but as you see I'm still holding it I'm still holding down my mouse I let go of the mouse and it stops right so pretty cool we can like drag it this way and then as I'm scrolling as you can see if I scroll nothing happens right but now if I let go and I can like scroll then we can go like this so we got some cool functionalities so now all we got to do is transform this or move these depending on our scroll height and this is the part that gets a little confusing but that's okay so the reason why we made this global there scroll percentage is that that's what these boys are profile things the things that we're trying to scroll are gonna use to it's gonna use to like actually scroll now it's actually not a lot of code it's actually one line of code but it gets a little confusing so we're gonna go into our step event and this is all stuff that you can check out in the last tutorial but you can even just but you can look at it now and see what it does so first I'm gonna say why oh wait we need to add one more thing before we do this we need to go to our create event and we need to say start y equals y because we got it we got a save where our button was originally because then it's going to use that that like origin point based off of where it was and use that we're gonna see we're gonna see but basically we need that so then we're gonna say y equals start underscore y minus and this is where things of course are gonna get a little a little weird but we're gonna put three left parenthesis and we're going to say instance number object profile minus 10y a times eighty and I'll explain all this in a second let's just get this typed out times global dot scroll perk for percentage right pregnancy all right time for me to explain myself here we go so we're setting our new y based off of our start Y based off where we originally were now this number what this number is is that is the amount of rows there are basically right so in our case and actually I can go and around the game right now in our case there is one object per row and as you can see this works but there's one I'd there's one object per row right so that's really good for us right but like for instance in my game that I show you I show show you'd showed you I had like ten upgrades per row so basically the way I kept track of that is that as I created them every time a new row was created I made a variable called rows pretty much and put that apart and like then what then it would be rows - all right now we go back here so this is like your rows but since there's one object per row in our case we can just say instance number object profile alright does that make sense and we're subtracting 10 because let's go back because 10 is the amount of whole objects we have 1 2 3 4 5 6 7 8 9 10 you can see like this one's half gone so 10 is the amount of full objects that we have or full rows that we have in the instance of my game I was subtracting three because I would have three visible rows that were completely visible at a time so that's where that ten is coming from is that it's these ten right here okay hmm and then we're timesing it by 80 because this that's how many pixels apart each object is in our scroll right and then we're timesing that by our scroll percentage by how like where our scroll bar is like how our scroll button is in our bar okay I hope that sort of makes sense so be honest I'm not sure how I came up with this but I thinking what I'm doing is I'm getting some sort of margin and then timesing it by the scroll percentage like basically we're getting like a space between like the top and the bottom of where all the buttons are gonna be like that margin and then just times you get by the percentage you know but that's that's basically what this is doing now we're subtracting it from our start Y so as this number gets bigger we could say at the bars go more up I hope that makes sense I hope that makes sense but if you know where to get think these buttons so you know where to get these numbers then it's easy to plug them in and and go with it but this is the amount of rows that you have and it's the amount of rows that are visible this is the space in pixels between the rows and that's not supposed to happen and that's your global percentage variable of your percentage of where the bar is or the button is on your scroll bar I hope that makes sense but then we can look at our finished product and say wow II cuz now we look at this I'm scrolling with the mouse wheel right now and look at this were just like scrolling put it up or Boop because now we can come down here I think and we can be like new game all except it restarts the room but like now we got now we've got Lorie way down there and then I can grab it and I can be like alright let's just scroll Scroll scroll super cool but then here's the thing what's really cool is that the whole system works like multiple multiplicatively I guess so if we go to our make profiles so there's 16 right now but what happens if I go 50 you know we're gonna make 50 profiles right we're gonna go ahead and load the game like we don't have to change any programming as you can see as I scroll down we're scrolling through all 50 I didn't have to change any programming it just knows it just uses the information that it has to make all new stuff pretty much right so yeah we can scroll down all the way and in fact I can number them - I would like to do that actually I was thinking about that earlier like I wanna number our things let's go here and let's go draw text we should have that we should have that variable in here and it added portrait name size start why we should number number yeah is that we could say draw text X + 80 y + minus 18 and then I could say number and let's take this and put it down here all right not super important to what we're doing but basically so we can see that there's there's 50 nuh-uh so yeah was 0 1 2 except this would be 1 2 3 4 5 as you see we get down the bottom this is 49 so like 50 here right so it's really neat scroll bars are pretty awesome you can use them a lot in your games and stuff and they could be really useful and stars menu making like these could be levels they could be upgrades perks stats whatever whatever you want to be really characters even what you can do so oh yeah then you can click like anywhere and you can just like go to that place on the bar super neat super cool stuff thank you so much for watching and please leave like you enjoyed it subscribe if you want someone scrap I always remember to have a complete breakfast and I'll see you guys next time adios

Channel: The Dankasaur

Views: 3,453

Keywords: Cancer, Smarticles, How to, GML, Dwight

Id: SyNzwLiPJmU

Length: 27min 18sec (1638 seconds)

Published: Wed Nov 29 2017