Lesson 1

Objectives

Pygame fundamentals

• Create a window and set its title
• Explain how colours are represented
• Describe the purpose of the game loop and event loop
• Use a Clock to control framerate
• Explain why the display must be updated each frame

Drawing and animation

• Draw basic shapes (circles and rectangles) at given positions
• Update variables each frame to create movement
• Modify speed and direction of movement
• Use WIDTH and HEIGHT in calculations to position shapes

Behaviour

• Describe what happens when shapes move beyond the window boundary
• Use simple selection to keep a moving shape within the window boundary

Code quality

• Identify and replace magic numbers

File

Make local copies of the following file before you start.

main.py

import pygame
import sys
 
pygame.init()
 
WIDTH = 600
HEIGHT = 400
 
screen = pygame.display.set_mode((WIDTH, HEIGHT))
pygame.display.set_caption("My First Pygame Window")
 
clock = pygame.time.Clock()
 
x = 300  # shape's starting x-position
 
running = True
while running:
    # --- EVENT HANDLING ---
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False
 
    # --- UPDATE WORLD ---
    x = x + 1
 
    # --- DRAW WORLD ---
    screen.fill((255, 255, 255))
    pygame.draw.circle(screen, (0, 0, 255), (x, 200), 40)
 
    pygame.display.flip()
    clock.tick(60)
 
pygame.quit()
sys.exit()

Predict

Predict answers to the following questions without running the program.

1. What colour will the background be?
2. What shape will be drawn? Where?
3. What will happen to the shape over time?
4. What does clock.tick(60) control?
5. What will happen when you close the window?

Run

Run the program. Compare your predictions to the actual behaviour.

Investigate

Answer these questions by examining the code.

1. On what line is the window size set?
2. How would you double the window size?
3. What does changing the line pygame.draw.circle(screen, (0, 0, 255), (x, 200), 40) to pygame.draw.circle(screen, (0, 255, 0), (x, 200), 40) do?
   • What does this tell you about how Pygame represents colours?
4. Which line number makes the shape move?
5. Which line number is responsible for drawing the shape?
6. What happens if you comment out the line pygame.display.flip()?
   • What does this tell you about what this line does?
7. What happens if you comment out the line clock.tick(60)?
   • What does this tell you about what this line does?
8. What happens when the shape reaches the edge of the window?

Modify

Make changes to explore how the code works.

1. Identify and remove at least three magic numbers by replacing them with variables.
2. Change the colour of the background to a colour of your choosing.
3. Replace the circle with a rectangle (see the Pygame docs)
4. Make changes to the movement of the shape:
   1. Make it move faster
   2. Make it move in the opposite direction
   3. Make it move diagonally
5. Add a new shape that is centred based on a calculation using WIDTH and `HEIGHT
6. Prevent the shape from leaving the window.
   • Hint: use selection and check the x-coordinate relative to WIDTH and HEIGHT

Make

Animation

Create a small animated scene using only things covered so far.

Requirements

Your animation must include:

• One static shape
• One moving shape
• At least one colour change
• One use of WIDTH or HEIGHT in a calculation

Ideas to try

• A rectangle sliding across the screen
• A circle moving diagonally
• A shape that changes colour once at startup
• A shape that changes colour every 10 clock ticks
• Something positioned using WIDTH // 3 or HEIGHT // 4

Screensaver

Requirements

Create a short Pygame ‘screensaver’ with multiple animated elements. Be as creative as you like.

• At least four animated shapes
• At least one shape whose movement changes over time (e.g., speed or direction)
• At least one shape that bounces off the edge of the window (separate to the shape above)
• A colour change that happens during the animation
• A timed event: after some amount of time, something must change (e.g., a shape appears/disappears, colour change, movement change)

Options

Choose two or more optional enhancements:

• A shape that follows a curved path
  • Hint: change both x and y each frame by different amounts
• A shape that grows or shrinks in size
• A fade effect using gradually changing background colours
• A simple caption or title drawn using pygame.font
• A shape that ‘reacts’ to another (e.g., follows it, changes colour when near it)
• Encapsulate a shape and appropriate attributes in a class (e.g., position, speed, colour, update method)