Creating Buttons in Pygame

This tutorial explains how to create Buttons in Python Pygame.

Pygame doesn’t actually have some kind of button widget that you may expect to see in a GUI library like Tkinter or PyQt5. However, using a combination of various features, we can put together something just as good.

Creating Buttons

The first thing to do is to create the actual appearance of the button. This includes the text, color and shape of the button. Luckily we can achieve all of this within a single line by using the draw.rect() function.

color_dark = (100,100,100)
...
...
pygame.draw.rect(displaysurface, color_dark, [590, 315, 80 , 30])

It takes as first argument, the window that we created (displaysurface), followed by the color (which we created previously as a tuple). Lastly we create a list with 4 values in the following order, x-coordinate, y-coordinate, width and height.

You can place this line of code anywhere, inside the game loop or out of it. Keeping within the game loop will render it with every iteration of the loop. Whereas keeping it out will render it only once (saving resources). It’s upto you where to keep it, based off your requirements.

Adding Text to Buttons

Keep in mind that the above code just creates a colored rectangle which barely qualifies as a button. In order to complete the button, we should add some text to it first.

If you have any trouble understanding the way we created text here, check out the Pygame Fonts and Text tutorial.

smallfont = pygame.font.SysFont('Corbel',16) 
text = smallfont.render('LOAD' , True , color_light)

displaysurface.blit(text , (600 , 320))

With the addition of these two lines right after the draw.rect() code, you can render the text “LOAD” over the button. (You can move the text render function out of the game loop as it only needs to generate once)

This what the button we created looks like.

Making Buttons Interactable

What we’re going to do is return the position of the mouse in every cycle of the game and determine if the mouse has been pressed (clicked) or not.

mouse = pygame.mouse.get_pos()

The above code is a line that must be added into the game loop to return the updated position of the mouse on every frame.

Using the mouse position, we will determine whether it is hovering over the button we created or not. If it is, we will also check to see if the mouse has been clicked. If both statements are true, we will activate the function that button is meant to be linked to.

(In this case, the code which will execute when the button is clicked, is in the load() function of an event handler object)

while True:  
    for event in pygame.event.get():
        # For events that occur upon clicking the mouse (left click) 
        if event.type == pygame.MOUSEBUTTONDOWN:
              if 590 <= mouse[0] <= 670 and 315 <= mouse[1] <= 345:
                    event_handler.load()

You may find this confusing, so go back to look where we drew our button. Then come back here and look at the coordinates range given here. You should realize that the button falls within this range.

Note: It’s important to remember the logic behind the creating of these buttons in pygame. It’s not that clicking that text or colored box will activate the function. It’s the act of clicking that specific area on the screen that does it. Even if you were to remove the text and color, that area of the screen would still be clickable.

However, we can change this behavior slightly by instead comparing collisions between the mouse cursor and the button rect. In theory it’s the same concept, but it’s a easier to manage and scale up for many buttons.

This marks the end of the Creating Buttons in Pygame tutorial. Any suggestions or contributions for CodersLegacy are more than welcome. Questions regarding the article content can be asked in the comments section below,