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