Buttons GUI | GameMaker Studio 2 [ UI Series: Part 1 ]

hello there welcome to part one of my UI tutorials in this tutorial we'll be making buttons you'll be able to create these buttons using a simple script called create button so let's begin this is a new and empty project first of all I'll go to objects and create one a lame it oh manager I'll open the room to place it there now this object will manage creating and removing the UI but first we need to make the button object so we'll get back to this later so for the UI elements I'll go ahead and make a group called GUI inside this group I'll create an object for the button now in the object I'll add the create event and inside the creative end I'll add this here we are simply initializing some default properties and variables for the button object these are simply the default width and height of the button now this is a text that appears on the button this variable stores whether the mouse is hovering over the button so by default it's at zero when you hover over the button it moves smoothly to one so using this variable you can make some nice hover animations now this variable stores the scripts that will be executed when you click on the button so currently it's set to minus one for no script now I'll go to events and add the step event I'll also go ahead and add the draw GUI events we will be using this event for drawing the UI elements this event draws everything on a separate UI layer that layer draws on top of your game so this way you can draw the UI above your game and the camera will not affect it so we'll get back to these events later first we need to make a script to check whether the mouse is hovering over the button so I'll name is get underscore hover inside the script I'll add this these functions will cut the mouse's X&Y coordinates on the dua layer if you just use mouse X and mouse why they would get the mouse coordinates inside the room so if you have a camera there's gonna be a difference in your room and UI coordinates so that's why you want to use these functions when you're operating on that UI layer now here I am returning the results of this function the function is called point in rectangle and you simply guess whether a point is inside or rectangle so the point here is the mouse's location and the rectangle is the buttons rectangular area it goes from the x and y to x plus width and y plus height so the script returns whether the mouse is inside the buttons area now I'll go back to the button objects and open the step event I'll add this here this simply gets whether the mouse is hovering over the button using all scripts by the way this variable has an underscore before its name because that's how I named local variables now this variable guess whether the mouse has clicks on the button so this condition checks whether the mouse is hovering and whether the left mouse button is pressed now using the lab function we are moving a how a variable smoothly to the target have a value basically each step the hover variable will move 10% closer to the target now if the user clicked on the button we want to run the script so this checks whether the player clicks on the button and whether the scripts value is greater than or equal to zero so this way when you have the script set to minus one nothing will happen when you click on the button but if a script is set it will be executed using this function now I'll open the drawer GUI events they will draw the button so I'll add this here here I'm changing the color of the button the multicolor function is similar to the lerp function but it operates on colors so when however is zero the color will be light gray and when it's gone it'll be white so further in between values is going to mix the two colors now here I'm using the draw round track function to draw a rounded rectangle and this is the rectangular area of the button and this zero makes sure that the rectangle is failed and not just an outline now we will not draw the text so I'll change the color to black and the text will need to be drawn in the center of the button so I'll change the horizontal alignment to Center and the vertical alignment to middle so I'll draw the text at the center of the button by adding half the weight and half the height to the buttons x and y then I'll reset the alignments to their default values and the color as well now to test it I'll open the room and place a button here and now we'll run the game the button appears and if I hover over it the color animates too wide so the button is working now back in the room I'd lead the button instance now I go to scripts and create a script called create button so this script will be used to create the buttons so inside it I'll add this these are the arguments that are required for the script they'll show up in the editor when you passing arguments to the scratch so we have the X Y position for the button the width and the height the text and the script that will be executed when you click on the button here I'm storing the arguments into local variables now here I'm creating the button using a stands create layer I'm using Constance's layer and I'm drawing the ID of that button in this local variable then using width I'm running this code in the button unbasic aliy applying all the arguments to the variables in the button now you want the script to return the ID of the button in case you want to apply some additional values to it or modify its position but we won't be using a return value now we'll make the script a trance when a button is clicked so I'll go to scripts and create four names on click inside it I'll add this this function prints a message to the output that is here so when you click on a button it's going to print button Clegg's with the text of the button now I'll open Oh manager here I'll add the create event inside it I'll add this this variable stores whether the menu is open or not we want to be able to open and close the menu so that's why we have this variable now I'll add the step event and add this here we want to open and close the menu with the M key so this condition checks whether that key is pressed if it is pressed this will flip the menu open variable so if it's true it'll become false and vice versa now if the menu was opened we want to run the user event zero but if it was closed we want to run the user event one user events are custom events that run whenever you want them to so in our project user event zero will create DUI and user event one will remove it so by using user events like this you can make your code cleaner and more organized now I'll go ahead and add usually pen zero and one and now I'll open user event zero for the description I'll type create UI then we'll add this this is the width and height of the buttons that I'm going to create here I'm creating a button at 40 by 40 this is the width and the height this is a text and this is a script make sure you don't include the parentheses with the script adding parentheses execute our script but here we only want to pass the scripts ID as an argument and here I'm creating a couple more buttons now I'll open user event 1 and type remove UI in the description and in the event I'll add this so it will simply destroy all the button instances and now I'll run the game I'll press M in the menu appears now I'll goning at the output window if i click on a button its printed in the output so the on click script is working now I'll close it I'll open a button and go to its step event now here you can apply some additional animations to the button using the lab function so I'll add this here this smoothly moves are buttons Y to this target Y value the target basically subtracts eight based on the hover status from the starting by position of the button so when you hover over the button it should move up and now we run the game you can see that now they're also moving up so this is just one example and you can actually make many kinds of animations using the hover value so that's it for this tutorial and I hope it helped you I'll be making more so make sure you subscribe meanwhile check out all of my tutorials in this playlist and I'll see you in the next one cuz cuz I got starts the biggest you see I got starts the best that have been I got starts and I'm a clean gun

Channel: GameMakerStation - Matharoo

Views: 24,558

Keywords: gms, gamemaker, gamemaker studio, gamemaker studio 2, game maker 2, gamemaker 2, gm2, gm 2, gms 2, gms2, tutorial, how, to, matharoo, buttons, gui, ui, user interface, button, click, play, menu

Id: jsWPUuwB1RQ

Length: 8min 58sec (538 seconds)

Published: Fri Jul 12 2019