Create Buttons in PyGame! (Python Button Class Tutorial)

what's up everybody welcome back to the channel in today's video i'm going to show you how to set up a class in pygame to create buttons using the python programming language [Music] okay so i'm gonna go pretty quickly through the pie game setup here if you need a very rudimentary um rudimentary in tutorial on pie game i do have a beginner series on the channel you can check that out but i'm just going to kind of assume you know at least some of how to install and set up the pygame module if you don't have it installed make sure you run pip to get get it installed and then it's just pygame dot init we're gonna choose a width and a height for our screen and for this project we're just gonna do 500 by 500 and then you make this screen variable and you do pi game dot display dot set mode and just pass in the width and the height for your application a few things you always want is an fps 60 is very standard and then you want to set up a timer pi game.time.clock to actually make the game run at that time and so then uh if you're gonna have any text which obviously if we're doing buttons we're gonna have text you wanna set up a font in the very beginning as well so pygame.font.font and we're just gonna use freesandsbold.ttf because that's a font that comes with almost any install of python and then we're going to make it size 18 and then one more thing we'll do in the beginning here we'll do pygame dot display and just set the caption to be equal to buttons so that we know this is an app for buttons okay now we're gonna just set up what i always call the main game loop grab a variable i usually call it run or running or active and then just set up a while loop that's wall run and a few things you're always going to do screen dot fill with whatever color you want the background to be i will just fill it with white and then do timer.tick at your designated frame rate and so that's going to control just kind of the core running of the game making the background white and then you want to have a way to get out of the wall loop because right now it's an infinite while loop so we say for event in pygame dot event dot get like that it gets every event happening on your computer and your keyboard and your mouse and everything and we say if event.type is equal to pygame.quit just like that then we set run equal to false and then outside of that for loop we want to do pygame.display.flip which kind of actually gets everything onto the screen and then pygame dot quit in the very end is how you exit the loop so if you run this you now get this plain 500 by 500 application that's just all white and you can see there's nothing on it but it says buttons at the top and that looks good so let's get into the actual reason that we're here which is a button class okay so say you wanted to create a button in here and say you know my button equals this button class and we know we have to give it some stuff so that we can fully define a button but we don't know what let's go ahead and define a class this is something i don't do in that much many of my tutorials but it is a super useful python thing to know so a class is something you want to set up anytime you're going to have a lot of objects with similar characteristics and properties that you could do all in one it's actually one of my biggest regrets on this channel is one of my popular videos is how to create like an idle clicker app and i didn't just make each task a class and i should have so maybe in the future i'll do that but you know a button is going to have tons of stuff in common with its partners it's going to have basic size basic shape it's going to you know have an x and y position and approximate width and height and then text and behavior when it gets clicked all in common so if we're going to have an app with multiple buttons we want to create a class for it and pygame doesn't have like a built-in button class like a t kinter or kivi's graphical user interface packages do have so it's not bad idea to set one up and if you're making a lot of pie game games then you can create a button class that you bring with you to all your different games and this way you don't have to do this every program but so start by typing class and then the name of your class with a capital first letter and if this is too confusing you could say like class is um my button like that and this is called snake case where the first letter of every word is capital but you don't use underscores or spaces it's very common to python but just i'm just going to call it button and move on so you want to always start with this def init this is your initialization function and basically it's going to take what we give the class and we're going to take all the variables passed in and assign them to self dot variables so internal variables we can use inside this class for our own purposes let's think about what would have to get handed to a button for us to understand like how to draw it and what it does so we would want to know the text that it should say on the button the x position the y position and then uh we want to know whether or not the button has been enabled so this is a very common thing for buttons sometimes when you're doing certain operations you shouldn't be able to click on a button that means the button should be disabled so we're gonna to have a variable that says whether or not it's enabled and inside the init function we're just going to do this we're going to say self.text is equal to text self.x pause is equal to x pause and the reason for that is you want to take every variable that you're given and assign it to a self variable so if you use this in another function inside your class you can just reference that self dot whatever because it gets defined in the init function so self.x pause self.y pause is equal to ypaus and self.enabled is equal to enabled okay and we're going to leave the init function there but we're going to do one thing that you're always going to want to do with your button because why would you define a button if you didn't want to get drawn so we would say define draw and if you make a function inside a class it's always going to auto populate this first argument itself you want that leave that there if there's something that gets passed in additionally that isn't in the init function you can add extra parameters here so like let's say you were going to pass in color you could do that here as well but i recommend trying with your buttons to pass everything in initially in the class if you can okay so let's go ahead and just set up what we would want the draw to be and i think um typically we would want to kind of buttons or rectangles so let's just think of the button rectangle as being a pi game.rect.rect with a capital r for that second rect and if you're going to define a rectangle like this you just need to give it two sets of tuples so two sets of basically an x and y starting coordinate and then a width and a height and for the x and y starting coordinate it's going to be the self dot x pause and self dot y pause that we pass in when we define the button now here's where you could make size something that gets passed in here as well so you could have like a width and a height parameter in here i think it'll just look good to make our buttons a standard size so i'm just going to hard code these and say all of our buttons are going to be you know 150 pixels wide 25 pixels high you don't have to follow my standard here if that size if you'd rather make it something you could define button to button go ahead make these variables just like these are variables that's not how i'm choosing to do it okay so that's our button rectangle and it would be really easy to just start by saying pygame.draw.rect put this on the screen let's make it gray and then i didn't do an open parenthesis here put this on the screen make it gray for a wrecked argument so this third character inside of your function is looking for a rectangle we just defined a rectangle now let's say we want to be solid but we want to be a rounded rectangle with uh corners rounded off with a radius of five and then let's say we want to put text on the screen so here actually above we define button rect let's define button text as font dot render and then this we want to be the text is going to be self dot text just like that and then you have to give two more arguments to fully define a string of text for python you need to give it like anti-alias which is always true i think um i always just put true there i don't honestly know what happens if you put false and then uh color we're just gonna have it be black and so after we draw the rectangle order is important here because if you draw the text before you draw the rectangle the rectangle is going to be over the text you won't be able to read it but text is different than a rectangle it's not pygame.draw it's screen dot blit and then you give it the name of what you're blitting which is like block transfer onto the screen and so it's screen dot blit button text um and then we need to give it an x and y position so that'll be you know again self dot x pause self.ypaws but an important thing to know about text is uh you want it inside the rectangle so it's not a bad idea to just scoot it to the right and down a little bit so it doesn't touch the edges of your rectangles um and then this is kind of just a personal preference thing but i think that borders look pretty good on buttons so like we did the that rectangle is gray if we do the exact same rectangle as black and then we just give it an edge width of 2. now we're going to have this like not solid rectangle in black bordering the button so this looks pretty good and i think what we want to do is say when we initialize the button let's just call the self.draw function so no matter what when we create a button let's do self.draw just like that and let's make one of these buttons so let's say my button is going to be our button class and the text we want it to say is click me like that and then let's put it at 10 10 so that'll be in the top of the top of the screen and we'll just say true for is it enabled so to start we're saying okay our button is enabled now let's go ahead and run this and you can see we don't even have to tell it to draw or anything like that um we just can see that we get a button in the top left now we haven't told it to do anything if it gets clicked so we're going to do that next but just to show you how versatile a class is let's go ahead and make three of these so control v and control v and we'll call this my button two my button three and this one will be you know click me two and this one will be click me three and let's put them all on the screen and uh we'll just put them you know 30 apart or so okay so now bam we have three buttons nothing happens uh if we click any of them because we haven't put that in yet but just by setting this up as a class we get uh this really versatile function that draws them for us and all we have to do is give them x and y coordinates so now let's start actually making this a bit smarter so first off let's do if it's clicked um so let's make a function called uh check click so def check click okay and this is gonna be take the buttons position and check if it gets clicked and to do this we're going to take the mouse position which is really easy there's a pie game built in function called pygame.mouse dot get pause and it returns the x and y coordinate of your mouse as a tuple so pygame.mouse.getposition and then left click is equal to pygame.mouse.getpressed which is a built-in function that gets all three of the mouse buttons and whether or not they're currently clicked but we just want to check the left one so we check the very first index which is the zero index of this list of buttons that got pressed and then the button rectangle button wrecked is equal to and here's where uh you could probably say self.wrecked is equal to button wrecked but there's kind of an issue with that you're not sub you don't want to define these self dot whatever's outside of the init class so we're not going to do that we're just going to redefine the rectangle so button rect is equal to this rectangle but the reason we want to know the rectangle of the button is uh because what we want to do is check if the button if the left click button of the mouse is pressed and button wrecked dot collide point with the mouse position then we're gonna basically return that it was clicked so um if the left mouse button is clicked and the mouse position is somewhere over this button and the button is enabled so this is why we put that in there because if you need to disable the ability to press a button just disable the enabled functionality but if it's enabled and if you click on it then we want to return true now if any of those conditions aren't true we want to return false so else return false all right now what we could do is we could do it this way we could say my button three dot check click and let's just print that onto our terminal okay so we're gonna print check if my button three is clicked so now if i click anywhere in the screen we're getting false down the terminal let me turn this bigger and hopefully that looks better so now if i click on three we start getting true so we know our program is detecting whether or not we're clicking on a button but we aren't showing that anyway so what we want to do is uh we want to change our draw function to where the color of this rectangle is going to be based on whether or not it's being clicked so we'll do it this way we'll say if check clicked self dot check click then we'll just uh draw it as dark gray okay but then we'll say else and then we'll draw it as light gray so that should be a big enough difference that we can see it pretty easily when it's clicked and this should be all we have to do to get it to change state when it's clicked so let's click on three yep two and one so all of a sudden you can see i hope you can see um the color difference when you click on a button and so we're going to stop printing it out in the terminal we don't need that anymore where did i put that where's that print statement you guys oh there it is okay so now we are using this check click function but what we want to do first is say if self dot enabled so basically we want to draw a totally different rectangle um if self.enabled is false and so we'll come down here and say else and then we'll take this same rectangle but what we're actually going to do is draw a solid black rectangle if it is uh brain fart if it is disabled we're just gonna make it black so that way uh you won't be able to tell if anything happens when you're clicking on it so i'll make button two false so you can see what it looks like if a button's disabled so there's nothing going on here it doesn't look any different when you click it or anything but i can still click one and three all right and now it's hopefully pretty easy um and pretty obvious to see that you can use that check clicked function in the outside world to perform real operations and so what i'll do is i will say let's see um let's make the uh status of button one um button one enabled let's make this a variable okay so button one enabled i'm gonna put it up in the top and initially we'll call it true all right but now what we're going to do is we're going to set up a new loop that says uh if mouse pie game dot mouse dot get pressed zero um then and new press equals false so this is important um because we only want this code to operate once per mouse press so we need to make a new variable called new press that's basically checking is this the for did we just press this or not so initially it'll be true and actually that's what we want and new press is equal to true then we are going to basically check all of the buttons clicks and then set new press equal to false and then the only thing that'll set new press equal to true again is if pygame.getpressed is not true so if hang on let me get this typed and then i'll explain it what we're doing right here and not new press then we want new press equal to true so this little four lines of code that we wrote here is basically saying if the left button is pressed and we haven't already clicked something set this equal to false but then we'll check and see if all the buttons were clicked but if the uh left button is released and it's not currently new press so this is false because we've already clicked set it back equal to true and this new press is just how we're going to control whether or not we should check the buttons because we only want to check them once per time the mouse is clicked since this code is ever is only going to execute once we will use this to check our one-off button scenarios so we will say if my button three dot check click so this is checking to see if we're clicking on the button when we click down on the mouse and so if it is clicked then what we'll do is we'll say if button one enabled then button one enabled equals false and then else button one enabled can equal true and so basically what we're doing here it might seem goofy but we're going to enable or disable button one based on if we're clicking on button three so let's go ahead and run this just to make sure we did that right so if i click three you can see it's enabling and disabling button 1 but if i hold it down it still only does its code once so basically that shows how to create a toggle button now let's show how to create a momentary button so you come out of this like new press kind of complicated logic that i said and we'll just say if my button two dot check clicked then we'll say um button text equals font dot render and we will say button to hat is being pressed and that'll be the text we'll say true and we'll make it black and we'll put it on the screen here so true there we go and we will say screen dot blit r button text and then just x and y coordinates let's just put 200 200 that's around the middle of the screen i think maybe 100 200 looks better but now i'll show you that's a momentary button so if i'm clicking me too button two is being pressed that happens while the button is being pressed but as soon as i let go of it it's gone and it's momentary so i have to hold the button down whereas clickme3 is a toggle button so it's like only one thing happens um per click and so those are the two different ways that you can use the button from the same class and so i'm probably gonna stop here because i know this video is getting kind of long for a basic concept tutorial but i hope this shows how to set up a class how to create buttons in python using the pi game graphical user interface and a few different ways that you can use those buttons to do different things in your games hopefully you found this enjoyable i hope i didn't miss anything major that you were hoping to get answered if you do have further questions just let me know about in the comments below i'll get back to you as soon as i can thank you so much for checking out the channel thanks for watching and good luck with your code thanks bye