GTA East Academy

PY-1.2-BP3-MQ55

See All Your Mouse Clicks and Scrolls

We will make a Pygame window that tells you which mouse button you press and how much you scroll. It will print a number for each button you click, and numbers for how much you scroll up, down, left, or right.

Here is what the program will show you:

1
3
2
Scrolled: x=0, y=1, device=0  # Scrolled up with mousewheel
Scrolled: x=0, y=-1, device=0 # Scrolled down with mousewheel
Scrolled: x=1, y=0, device=0  # Scrolled right with mousewheel
Scrolled: x=-1, y=0, device=0 # Scrolled left with mousewheel
Scrolled: x=0, y=1, device=1  # Scrolled up with touchpad

See What's Not Working

Run this command to see what parts of your code are not working yet.

pytest module-1.2/blueprint-3/quest-55

Here's what we expect to see:

  • ❌ test_prints_correct_button_on_clicks

Write Your Code

Now it's your turn to write the code in main.py!

Your program needs to listen for mouse clicks and scrolls. When these happen, it should print the number for the button or the scroll amount.

Here are some examples of how Pygame works. These examples show different ways to check for mouse events.

import pygame

# Example: Checking for any mouse button press
def check_any_mouse_button(event):
    if event.type == pygame.MOUSEBUTTONDOWN:
        print("A mouse button was pressed!")

# Example: Checking for mouse scroll events (modern Pygame)
def check_mouse_scroll(event):
    if event.type == pygame.MOUSEWHEEL:
        # event.x and event.y are integer scroll amounts
        # event.which indicates the device (0 for mouse, 1 for touchpad)
        print(f"Scrolled: x={event.x}, y={event.y}, device={event.which}")

# Example: Getting the button number from a mouse click
def get_button_number(event):
    if event.type == pygame.MOUSEBUTTONDOWN:
        return event.button
    return None

# Example: A basic game loop structure
def simple_game_loop():
    pygame.init()
    screen = pygame.display.set_mode((600, 400))
    running = True
    while running:
        for event in pygame.event.get():
            if event.type == pygame.QUIT:
                running = False
        pygame.display.flip() # Show on Screen
    pygame.quit()

See If It Works

Run this command again to see if your code works.

pytest module-1.2/blueprint-3/quest-55

Here's what we want to see:

  • ✅ test_prints_correct_button_on_clicks

Documentation

Pygame Mouse Input and Drawing: Reference

This document provides a quick reference for key concepts and functions related to handling mouse input and drawing basic shapes in Pygame.

The Anatomy of a Game Loop

A typical Pygame application uses a main loop that repeats continuously. This loop is often structured into distinct phases to manage the flow of the program.

  1. Process Input: Check for user actions (events) like mouse clicks, key presses, or closing the window.
  2. Update State: Modify variables and game elements based on the input and game logic.
  3. Render (Draw): Clear the screen and draw all visual elements in their current state.
# Basic structure of a Pygame game loop
running = True
while running:
    # Phase 1: Process Input
    for event in pygame.event.get():
        # Handle events here (e.g., check event.type)
        pass

    # Phase 2: Update State
    # Modify game variables here

    # Phase 3: Render
    screen.fill(BACKGROUND_COLOR) # Clear screen
    # Draw game elements here
    pygame.display.flip() # Update the display

# After the loop exits
pygame.quit()

Diagram showing the cyclical nature of a game loop

Handling Events

Pygame collects all user actions and window events in an event queue. You access these events using pygame.event.get(), which returns a list of all events that have occurred since the last call.

# Inside the main loop
for event in pygame.event.get():
    # Check the type of the event
    if event.type == pygame.QUIT:
        # Handle window closing
        pass
    # Check for other event types...

Handling Mouse Events

Mouse actions generate specific types of events.

Common Mouse Events

  • pygame.MOUSEMOTION: Occurs when the mouse cursor moves over the window.
  • pygame.MOUSEBUTTONDOWN: Occurs when a mouse button is pressed down.
  • pygame.MOUSEBUTTONUP: Occurs when a mouse button is released.
for event in pygame.event.get():
    if event.type == pygame.MOUSEMOTION:
        # Code to run when the mouse moves
        pass
    
    if event.type == pygame.MOUSEBUTTONDOWN:
        # Code to run when a mouse button is pressed
        pass
        
    if event.type == pygame.MOUSEBUTTONUP:
        # Code to run when a mouse button is released
        pass

Reading Event Data

Event objects contain attributes that provide details about the event.

  • event.pos: A tuple (x, y) representing the mouse coordinates at the time the event occurred.
  • event.button: An integer indicating which mouse button was pressed or released (only for MOUSEBUTTONDOWN and MOUSEBUTTONUP events).
    • 1: Left button
    • 2: Middle button
    • 3: Right button
    • 4: Scroll wheel up
    • 5: Scroll wheel down
