Drawing shapes, colours and text

Coordinates start at the top left

The point (0, 0) is the top-left corner of the window. x grows to the right and y grows downwards, so in a 480 by 320 window the bottom-right corner is (479, 319). It is the opposite of graphs at school, where y grows upwards.

Colours and shapes

A colour is three numbers from 0 to 255: how much red, green and blue. Naming them once at the top keeps the drawing code readable.

• pygame.draw.rect(screen, color, (x, y, width, height)) draws a rectangle from its top-left corner. border_radius rounds the corners.
• pygame.draw.circle(screen, color, (x, y), radius) draws a circle around its centre.
• pygame.draw.line(screen, color, start, end, width) and pygame.draw.polygon(screen, color, points) draw lines and any shape with corners.

Give any shape a last argument such as 3 and it draws only an outline that many pixels wide. Shapes drawn later go on top.

import pygame

pygame.init()
screen = pygame.display.set_mode((480, 320))
clock = pygame.time.Clock()

SKY = (90, 162, 224)
GRASS = (110, 200, 120)
WALL = (240, 150, 60)
ROOF = (235, 95, 85)
SUN = (255, 212, 59)
DOOR = (48, 105, 152)

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

    screen.fill(SKY)
    pygame.draw.rect(screen, GRASS, (0, 240, 480, 80))
    pygame.draw.circle(screen, SUN, (400, 60), 34)
    pygame.draw.rect(screen, WALL, (140, 150, 160, 110))
    pygame.draw.polygon(screen, ROOF, [(120, 150), (220, 80), (320, 150)])
    pygame.draw.rect(screen, DOOR, (200, 195, 40, 65), border_radius=6)
    pygame.draw.rect(screen, (255, 255, 255), (155, 170, 30, 30), 3)  # an outlined window
    pygame.draw.line(screen, (60, 120, 70), (0, 240), (480, 240), 4)
    pygame.display.flip()
    clock.tick(30)

pygame.quit()

Text

Text is drawn in two steps. font.render(text, True, color) makes a small picture of the text, and screen.blit(picture, (x, y)) pastes it on the screen. pygame.font.Font(None, 36) is pygame's built-in font at size 36.

To centre text, ask the picture for a rectangle centred where you want it: picture.get_rect(center=(240, 160)).

import pygame

pygame.init()
screen = pygame.display.set_mode((480, 320))
clock = pygame.time.Clock()
font = pygame.font.Font(None, 36)
big_font = pygame.font.Font(None, 72)
score = 1250

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

    screen.fill((16, 18, 22))
    screen.blit(font.render(f"Score {score}", True, (230, 232, 235)), (16, 14))

    title = big_font.render("Game over", True, (255, 212, 59))
    screen.blit(title, title.get_rect(center=(240, 160)))
    pygame.display.flip()
    clock.tick(30)

pygame.quit()

Your turn

Change the programs above in the game panel, then press Run.

• Add a tree beside the house: a brown rectangle for the trunk and a green circle on top.
• Give the house an outline by drawing the same rectangle again with a width of 3.
• Write your name in the middle of the sky with a font of size 48.

Breakout draws its whole screen with rectangles, circles and text. Open Breakout.