How I Do It: Smart Clickable GUI

[Music] hey game makers pixelated Pope here and today we are talking about creating UI in game maker we're going to start simple and talk about just making clickable buttons but by the end I'll be showing off UI the respects the dynamic aspect ratio and can even be scaled while maintaining relative positions and we were going to build all this UI using the room editor before I showed the demo let me explain something real fast I've often said that my channel is targeted more at an intermediate to advanced user and this is going to be one of those videos I'll not be going line-by-line explain every single step instead I'll be explaining a problem my method for solving that problem and that's about it nothing I say in this video should be taken as gospel or is a perfect solution for all related issues it shouldn't even be thought of as the best way to solve this particular problem but hopefully by the end of the video you'll have a better understanding of the challenges that you I can present and will have more knowledge to help tackle those challenges in your project if you do have questions applying this to your project as I imagine many people will please join the discord server linked below and ask and help channels I and other members of the server will do our best to assist you all right let's get started so I have here a basic UI this UI is specifically for selecting the aspect ratio for my game by default is 16 by 9 so there it is unchanged but if my game supports other aspect ratios I can change it not important right now let's just talk about what these buttons are and how they work so these buttons are each individual objects and they are being drawn in the GUI layer so if I come over here I can move my camera around and these buttons continue to work because they're drawn and all the collision detection is done in the GUI layer so how is that accomplished I've seen other videos online on YouTube talking about collision detection with buttons that are in the GUI layer and it's kind of complicated doesn't have to be though so let's go look at the code and I'll explain how collision detection with the mouse and these buttons on the gooey layer work okay my camera is kind of in the way isn't it okay so we've got our resources over on the left like good old GMS 1.4 and got my objects and I've got this UI parent every UI element you see in my HUD is on the GUI layer and drawn as a it's a child of this object so let's pull this guy up cuz he's got all the magic in him in the GUI event you can see it's just drawing itself so nothing fancy there so let's go look at the step event so in the step event this is my collision detection right there position meeting now let's go X mouse cool UI what's Mouse GUI X&Y that if you typed that out right now it's not gonna change colors for you so back here in my create event I knew I was gonna be typing this sort of thing out a lot device Mouse x2 GUI zero zero because I'm on now I'm making a Windows game not a mobile game that allowed multi-touch so I always I'm gonna be using divide zero so when you've got a button in the GUI layer the device Mouse xqe will always be able to click on it if you've positioned it right in your room so what's important to know and let's switch over to the room again real fast and talk about this let me turn a few of these things off okay notice where I have these buttons and this whole menu positioned in my room right it's positioned as if the view was in the top left corner all the time in fact that's what this layer is this layer represents my default view and the view is in the top left corner you would be able to see all of this and that's it so if you layout your objects with this positioning in mind then all of the normal collision functions their their X&Y coordinates we'll just they'll be fine it'll just work so let me switch back real fast so here in the dry event since this element should only ever be drawn in the draw gooey event we don't want to draw anything in the normal draw event and that's why I've got this block of code here that doesn't do anything it's just a comment to prevent the draw self default logic from occurring for this object you know if you're just making a very simple game with some buttons you only support a single aspect ratio which is totally fine then this is all you need just position your buttons relative to the view being in the top-left corner in your room and then you're good the buttons will work with just position meeting Mouse position X Mouse position Y and the object you want to see if your mouse Tovar simple as that but obviously things get a lot more complicated when you start taking dynamic resolutions into account since you're here on my channel I think there's a good chance that you've probably seen my dynamic resolution and aspect ratio tutorial from a couple years ago the question I got more often than just about any other question once people got it working is how do i position my buttons you know and so many people just build a room that is their menu and they drag and drop buttons and then bed the dynamic resolution tutorial logic to it and now their menus all squished to the left side and it looks awful so how do you handle dynamic resolutions so let's pull up the demo again and show off this current solution I've got not just a menu a very you know a complicated menu here but I've got UI elements that are you know this should always be in the bottom right corner this should always be in the bottom you know Center top left and then I've got this text up here that shows be in the top right so when I change resolutions if I go super wide what would happen on a lot of other people's project is that the things that should be in the center and should be on the far right corner will be slided slid over because they won't know that it needs to be positioned differently because everything is usually positioned based on the top left corner of your room so let's see what happens with this the display settings is still perfectly centered and then this guy's still in the bottom right this guy's now on the top right and this guy's perfectly centered what about going to portrait when you switch to portrait all sorts of things can go bad if you're building a game from mobile and you support rotating the device to go between landscape and portrait in fact this isn't even perfect because you can see so yeah this is centered great when I click OK well now my instructions are on top of my health bar but everything else works this is in the bottom right this is still centered and the menu is still displaying properly you know they're anchored to a specific part of the screen which is as a designer that's what you do where do you want this oh I want it in the bottom middle where do you want this I want it in the bottom right and that's how we're gonna solve this problem we need to tell elements in your UI not just where to position themselves but what are they anchored to and where should they get their new position from when things change so let's explain how I did that so going back to the room editor I've got this grid right let's talk about this grid for a second so this grid is just a sprite that I've dropped on its own layer called guide I designed my UI based around this so let's look at this display menu real fast the display settings are all centered right everything no matter what I want this whole menu to be relative to the center point of the screen let me show you what I've done I've set up some variables this is the first time I've used variable definitions they allow some cool things in the room editor and since we're using the room editor I thought it'd be nice to try and take advantage of them but this isn't necessarily the best solution for this but you could see I have three variables than my UI can handle and you can have as many of these as you want but the core one is anchor and I have an enum a list of items which is just where do you want to anchor and these these alignments should look familiar they're very similar to the default ones in a sprite when you set the origin so you can say I want this position this object position to the middle right or the middle left and then we're going to use that variable to position the object so let's let's go back to the room editor and let's see what would happen if I took this guy double clicked on him click the variables he's that they're all anchored to middle Center because they move as a unit so I want them all anchored at the same point so what about this guy what if I said top center and him at the bottom right looked perfectly normal switch 221 by nine still centered still at the top and since these are the same vertical height nine and nine it still appears in the correct position but it's not it I mean it is but it won't be if I switch to any of these other ones but this guy's sitting over here instead of being lined up over here since we aligned him to the bottom right corner has that changed his position changed so let's go to one to one and how he's centered right so this is all sorts of wrong and over here still centered now this guy's floating way up here it's chaos right so setting the anchor point is key to getting these elements to be positioned properly as your aspect ratio is changing so how does this work that that's the real question how did I do this and it's really not too difficult let's look at object UI parent now let's go to user event zero user event zero is what I call on every UI element when the code that changes the size of the screen and thus the size of the gooey layer says hey you guys need to reposition yourselves this is how it does it does with statement and calls user event zero on all of the UI elements so we get a few variables at first we get the GUI size the view guide size so you can see I'm just grabbing sprite guides width and height and then I calculate where the center positions vertically and horizontally will be for those the the guide and then I get the start location for the current object now this is important because as I said we're using the room editor so you drag and drop the item in the room and then that is its start X and start Y so if we know the start X and the start Y we know the width and the height of the guide and we know the anchor point that we want item to be positioned relative to that's all that's everything that's all we need we can for any resolution calculate where that things should be positioned these two lines right here 15 and 16 after I've gathered all these variables I use them to calculate the horizontal positions and the vertical positions that this object could be positioned dependent on its anchor point let's look at the horizontal ones first this is left this is Center and this is right if it's anchored to the left side so any left top left middle left bottom doesn't matter any of the left anchor points we're just going to use their X start because our room positions are already based off the left side of the screen so no we don't really need to change anything now Center is where it starts getting a little complicated we do this in kind of two phases we take the current GUI width and divide it by two because we're centered so we need our center point in our width of our GUI and then we take the center point of the guide and the subtract the start location of the object and that will tell us how many pixels to the left or to the right this object was from the center point in the default view and then we just subtract that from the new center point for the current GUI width we do basically the exact same thing for the right but instead of starting at the center point of the current display width we start at the very right side of the current display width and then subtract the same thing and that'll tell us how many pixels away from the right side or x value was in the room editor we do the exact same thing but with our height variables and our Y variables for the vertical positioning now I could have organized this a little bit differently because right now every single single object knows where it could be either left middle right or top center bottom whatever it knows where it could be for all of those possibilities which isn't really necessary because the Anchor Point doesn't change could but it doesn't once your game is running so I really only need to calculate two values but I like the way this code looked and the way it was organized so I'm gonna leave it this way so then I just do a switch on the anchor and the anchors are enews and then I set the X&Y based on their anchor point and these values in this array so my date the left one and the top one take the center and the top you know it's just it's super simple finally I have this right here the active position this is more to do with the way I'm animating elements in and out the active position is when the element is visible and active where is it and then I have an inactive position as well or rather an offset which is move it here when it's going to activate it that's something you can look into the example project for and examine how I do the animations with TWRP and everything I think it's pretty cool because none of these individual objects really have anything besides where do I move them to which I could have made these instance variables as well and modify these in the room editor and then you wouldn't really have anything in any of these objects they're all just it's all I got is where they go when they're moving off screen if you take anything away from this video this is what it should be when you have an element try and think about where it is anchored is it anchored to the center of the screen the bottom left bottom right top left where do you want it to be as your resolution changes that that's important to know and then understanding these calculations for once you know what it's anchored to how do you find the new position based on an original position and original perceived size that's that's the most important thing here nothing else really matters once you've got that concept again I want to reiterate that this isn't the perfect solution it's not gonna work for everything but with that concept in mind you can run wild with this and that's all I really wanted to say it's it's a complicated topic and there was no real way to simplify it to something that can be universally applied to every project as you were playing games that support different resolutions try to notice what UI elements are positioned relative to how do things change when the resolution changes what stays the same you may learn some interesting tricks by observing the pros don't forget to download the example project down below and mess around with it if you have any questions I highly recommend joining our gaming or discord community which is also linked down below and I want to thank my generous patrons for allowing me to run this channel ad-free if you'd like to help support the channel get access to all of my assets vote on future tutorial topics and read written tutorials check my patreon page linked in the description and at the end of this video thank you so much for watching now go make something else [Music]

Channel: PixelatedPope

Views: 18,016

Keywords: Game Maker Studio, YoYo, GML, Tutorial, Learn Gamemaker, GMS2, GUI, Clickable, Buttons

Id: RbBgE3cUShc

Length: 17min 21sec (1041 seconds)

Published: Thu Jan 17 2019