Game Development in Python 3 With PyGame - 12 - Button interaction

Key Takeaways

what's going on everybody welcome to another P game tutorial video in this video we're going to be building on the last video in our sort of like miniseries in P game about how to make buttons in P game so um the way that we're going to give the feel of an interactive button is by having the button change color as we hover it so this is something that happens with like URLs right you have um you hover the mouse over URL and it underlines itself and sometimes it changes color um so this gives the idea to somebody or gives the impression to somebody that hey this is interactive maybe we can click it and so that's how what we're going to do with our buttons as well and actually a lot of buttons um have like hover um attributes to them um as a part of the CSS so uh that's what we're going to do people seem to find this um understandable as a clickable thing you know if it if it lights up so um that's what we're going to do so we'll come down here we've got our buttons oh and and since we want to make it a lighter color we have to define the lighter colors so here we've got red and green um I'm going to make red a little darker and since we're using RGB it's based on light so how would we make make red darker well we would take away some light so red will be 200 now and then we're going to Define brightcore red and then oops uh write underscore green equals equals and a bright red would be 255 and a bright green would be 0 255 easy enough now we'll come down to our game intro and we're going to make these buttons um interactive so how would how will we make them interactive first of all again a computer doesn't know that like oh he's over that green block you know it doesn't know that but what we can do is we can inform of it inform it that we are and as you saw with the events it's it's printing out the position of our Mouse constantly so we can grab that information so first of all how do we grab that so we'll just say mouse equals and this is py game. mouse. getor position and and Just for kicks let's go ahead and print Mouse and see what it says and then also I'm going to go ahead and comment out the print events that way we can see it um so we'll save and run that and you can see here that it is going crazy printing out this tupal about the location of the mouse so no matter where our Mouse is it's giving us a tupal of the X and Y location so how might we bring this button lighter bring it to light well anytime our our Mouse is within the coordinates of this box we we can know that by visiting this number so when it is we since we're drawing in frames per second we can light up the box use a lighter color to draw the box and it'll appear as if the box is interactive in some form or fashion so we'll close out of this and come back down here there's our Mouse we'll just we don't need to print it out every time so I'm just going to comment that out and then we ask the question um if we're going to have an if statement and it just needs to be in between the X and the X plus the width and the Y and the Y plus the width and as long as the two positions are within those values then we're within the box so um let's just write it out because that might sound confusing but if 150 so if the x coordinate plus the um let's see 150 Plus 100 so if the x coordinate plus the width if that is greater than the mouse position zero so the x value so if our x value of the mouse is greater or is less than um 150 plus 100 so that's like the right side of the Box while that while that exp position of our Mouse is simultaneously greater than 150 which is the x coordinate um we're doing good so far now we would just say if that's the case and uh for 50 + 50 right the Y location plus 50 so like the bottom of our box is greater than the mouse location um of the first element or first element so the Y of our Mouse with when it is s simultaneously greater than just straight up the Y so between the top and the bottom of the Y then it just so happens that we are within the boundaries of our uh uh box so we would draw this as um bright green I'm just going to leave that there for now we'll edit that to bright green in just a moment if that's the case um it would be bright green and then L's if it's not within all of those uh parameters then we'll just draw it as green so this need this green becomes a bright green and that should be it so now when we save and run this we have our game here and you can see that now when we hover over our little button here it it lights up as we hover over it and again it's not like the button is really interactive but it it's starting to feel somewhat Interactive because of this illusion that we're giving the user so um now what's left for us to do with this button well we need to put some text on the button and then the button needs to actually do something when we click on the button uh this is both of these things are easy enough but the other major thing that we need to do is we want to actually build a button function because right now our our you know code is already basically this big you know we could ignore some of these empty lines but I mean we've got a decent amount of code piling up here and at the end of the day it would be better to just have a function where we call like button what does the button say where is the button period and then or like what does the button do so we're going to have to add all of that stuff so anyway in the next video uh I think we'll probably throw text on here and then after that we'll make the button function so to speak but um that's what you guys have to look forward to so as always thank you for watching thanks for all of the support and subscriptions and until next time