# Example of accessing event attributes
for event in pygame.event.get():
    if event.type == pygame.MOUSEMOTION:
        mouse_position = event.pos
        # Use mouse_position (e.g., print it, draw something there)
        # print(mouse_position) # Example from MQ10

    if event.type == pygame.MOUSEBUTTONDOWN:
        click_position = event.pos
        button_number = event.button
        # Use click_position and button_number
        # print(button_number) # Example from MQ55
        
        # Check which button was pressed
        if event.button == 1:
            # Code for left-click
            pass
        elif event.button == 3:
            # Code for right-click
            pass

GIF showing mouse tracking coordinates printing to console GIF showing mouse button numbers printing to console

State Management

State management involves using variables to keep track of information that persists between frames or events. Boolean flags and position variables are common examples.

The Boolean Flag

A boolean variable (True or False) is useful for tracking simple on/off states, such as whether a drawing action is currently active.

# Initialize state outside the loop
is_drawing = False

# Inside the event loop:
for event in pygame.event.get():
    if event.type == pygame.MOUSEBUTTONDOWN:
        # Set the flag when drawing starts
        is_drawing = True
        # print("State changed: is_drawing is now True") # Example from MQ30

    if event.type == pygame.MOUSEBUTTONUP:
        # Unset the flag when drawing stops
        is_drawing = False
        # print("State changed: is_drawing is now False") # Example from MQ30

# Inside the update or render phase:
# Use the flag to control behavior
if is_drawing:
    # Perform drawing actions only when the flag is True
    pass

GIF showing console output for state changes on mouse down/up

Storing Positions

Variables can store coordinate tuples (x, y) to remember locations, such as the starting point of a line or the position of the last click.

# Initialize state outside the loop
last_pos = None # Use None to indicate no position is stored initially

# Inside the event loop:
for event in pygame.event.get():
    if event.type == pygame.MOUSEBUTTONDOWN:
        # Store the position when the button is pressed
        last_pos = event.pos

    if event.type == pygame.MOUSEBUTTONUP:
        # Reset the position when drawing stops
        last_pos = None

    if event.type == pygame.MOUSEMOTION:
        # If drawing is active and a last position exists
        if is_drawing and last_pos is not None:
            current_pos = event.pos
            # Draw something using last_pos and current_pos
            # pygame.draw.line(screen, COLOR, last_pos, current_pos, WIDTH) # Example from MQ50
            # Update last_pos for the next motion event
            last_pos = current_pos

GIF showing continuous line drawing

Drawing Basic Shapes

Drawing in Pygame happens on a Surface object, typically the main screen surface.

Drawing Circles

Draws a circle on a surface.

pygame.draw.circle(surface, color, center_pos, radius)

  • surface: The Surface object to draw on.
  • color: An RGB tuple (e.g., (255, 0, 0) for red).
  • center_pos: A tuple (x, y) for the center of the circle.
  • radius: The radius of the circle in pixels.
# Example: Draw a red circle at (100, 150) with radius 20
RED = (255, 0, 0)
center = (100, 150)
radius = 20
pygame.draw.circle(screen, RED, center, radius) # Example from MQ35

GIF showing a red dot appearing on click

Drawing Rectangles

Draws a rectangle on a surface. This function requires a pygame.Rect object to define the rectangle's position and size.

pygame.draw.rect(surface, color, rect_object)

  • surface: The Surface object to draw on.
  • color: An RGB tuple.
  • rect_object: A pygame.Rect object defining (left, top, width, height).

pygame.Rect(left, top, width, height)

# Example: Draw a blue rectangle at (50, 50) with width 100 and height 50
BLUE = (0, 0, 255)
rect_x = 50
rect_y = 50
rect_width = 100
rect_height = 50
my_rect = pygame.Rect(rect_x, rect_y, rect_width, rect_height)
pygame.draw.rect(screen, BLUE, my_rect) # Example from MQ70 (body)

Simple robot made of shapes

Drawing Lines

Draws a line connecting two points on a surface.

pygame.draw.line(surface, color, start_pos, end_pos, width)

  • surface: The Surface object to draw on.
  • color: An RGB tuple.
  • start_pos: A tuple (x, y) for the starting point.
  • end_pos: A tuple (x, y) for the ending point.
  • width: The thickness of the line in pixels.
# Example: Draw a black line from (10, 10) to (200, 50) with thickness 3
BLACK = (0, 0, 0)
start = (10, 10)
end = (200, 50)
thickness = 3
pygame.draw.line(screen, BLACK, start, end, thickness) # Example from MQ50

GIF showing continuous line drawing

Combining Concepts

By combining event handling, state management, and drawing functions, you can create interactive drawing programs. Events like MOUSEBUTTONDOWN, MOUSEBUTTONUP, and MOUSEMOTION can trigger changes in state variables (like is_drawing or last_pos), and the drawing phase uses these state variables to determine what and where to draw on the screen. Checking event.button allows for different actions or drawing styles based on which mouse button is used.