Outlines and Corners

Part of the The Game Loop section of Coddy's Pygame journey. Lesson 10 of 32.

Every shape so far was filled. Give a shape a width and pygame draws only its edge, that many pixels thick:

pygame.draw.rect(screen, (240, 240, 240), (100, 100, 120, 60), 2)
pygame.draw.circle(screen, (240, 240, 240), (300, 130), 30, 2)

A width of 0, or no width at all, fills the shape. This works the same for rectangles, circles and polygons.

Rectangles can also have rounded corners. border_radius is the radius of each corner's curve, in pixels. Pass it by name, after the other arguments:

pygame.draw.rect(screen, (80, 160, 255), (100, 200, 120, 60), border_radius=10)

Buttons, panels and health bars often use both: a filled, rounded box with a thin outline around it.

Challenge

Easy

Turn the box into a button:

Give the blue box border_radius=12.
After it, draw a white (240, 240, 240) outline at (130, 130, 220, 80), 3 pixels wide, with border_radius=16.

Try it yourself

import pygame

pygame.init()
screen = pygame.display.set_mode((480, 360))
pygame.display.set_caption("Button")
clock = pygame.time.Clock()

running = True
while running:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False

    screen.fill((30, 30, 46))
    pygame.draw.rect(screen, (80, 160, 255), (140, 140, 200, 60))
    pygame.display.flip()
    clock.tick(60)

pygame.quit()