How to Create a Button in Pygame [CODE IN DESCRIPTION]

Key Takeaways

hey guys and welcome back to another YouTube video so in today's video I'm just doing another tip and uh trick for p game and in this one I'm going to be showing you guys how to make a rectangular button now this is fairly simple although I've made it a little bit more complex just so that you can do more with the button I'm going to show you a quick example of here of what my button looks like so I've just got a nice green button here it says click me and you can see when I hover over top of it it changes colors now I know you probably don't want your green bun to change red but you can change color that it changes to I've just done mine red so it's easy to see and we have text in the middle of the button if you notice it's pretty well directly in the middle um maybe it could be moved down a little bit in the Y actually no it looks pretty good uh in terms of being pretty centered that's what I've tried to do there and if I click the button you can see behind me on the console it says click the button if I click outside of the screen it's not working my mouse has to be on the button for that to work so if you want to learn how to do this make sure you stick around for the rest of the video uh and if you're really not interested in how it works and you just want the code go ahead and go down to the description down below and I'll have the code uh the class for my button if you want to just copy and paste that into your own program uh and you're going to have to figure out how to use it on your own though if you don't watch the rest of the video so let's get into the uh kind of explanation here now so pretty much uh it's really easy to do things in an object oriented way uh when you understand classes and you understand objects if you don't know what those things are and you want to learn I do have a p uh python just regular python Series where I talk about how those uh things work and if you learn those it's really useful uh for just your coding ability so I'll put a a card for that in the top right hand corner now anyways I've created a button uh a button class now it takes your standard uh parameters here when you create a new object takes color X Y width height and then an optional parameter of text so that means you can have a button that has text on it or a button without text on it now here it has two main methods it has a draw method and it is over method now this is over method is going to save you a ton of time and I'll go into that in a second the first one we're going to talk about is the draw method so pretty much this takes a parameter of win and then outline now what this outline parameter does here is it allows you to have an outlined button so I'll show you here when I draw if I just change this how the outline will work uh it's easier shown by demonstration so now you can see that my button has an outline because I've simply added uh a color for the outline when I'm drawing the button sorry I kind of skipped over a few things I'll go back here so pretty much when you want to draw the button you just call whatever the name of your button is in this case I called mine green button and then do draw which I did right here you give it a window or Surface to draw it onto uh in this case mine's just the window that I created up top here and then if you want to you can give it a color for a possible outline now my outline is two pixels thick but yours could be four eight uh you can change that if you'd like within the class so what happens here is if we have an outline color we're going to draw a rectangle that is slightly larger than the original rectangle that has an outline and the way that we do an outline is we just subtract two from both the X and the Y and then we add four to the width and the height so that way as we move back to if we only added two you'd only see an outline on the left hand and the top hand side so by adding four you see it on all sides and if you want this outline to be thicker just multiply these numbers and whatever you do to these numbers you got to do to these ones and that'll work all right and then we just draw a regular rectangle uh the one that we've defined up here so we have a color X Y width height and then if we have text we uh I just create text with this font here obviously you can change the font if you want you can change the size uh I render it out uh make it I just default it to black but again you can change that color and then this long mess here is what centers it in the middle of the button I did that for you guys so that it's easier when you're using it and then this is over method here pretty much checks if your mouse is over top of the button so the way that you use this is it's going to return a true or a false value so uh you just call green button do is over you give it a coordinate so uh just the mouse position is what this one takes but you could just give it like an XY and a tuple and that would work as well and it tells you if that position is over top of the mouse it just does that by doing a quick little uh comparison here if you watch my Pi game programming Series where I made a game then I do a similar thing in that and yeah it just gives you either true or or false so then that way you can tell if you clicked the button or you did not all this mess down here is just me um implementing the button into a program that I made really simple all I do is just have a button that has the what you guys saw uh or have a window that has a button on it when you click it it says click me so I'll show you how I Implement all these things in here um pretty much we just do a basic uh game loop we're just redrawing the window every frame by using this and I create the button by just doing green button and then a new instance the button so button that's what I called my class we give it a color XY with height text down here uh we get the mouse position every time an event happens and then if we're clicking our Mouse button so you can probably hear me clicking now then it's just going to call this method so green button. is over if we're over top of it it's going to say you clicked on the button now this is where things are I wouldn't say tricky but a little bit different um when we're ever whenever we're moving the mouse so we're going to check to see if the Mouse is over top of the green button this doesn't mean we've clicked on it it just means that we're hovering over top of it and then what we're going to do is if we are hovering over top of it so if this is true then we are just going to change the color to Red um and if we're not hovering over top of it we're going to change the color back to its original color of green so I hope this helped you out uh if you want to just take the code for it you can play around with this class simply just I'm going to put this in the description down below copy and paste into your program if you guys have any questions feel free to leave a comment down below I try to respond to all my comments and if this video helped you out please help me out by leaving a like and subscribing and I'll see you again in another video [Music]