A window of your own

So far your programs have printed text and read what the user types. In this part you'll write programs with graphics: a window with pictures in it that move and react to the keyboard and the mouse. The tool for it is pygame, a library for writing games in Python. A library is a collection of modules that someone else has written for you to use. Unlike math and random, pygame doesn't come with Python: on your own computer you'd install it first with the command pip install pygame-ce (pygame-ce is the actively developed edition of pygame, and programs still say import pygame). On this site there's nothing to install. The site runs pygame for you and shows its window on the page.

A first window

Here is a complete pygame program. It opens a window and fills it with dark blue:

import pygame

pygame.init()
window = pygame.display.set_mode((320, 240))

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

    window.fill((0, 0, 120))
    pygame.display.flip()

pygame window320 × 240

The window as text

fill (0, 0, 120)

Line by line:

• import pygame takes the library into use, and pygame.init() starts its parts. Call it once, at the start of the program.
• pygame.display.set_mode((320, 240)) opens a window 320 pixels wide and 240 pixels high. A pixel is one dot of the picture. Note the two pairs of parentheses: the size is one tuple, (320, 240). The function returns the window, and the variable window keeps it, so that the program can draw in it.
• while True: starts the main loop. A game runs until the player closes it, so its loop never ends on its own.
• pygame.event.get() returns a list of the events that have happened since the program last asked: key presses, mouse clicks, and a click on the window's close button. Closing the window is an event of the type pygame.QUIT, and exit() ends the program right there. Without these lines the close button would do nothing.
• window.fill((0, 0, 120)) paints the whole window with one color.
• pygame.display.flip() shows what has been drawn. The drawing happens out of sight, and flip shows the finished picture all at once, so the player never sees a half-drawn one. Each picture shown is a frame.

So every round of the main loop does three things: it handles the events, draws the picture and shows it. Here the picture is the same in every frame. In the next module it changes a little from one frame to the next, and that's animation.

You may see pygame programs that draw their picture once, before the main loop, and then only wait for events. That works here too: the window keeps showing that picture until it's closed. But games redraw in every round, because their picture changes, and the programs in these lessons do the same from the start.

Colors

A color is a tuple of three numbers from 0 to 255: how much red, green and blue light it has. It's called an RGB color.

The colors mix like light, not like paint: red and green light together make yellow. Smaller numbers make darker colors, so (0, 0, 120) is a dark blue.

pygame also knows the names of many colors. pygame.Color turns a name into its RGB numbers:

import pygame

orange = pygame.Color("orange")
print(orange)
print(orange.r, orange.g, orange.b)

Color(255, 165, 0, 255)
255 165 0

The fourth number is the color's alpha, how solid it is: 255 means not see-through at all. window.fill("orange") works too, but with RGB numbers you can mix any color you like.

The window on this site

The window here has no screen of its own. The site runs your program for a number of frames and then closes the window: the program gets a pygame.QUIT event, and exit() ends it. Press Play under an example to watch its frames.

The site also keeps the window as text: a line for each thing drawn in the window since it was last filled with one color. The window above, as text, is:

fill (0, 0, 120)

The checks of a challenge compare the last frame of your window, as text, with the model solution's, and they compare how many frames it showed. That's what "Your window should end like this" on a task card is: the window your program should end with. Open "The window as text" under its picture to see exactly what your program should draw.