Creating an animated button in Pygame

A simple elevated button made in pygame.
Timestamps:
00:00 - Intro
00:21 - Basic logic
01:58 - Creating the basic button
11:40 - Click logic
19:03 - adding styling / elevation
Code: github.com/clear-code-project...

[@mixlaproduction]

Awesome tutorial 💯 Now I just need a game for it

[@amburger1984]

make a click me game where you click the button and you get 1 point

[@carloscardoso2806]

You are awesome, I don't even speak English fluently but I've already learned so much from your videos. I wish you every sucess and happiness. Thank you!

[@stoufa]

Great tutorial! I learned PyGame from your videos, so, thanks a lot of the effort! 😊👏 I would add a "self.pressed = False" in the else block of the "self.top_rect.collidepoint(mouse_pos)" check, just to invalidate the click if the user clicks and release the button outside the button bounding box, we fixed this aesthetically but the click registers once we go back to the button (once we hover back on the button even without clicking!).

[@genericgamedev1304]

I combined this with the JSON tutorial to create the ability to clear scores and delete the text file. Thanks for the tutorials.

[@shuaibbenhamouda548]

i literily love you your so underated it makes me sad how underated you are

[@Klannahar]

I did my button class on different way (more complex), but this tutorial is explain it well enough to understand for beginers as well. ;-) I did not know u can set up border radius. :D I made mine with 2 cirlce and 1 rect what looks cool. :)

[@Klannahar]

Rounded edge come to pygame with 2.0, good to know.

[@razedphoenix8226]

Thanks for this awesome tutorial :)

[@rubentorres7429]

We want more videos! Saludos desde argentina hermano

[@codingperks]

Awesome! But you should create an inherited class for the elevated button to make it cleaner

[@angadsingh6478]

finally i can make a start menu for my game

[@jewie3171]

Great Tutorial

[@mathnovice8886]

there's a bug in this code, u didnt set self.pressed to False when the rect is not colliding with the mouse_pos. So, let's say, if I move my cursor to the rect and hold left click, self.pressed will become True, now if i move my cursor away from the rect and release the left click, self.pressed is still True. This means that the next time the rect collide with my mouse_pos, even if i m not left clicking, it will still execute the code inside because the self.pressed is not set to False. I think you need another self.pressed = False at the else part (if self.top_rect.collidepoint(mouse_pos) is False)

[@pcb5135]

Nice catch

[@carlfranz6805]

Nicely done. Very clear as usual. I very much prefer your tutorial style to most of the others. 👍 Just one minor question... what do you return from the class to notify the rest of the program that a click has happened and not get a bunch of clicks? Returning self.pressed from the draw method isn't it. But I'll admit I'm just a little drunk so might be a little thick.

[@generalsteam1120]

This is my problem too! My guess is to create a method to check if the button is clicked and add another variable to the button class that tracks if that button was clicked that cycle for the new method to return.

[@Klannahar]

@Clear Code : Idk if u reading comments or not, but i would like to ask u, about on click events. I made like 2-3 different way to work, but idk what would be the best solution for it. I do have a base button class, and some other custome button class what inherit from base button and then i just instantiate the custome buttons as many times i want. The button settings such as pos, width, height, color etc are stored in a configuration (ini) file.

[@viiia11ctsebastian57]

Nice

[@linuxeducation4058]

This button style was added in Duolingo ;)

[@neutrinosssss]

Hi clear code. Can you make a tutorial about making mobile apps using KiVy?

[@pranavnyavanandi9710]

Yes, I am looking into app making as well. I would like details about aspects like networking, db connectivity, etc. The process of how exactly an app is made. You have any tips? Thanks.

[@samedifference5504]

how can you use the button with local variables, (I am currently using tons of global variables inside button logic)

[@Hoco30]

You can use ic in debugging. Wich pritns better then python's print thing and saves your time. And thank you for this tutorial! Iwas searching for how to make button in pygmae and I didn't understand anything but you have expalained very well hope you write a book about pygame.

[@yashmityadav47]

If i have to add different functions on different buttons rather than "click" so how I can do this

[@woutrottiers910]

can you make an tutorial on classes?

