Design Awesome Pygame Menus: Create a Dropdown Menu

First import the necessary libraries

  • pygame: The core module for creating games and graphics.
  • sys: Provides functions for interacting with the system.
  • pygame.locals: Contains constants and functions for convenient access within Pygame.”
  • Initialization: “pygame.init(): This initializes all the imported Pygame modules, making them ready for use.”




import pygame
import sys
from pygame.locals import *
pygame.init()


    
    


Establish the Visual Foundation (Game Window)

  • pygame.display.set_mode(…): This core Pygame function initializes your game’s display surface (the window).
  • (1200, 600): These values define the initial width and height of your window in pixels.
  • RESIZABLE: This critical flag allows players to adjust the window size for their preference.



screen = pygame.display.set_mode((1200, 600), RESIZABLE)

    
    

Set Up Visuals and Sizing (Colors & Constants)

  • Colors Dictionary: This neatly stores all the color values (in RGB format) for your menu elements. Change these to achieve your desired look!
  • Constants: These define fixed dimensions for buttons, fonts, and positioning. This helps keep your menu’s layout consistent.


# Define colors using RGB values and hexadecimal codes
colors = {
    "background": (240, 240, 240),
    "text": (50, 50, 50),
    "button_bg": (200, 200, 200),
    "button_border": (150, 150, 150),
    "button_hover": (220, 220, 220),
    "dropdown_bg": (220, 220, 220),
    "dropdown_border": (150, 150, 150),
    "dropdown_hover": (200, 200, 200),
    "dropdown_text": (50, 50, 50),
    "AliceBlue": "#F0F8FF",
    "Aqua": "#00FFFF",
    "FloralWhite": "#FFFAF0",
    "LightBlue": "#ADD8E6",
    "Ivory": "#FFFFF0",
    "Indigo": "#4B0082",
    "LightSkyBlue": "#87CEFA",
    "Maroon": "#800000",
    "Olive": "#808000",
    "MediumOrchid": "#BA55D3"
}

# Define constants for button and dropdown dimensions
BUTTON_WIDTH = 200
BUTTON_HEIGHT = 50
FONT_SIZE = 30
FONT_SMALL_SIZE = 20
DROPDOWN_POS_X = 50
DROPDOWN_POS_Y = 50
OPTION_HEIGHT = 40



    
    


Manage Your Dropdown Menu’s Logic

  • selected_option: Stores the name of the user’s current color selection.
  • show_options: This flag determines whether to display the full list of color options.
  • options: Holds all the available color choices for the user.


selected_option = 'Aqua'
show_options = False
options = ["AliceBlue", "Aqua", "FloralWhite", "LightBlue", "Ivory", "Indigo", "LightSkyBlue", "Maroon", "Olive",
           "MediumOrchid"]


    
    


Visualize Your Dropdown Menu (with the draw_dropdown() function)

  • Define the Function: We start by defining a function named draw_dropdown(). This function will encapsulate all the code responsible for visually rendering your dropdown menu.”
  • Draw the Dropdown Button: First, let’s draw the main dropdown button. Its appearance will subtly change to indicate whether the menu is open or closed.
  • Render the Selected Option: Next, we display the currently selected option as text centered within the button area.
  • Draw the Options (Conditionally): If the dropdown is expanded (show_options is True), we’ll draw each option in the list.



# Define function to draw the dropdown menu
def draw_dropdown():
    # Draw dropdown button
    button_color = colors["button_hover"] if show_options else colors["button_bg"]
    pygame.draw.rect(screen, button_color, (DROPDOWN_POS_X, DROPDOWN_POS_Y, BUTTON_WIDTH, BUTTON_HEIGHT))
    pygame.draw.rect(screen, colors["button_border"], (DROPDOWN_POS_X, DROPDOWN_POS_Y, BUTTON_WIDTH, BUTTON_HEIGHT), 2)

    # Render and position the text on the button
    font = pygame.font.Font(None, FONT_SIZE)
    text_surface = font.render(selected_option, True, colors["text"])
    text_rect = text_surface.get_rect(center=(DROPDOWN_POS_X + BUTTON_WIDTH / 2, DROPDOWN_POS_Y + BUTTON_HEIGHT / 2))
    screen.blit(text_surface, text_rect)

    # Draw dropdown options if the dropdown is expanded
    if show_options:
        # Draw each dropdown option
        for i, option in enumerate(options):
            option_y = DROPDOWN_POS_Y + BUTTON_HEIGHT + i * OPTION_HEIGHT
            option_rect = pygame.Rect(DROPDOWN_POS_X, option_y, BUTTON_WIDTH, OPTION_HEIGHT)
            option_color = colors["dropdown_hover"] if option_rect.collidepoint(pygame.mouse.get_pos()) else colors["dropdown_bg"]
            pygame.draw.rect(screen, option_color, option_rect)
            pygame.draw.rect(screen, colors["dropdown_border"], option_rect, 2)

            # Render and position the text for each option
            option_font = pygame.font.Font(None, FONT_SMALL_SIZE)
            option_surface = option_font.render(option, True, colors["dropdown_text"])
            option_rect = option_surface.get_rect(center=(DROPDOWN_POS_X + BUTTON_WIDTH / 2, option_y + OPTION_HEIGHT / 2))
            screen.blit(option_surface, option_rect)


    
    


