Python is a flexible programming language with a large selection of libraries and modules for a variety of applications. Pygame menu is one such toolkit that enables programmers to design graphical user interfaces for games and apps. In this tutorial, we’ll look at how to use the pygame menu package to build a simple options menu. Users will have choices to alter game settings including the sound, music, and level of difficulty through this menu.Pygame_menu is a Python-Pygame library used to create menus and GUIs. You will have a working options menu at the end of this tutorial, which you can incorporate into your pygame-based game or application to make it more interactive and user-customizable.
Architecture Of Application
The architecture of this application consists of two parts: Main Menu and the Settings Menu
Main Menu :
Main Menu
Settings Menu :
Settings Menu
Installation of Pygame and Pygame_menu
To install Pygame on windows, simply type the following command on the Terminal:
pip install pygame
To install pygame_menu on windows, simply type the following command on the Terminal
pip install pygame_menu
Building the initial application
Before we build the actual application, first let’s see how to get started with the library by building a basic window with a single label on it using the following code.
Python3
# Program to create a basic window using the pygame_menu module import pygame import pygame_menu as pm pygame.init() WIDTH, HEIGHT = 700, 600 # Screen and caption screen = pygame.display.set_mode((WIDTH, HEIGHT)) pygame.display.set_caption("Window using Pygame_menu") # Main Function def mainFun(): # Creating a menu menu = pm.Menu(title="Main Menu", width=WIDTH, height=HEIGHT, theme=pm.themes.THEME_GREEN) # Adding a label to the menu menu.add.label(title="This is a label on the Main Menu") # Displaying the menu on the screen using the "mainloop" method of pygame_menu.Menu menu.mainloop(screen) if __name__ == "__main__": mainFun() # Calling the main function # This code is contributed by Teja |
Output:
Basic window
Explanation:
- Import the required modules and initialize them.
- Create the screen using the pygame.display.set_mode() method
- Now declare a main function and create a menu using the pygame_menu.Menu() method
- This method takes in several parameters. However, there are three main parameters in this method: “title”, “width”, and “height”.
title: This is the name that is displayed on the top left corner of the screen. In our case, the title is set as “Main Menu”
width and height: They are set to the width and height of the screen respectively. - An optional argument passed to the method is the “theme”. There are various possible themes available in pygame_menu.
- After creating a menu, we add a label to it using the add.label() method. We pass the content that is to be written on the label as an argument to the label’s “title” parameter.
- After adding all the widgets, we display this menu on the screen using the mainloop() method. This method takes in the screen, that we defined earlier, as the argument and loops this menu on it.
Building the Pygame menu application
This consists of two parts :
- Building the main menu
- Building the settings menu
1) Building the Main Menu
The first part is to build the main menu with the proposed design
Python3
import pygame import pygame_menu as pm pygame.init() # Screen WIDTH, HEIGHT = 700, 600screen = pygame.display.set_mode((WIDTH, HEIGHT)) # Standard RGB colors RED = (255, 0, 0) GREEN = (0, 255, 0) BLUE = (0, 0, 255) CYAN = (0, 100, 100) BLACK = (0, 0, 0) WHITE = (255, 255, 255) # Main Function def mainFun(): mainMenu = pm.Menu(title="Main Menu", width=WIDTH, height=HEIGHT, theme=pm.themes.THEME_GREEN) # Settings button. If clicked, it takes to the settings menu mainMenu.add.button(title="Settings", font_color=WHITE, background_color=GREEN) # Dummy label to add some spacing between the settings button and exit button mainMenu.add.label(title="") # Exit Button. If clicked, it closes the window mainMenu.add.button(title="Exit", action=pm.events.EXIT, font_color=WHITE, background_color=RED) mainMenu.mainloop(screen) if __name__ == "__main__": mainFun() |
Output:
Main Menu
Explanation:
- We create the window and name it accordingly using the previously mentioned steps.
- Now, we add a settings button using the add.button() method.
- To this method, we pass the text that is to be rendered upon it, the font color, and the background color.
- Now, we add an empty label using the add.label() method. This label is just used to add some spacing between the settings button and the exit button.
- After this, we add an exit button in the same way as we added the settings button but with an extra argument i.e., “action“.
- Usually, a function or a menu is passed as an argument to the action parameter. So, when the button is clicked, it runs the given function or switches to the given menu.
- So, when the exit button is clicked, the window closes.
2) Building the Settings Menu
Now let’s create the settings menu as per the proposed design –
Python3
# Python program to create a basic settings menu using the pygame_menu module import pygame import pygame_menu as pm pygame.init() # Screen WIDTH, HEIGHT = 700, 600screen = pygame.display.set_mode((WIDTH, HEIGHT)) # Standard RGB colors RED = (255, 0, 0) GREEN = (0, 255, 0) BLUE = (0, 0, 255) CYAN = (0, 100, 100) BLACK = (0, 0, 0) WHITE = (255, 255, 255) # Main function of the program def main(): # List that is displayed while selecting the graphics level graphics = [("Low", "low"), ("Medium", "medium"), ("High", "high"), ("Ultra High", "ultra high")] # List that is displayed while selecting the window resolution level resolution = [("1920x1080", "1920x1080"), ("1920x1200", "1920x1200"), ("1280x720", "1280x720"), ("2560x1440", "2560x1440"), ("3840x2160", "3840x2160")] # List that is displayed while selecting the difficulty difficulty = [("Easy", "Easy"), ("Medium", "Medium"), ("Expert", "Expert")] # List that is displayed while selecting the player's perspective perspectives = [("FPP", "fpp"), ("TPP", "tpp")] # This function displays the currently selected options def printSettings(): print("\n\n") # getting the data using "get_input_data" method of the Menu class settingsData = settings.get_input_data() for key in settingsData.keys(): print(f"{key}\t:\t{settingsData[key]}") # Creating the settings menu settings = pm.Menu(title="Settings", width=WIDTH, height=HEIGHT, theme=pm.themes.THEME_GREEN) # Adjusting the default values settings._theme.widget_font_size = 25 settings._theme.widget_font_color = BLACK settings._theme.widget_alignment = pm.locals.ALIGN_LEFT # Text input that takes in the username settings.add.text_input(title="User Name : ", textinput_id="username") # 2 different Drop-downs to select the graphics level and the resolution level settings.add.dropselect(title="Graphics Level", items=graphics, dropselect_id="graphics level", default=0) settings.add.dropselect_multiple(title="Window Resolution", items=resolution, dropselect_multiple_id="Resolution", open_middle=True, max_selected=1, selection_box_height=6) # Toggle switches to turn on/off the music and sound settings.add.toggle_switch( title="Muisc", default=True, toggleswitch_id="music") settings.add.toggle_switch( title="Sounds", default=False, toggleswitch_id="sound") # Selector to choose between the types of difficulties available settings.add.selector(title="Difficulty\t", items=difficulty, selector_id="difficulty", default=0) # Range slider that lets to choose a value using a slider settings.add.range_slider(title="FOV", default=60, range_values=( 50, 100), increment=1, value_format=lambda x: str(int(x)), rangeslider_id="fov") # Fancy selector (style added to the default selector) to choose between #first person and third person perspectives settings.add.selector(title="Perspective", items=perspectives, default=0, style="fancy", selector_id="perspective") # clock that displays the current date and time settings.add.clock(clock_format="%d-%m-%y %H:%M:%S", title_format="Local Time : {0}") # 3 different buttons each with a different style and purpose settings.add.button(title="Print Settings", action=printSettings, font_color=WHITE, background_color=GREEN) settings.add.button(title="Restore Defaults", action=settings.reset_value, font_color=WHITE, background_color=RED) settings.add.button(title="Return To Main Menu", action=pm.events.BACK, align=pm.locals.ALIGN_CENTER) # Creating the main menu mainMenu = pm.Menu(title="Main Menu", width=WIDTH, height=HEIGHT, theme=pm.themes.THEME_GREEN) # Adjusting the default values mainMenu._theme.widget_alignment = pm.locals.ALIGN_CENTER # Button that takes to the settings menu when clicked mainMenu.add.button(title="Settings", action=settings, font_color=WHITE, background_color=GREEN) # An empty label that is used to add a seperation between the two buttons mainMenu.add.label(title="") # Exit button that is used to terminate the program mainMenu.add.button(title="Exit", action=pm.events.EXIT, font_color=WHITE, background_color=RED) # Lets us loop the main menu on the screen mainMenu.mainloop(screen) if __name__ == "__main__": main() |
app.py
Output :
Settings Menu
Explanation :
- First, we create a new “settings” menu in the same way we created the main menu. and then add the “action=settings” argument to the main menu.
- To this settings menu, first, we add a text input field, “User Name”, using the add.text_input() method. This method creates a text input field that reads the entered value. To this method, we pass the title (User Name) and its id.
- Now, we add a drop-down widget, “Graphics Level”, using the add.dropselect() method. To this method, we pass the title (Graphics Level), items to display (graphics list that was previously defined), default value (0 indicates the first item in the list), and its id .
- Now, we create a drop down widget, “Window Resolution”, that lets us select multiple values using the add.dropselect_multiple() method. To this method, we pass the title (Window Resolution), items to display (resolution list that was previously defined), open_middle (if set to true, then the drop down appears in the center of the screen), max_selected (The number of options you can select), and the selection_box_height (height of the drop down) and its id.
- Now we add two toggle buttons, “Music” and “Sounds”, using the add.toggle_switch() method. This method only takes in the title (music or sounds), the default value (on/off), and the id as the arguments.
- Now, we add a selector, “Difficulty”, using the add.selector() method. This method takes the title (Difficulty), items to be displayed (difficulty list that was previously defined), default value (0 indicates the first element of the list) and its id as the arguments.
- Now, we add a range_slider, “FOV”, using the add.range_slider() method. This method takes the title (FOV), range_values (min and max values of the slider), default value (initial value of the slider), increment (number of steps to increase while dragged along its length) and its id as the arguments.
- Now, we add a different type of selector, “Perspective”, using the add.selector() method. This is similar to the Difficulty selector that we created earlier. The only difference is the style of this selector. Using an extra argument style=”facny”, we can create a different type of selector.
- Now, we add a clock, “Local Time”, using the add.clock() method. This method takes the clock_format (DD-MM-YY) and the title_format as the arguments and returns a clock that shows the local time.
- Now, we add a button, “Print Settings”, using the add.button() method. This button prints the current values in all the widgets using the “printSettings” function.
- “printSettings” function gets the data using “get_input_data” method of the Menu class and it stored in a key-value format. So, iterating through the keys (widget id) gives us its corresponding values (widget value).
- Now, we add a new button, “Restore Defaults”, using the add.button() method. This is used to reset the values entered and restore the default values. This is done using the reset_value method of the menu class.
- Finally, we add another button, “Return To Main Menu”, using the add.button() method. This button is used to return back to the main menu.