[@Klannahar]

Check Corey Schafer's python OOP tutorial videos. He have good one what i can recomed.

[@NolanMurphyWhitehead]

I'm having an off problem with this. I created a button and it works fine, but when I try to create more than one button, only the first one works. Any tips for this?

[@haridasmahato4312]

Can you make a video on how to make a pop up window using pygame only there is no video on KZbin

[@Joana-dv9mm]

hi!! can i make it a clickable link? I was searching for that but i'm not really sure if I can

[@ClearCode]

this should help: stackoverflow.com/questions/68761290/how-to-insert-url-link-inside-a-pygame

[@Joana-dv9mm]

@@ClearCode but when i put it opens a black screen how can i put it inside the platform i have? edit: i got this one but the link is not moving acording to the world.. its static in the coordinates i defined. How can i put them moving?

[@krentor1]

how did you learn this dude this is so hard

[@rittwikde5145]

@Clear Code how to make a classic bounce game.. it's pretty tough sir cannot understand the logic please make a tutorial on it

[@rittwikde5145]

I tried it.. I don't get how to get the obstacles in a random position

[@4B3K_]

@@rittwikde5145 you could use random.randint() to get random numbers

[@span4ev]

I looked for 10 minutes and I can't figure out why screen and gui_font are not passed to the Button class instance? Yes, it works, but why does it even work? When creating an instance of a class, these arguments are not passed to it. Shouldn't it be like this? : classButton: def __init__(self, screen, pos, width, height, gui_font, text):

[@parupururin]

Because the way it is implemented, screen and gui_font are both global variables. So they could be acceded for any code scope.

[@SKSam-bq6zt]

YEYYYY he's back

[@gokulprasanth3942]

How to get source code from python apps? Please make as video

[@Klannahar]

What do u mean? If u have the ".py" file then u have the source code. It is not exe what u can not read directly as a text file.

[@abrarmasumabir3809]

please make a video on how to make a pygame for android using pygame subset for android....plz❤❤❤❤❤

[@Klannahar]

For android u should use kivy instead of pygame since pygame not supporting multi touch, while kivy does and pygame is not realy for android.

[@abrarmasumabir3809]

@@Klannahar kivy sucks...it's just a beginner library for newbies....

[@Klannahar]

@@abrarmasumabir3809 May i ask you why do you think that?

[@abrarmasumabir3809]

@@Klannahar You will find professional game dev people who use pygame but no one takes kivy thar seriously cause it's just a nooby python library.

[@Klannahar]

@@abrarmasumabir3809 Well pygame and kivy made for 2 different resion. U can make game with both and android / ios app with i beleave both, but kivy for sure. For android app i still say kivy is better, but for games pygame is better (not on phone).

[@chalkypj]

Fantastic tutorial helped me a lot. However I am relatively new to python and pygame and have integrated this into a simple program I'm writing and it works well apart from one little problem. When I click the button I created, the code I wrote for the click runs too quick and I lose the animation of the button. Apart from not seeing the animation, everything works fine. I'm probably being dense and just don't fully understand the code.

[@ClearCode]

hey, not sure I understand the problem. How does the rest of the code affect the animation of the button? And I now the feeling of code not working, happens to me all the time as well :)

[@chalkypj]

@@ClearCode What i have is a Game class that holds the button class. I have a quit button that I simply want to use to quit the game and I use an if statement to check if it has been pressed 'if self.quitBtn.pressed:' I quit from inside the statement and it works fine apart from I don't get to see the button animation.

[@magictech19]

I think u need to set a max framerate so that it runs a little slower

[@magictech19]

not sure though

[@aditgaur1585]

3rd

[@VexYTGX]

Second:(

[@harshdhami3065]

First

[@quannguyenhoang1218]

4th :((

[@murilo0825]

so you tellin me it takes a whole class just to make a button in pygame? ☠

[@bobojenkins5805]

so if you have 3 buttons youre looking at 160 lines of code. Nice.

[@toshiroutte]

No You just add 2 more button objects and draw them in the loop, it's just 4 extra lines of code.

[@anakakaenekulo2975]

R u restarted?