Make Your Dropdown Menu Interactive (Event Handling)

  • Quitting: We ensure a smooth exit from Pygame and our program whenever the user decides to close it.
  • Mouse Clicks: We precisely respond to left-click actions, enabling intuitive interaction.
  • Dropdown Open: When options are visible, we seamlessly process user selections upon clicking.
  • Dropdown Closed: Toggling the menu open or closed is effortless with a simple button click, especially when options are hidden.



# Main loop
game_running = True
while game_running:
    # Limit frame rate to 60 frames per second
    clock.tick(60)

    # Handle events
    for event in pygame.event.get():
        if event.type == QUIT:
            # Quit the pygame module and exit the system
            pygame.quit()
            sys.exit()
        elif event.type == MOUSEBUTTONDOWN:
            if event.button == 1:
                mouse_pos = pygame.mouse.get_pos()
                # Check if an option is clicked when the dropdown is expanded
                if show_options:
                    for i, option in enumerate(options):
                        option_rect = pygame.Rect(DROPDOWN_POS_X, DROPDOWN_POS_Y + BUTTON_HEIGHT + i * OPTION_HEIGHT, BUTTON_WIDTH, OPTION_HEIGHT)
                        if option_rect.collidepoint(mouse_pos):
                            selected_option = option
                            show_options = False
                            break
                else:
                    # Toggle dropdown visibility if the button is clicked
                    if pygame.Rect(DROPDOWN_POS_X, DROPDOWN_POS_Y, BUTTON_WIDTH, BUTTON_HEIGHT).collidepoint(mouse_pos):
                        show_options = not show_options

    # Fill the screen with the selected background color
    screen.fill(colors[selected_option])
    # Draw the dropdown menu
    draw_dropdown()
    # Update the display
    pygame.display.update()

    
    


Powering Your Pygame Experience (The Game Loop)

  • clock.tick(60): Controls the speed of your game (60 frames per second is common), ensuring smooth gameplay.
  • Event Handling: (Covered in the previous step) This is where you process user input like mouse clicks for your dropdown menu.
  • Screen Updates: Here’s where you change colors based on choices, or add other dynamic visual elements to your game.
  • Dropdown Rendering: Each loop, your draw_dropdown() function re-draws the menu to reflect changes.
  • pygame.display.update(): Critical for updating the changes and making them visible to the player.



game_running = True 
while game_running: 
    clock.tick(60)  # Maintain a consistent framerate (60 FPS)
    # Handle user input (process dropdown clicks & more) 
    # Update visuals based on player actions 
    # Draw the dropdown menu (ensuring it's always up-to-date) 
    # Push changes to the screen (pygame.display.update())


    
    


The complete code

We’ve built a fantastic foundation for your Pygame dropdown menu! Now, it’s time to take it to the next level:

Now, let’s unlock the full potential of this code:

  • Make it Your Own: Change colors, fonts, and sizes to perfectly match your game’s visual style.
  • Add Advanced Features: Go beyond the basics by incorporating icons, keyboard navigation, or even nested sub-menus.

Copy, run, and see what you can create! Feel free to experiment and make it your own.



# Import the pygame library for game development
import pygame
# Import the sys module for system-specific parameters and functions
import sys
# Import specific constants from the pygame.locals module for easier access
from pygame.locals import *

# Initialize the pygame library
pygame.init()

# Create a clock object to control the frame rate
clock = pygame.time.Clock()
# Create a display surface with resizable dimensions (width: 1200, height: 600)
screen = pygame.display.set_mode((1200, 600), RESIZABLE)

