programmerbee
Database
MongoDB
Python
Flask Web FrameworkTornado Web Framework
Web Development
AJAXCSSHTML
More
AIData ScienceJavaScriptjQueryJSONLinux TerminalNginxNLTKNumber TheoryPerceptronphysicsProgrammingPygamerequirements.txt

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

Related Posts

Send Desktop notification from pygame
April 29, 2024

For notification handling we will use plyer library We will add this functionality in our pygame code The complete code import pygame import sys from pygame.locals import * from plyer import notification pygame.init() clock = pygame.time.Clock() user_display = pygame.display.Info() width, height = 800, 600 screen = pygame.display.set_mode((width, height)) background = (255, 255, 255) red = […]

Pygame Project: Create the simplest digital clock
April 28, 2024

We will use python datetime module for our clock; We get the current time and separate the time into hour minutes and second. First get the current time Get the time in hour, minute and second Now got our clock time components. It will be like this import datetime current_time = datetime.datetime.now() hour = current_time.hour […]

Simulate Bird Flocking Behavior with pygame: Algorithm and Code Explained
March 23, 2024

Bird flocking is a wonderful example of how simple behaviors can lead to complex, beautiful patterns in nature. We’ll learn the key principles behind this flocking behavior and write a python program to simulate this wonderful phenomenon. The principles Bird Flocking Simulation Algorithm Setting Up the Simulation Each Frame of the Simulation The pygame example […]