# Define colors using RGB values and hexadecimal codes
colors = {
    "background": (240, 240, 240),
    "text": (50, 50, 50),
    "button_bg": (200, 200, 200),
    "button_border": (150, 150, 150),
    "button_hover": (220, 220, 220),
    "dropdown_bg": (220, 220, 220),
    "dropdown_border": (150, 150, 150),
    "dropdown_hover": (200, 200, 200),
    "dropdown_text": (50, 50, 50),
    "AliceBlue": "#F0F8FF",
    "Aqua": "#00FFFF",
    "FloralWhite": "#FFFAF0",
    "LightBlue": "#ADD8E6",
    "Ivory": "#FFFFF0",
    "Indigo": "#4B0082",
    "LightSkyBlue": "#87CEFA",
    "Maroon": "#800000",
    "Olive": "#808000",
    "MediumOrchid": "#BA55D3"
}

# Define constants for button and dropdown dimensions
BUTTON_WIDTH = 200
BUTTON_HEIGHT = 50
FONT_SIZE = 30
FONT_SMALL_SIZE = 20
DROPDOWN_POS_X = 50
DROPDOWN_POS_Y = 50
OPTION_HEIGHT = 40

# Initialize global variables for dropdown functionality
selected_option = 'Aqua'
show_options = False

# Define dropdown options
options = ["AliceBlue", "Aqua", "FloralWhite", "LightBlue", "Ivory", "Indigo", "LightSkyBlue", "Maroon", "Olive",
           "MediumOrchid"]

# Define function to draw the dropdown menu
def draw_dropdown():
    # Draw dropdown button
    button_color = colors["button_hover"] if show_options else colors["button_bg"]
    pygame.draw.rect(screen, button_color, (DROPDOWN_POS_X, DROPDOWN_POS_Y, BUTTON_WIDTH, BUTTON_HEIGHT))
    pygame.draw.rect(screen, colors["button_border"], (DROPDOWN_POS_X, DROPDOWN_POS_Y, BUTTON_WIDTH, BUTTON_HEIGHT), 2)

    # Render and position the text on the button
    font = pygame.font.Font(None, FONT_SIZE)
    text_surface = font.render(selected_option, True, colors["text"])
    text_rect = text_surface.get_rect(center=(DROPDOWN_POS_X + BUTTON_WIDTH / 2, DROPDOWN_POS_Y + BUTTON_HEIGHT / 2))
    screen.blit(text_surface, text_rect)

    # Draw dropdown options if the dropdown is expanded
    if show_options:
        # Draw each dropdown option
        for i, option in enumerate(options):
            option_y = DROPDOWN_POS_Y + BUTTON_HEIGHT + i * OPTION_HEIGHT
            option_rect = pygame.Rect(DROPDOWN_POS_X, option_y, BUTTON_WIDTH, OPTION_HEIGHT)
            option_color = colors["dropdown_hover"] if option_rect.collidepoint(pygame.mouse.get_pos()) else colors["dropdown_bg"]
            pygame.draw.rect(screen, option_color, option_rect)
            pygame.draw.rect(screen, colors["dropdown_border"], option_rect, 2)

            # Render and position the text for each option
            option_font = pygame.font.Font(None, FONT_SMALL_SIZE)
            option_surface = option_font.render(option, True, colors["dropdown_text"])
            option_rect = option_surface.get_rect(center=(DROPDOWN_POS_X + BUTTON_WIDTH / 2, option_y + OPTION_HEIGHT / 2))
            screen.blit(option_surface, option_rect)

# Main loop
game_running = True
while game_running:
    # Limit frame rate to 60 frames per second
    clock.tick(60)

    # Handle events
    for event in pygame.event.get():
        if event.type == QUIT:
            # Quit the pygame module and exit the system
            pygame.quit()
            sys.exit()
        elif event.type == MOUSEBUTTONDOWN:
            if event.button == 1:
                mouse_pos = pygame.mouse.get_pos()
                # Check if an option is clicked when the dropdown is expanded
                if show_options:
                    for i, option in enumerate(options):
                        option_rect = pygame.Rect(DROPDOWN_POS_X, DROPDOWN_POS_Y + BUTTON_HEIGHT + i * OPTION_HEIGHT, BUTTON_WIDTH, OPTION_HEIGHT)
                        if option_rect.collidepoint(mouse_pos):
                            selected_option = option
                            show_options = False
                            break
                else:
                    # Toggle dropdown visibility if the button is clicked
                    if pygame.Rect(DROPDOWN_POS_X, DROPDOWN_POS_Y, BUTTON_WIDTH, BUTTON_HEIGHT).collidepoint(mouse_pos):
                        show_options = not show_options

    # Fill the screen with the selected background color
    screen.fill(colors[selected_option])
    # Draw the dropdown menu
    draw_dropdown()
    # Update the display
    pygame.display.update()




Ready to explore more? Get the complete code on GitHub: https://github.com/01one/pygameExamples/blob/main/48.dropdown_menu_in_pygame_updated_version.py