In this post i will make an example of how to make an actual menu system that you can select states (like a main menu, options menu, quit, etc. This is because this is a common reason for people to start using states in the first place.
Here is the entire code:
The main meat of the addition is the MenuManager class. This handles everything related to the menu system. draw_menu() handles the drawing of the menu options, update_menu() handles the update of each state, get_event_menu() handles the index selecting of the options, mouse_hover_sound() would be if you wanted to play a sound when you hover over an option, mouse_menu_click() handles the mouse collision with the option, pre_render_options() handles the setup of the fonts for selected and deselected texts, selected_option() handles the actual selection of an option, and change_selected_option() handles the index position of the options. Only the first three are called upon by the actual menu states.
Each menu related state (Menu, Option) but not game state is sub classed not only to States, but to MenuManager as well. This is so it can draw the menu and update it. the menu draw method calls the MenuManager.draw_menu() to handle the drawing of the menu, update() calls update_menu() to handle the selection change, the get_event() method calls get_event_menu() method which handles the increment or decrement of the options based on events. Each states also contains what is listed on that state's menu via its options attribute. This is what is displayed to the state. The secondary list next_list attribute is the dictionary state's key to the associated index of options attribute. So "Play" text will go to the "play" state key. Quit does not need a state key because there is no state for quitting. Hence it is coded to quit if there is no next_list index.
This is a basic illustration of a menu system using state to handle this. Each class in theory would be in its own module. It is in one solely for a tutorial to copy and paste easily. It is quite a lot of code for little results. But it is very adaptable in terms that you can copy a menu state and simply change merely the options text list and their associated key states, and have added an entirely new menu state. Each menu state can be expanded upon further cleanly as each one is barely over 20 lines long. You would only need to change MenuManager if you plan on changing the layout of the actual menu.
Here is an example of the adaptability of this process:
We simply add this before the pre_render_options() call in any menu state
Full example we put this same code in the Options dunder init method and we now get a different font color from that menu state as opposed to the main menu state.
Here is the entire code:
import pygame as pg
import sys
pg.init()
class Control:
def __init__(self):
self.done = False
self.fps = 60
self.screen = pg.display.set_mode((600,600))
self.screen_rect = self.screen.get_rect()
self.clock = pg.time.Clock()
def setup_states(self, state_dict, start_state):
self.state_dict = state_dict
self.state_name = start_state
self.state = self.state_dict[self.state_name]
def flip_state(self):
self.state.done = False
previous,self.state_name = self.state_name, self.state.next
self.state.cleanup()
self.state = self.state_dict[self.state_name]
self.state.startup()
self.state.previous = previous
def update(self, dt):
if self.state.quit:
self.done = True
elif self.state.done:
self.flip_state()
self.state.update(self.screen, dt)
def event_loop(self):
for event in pg.event.get():
if event.type == pg.QUIT:
self.done = True
self.state.get_event(event)
def main_game_loop(self):
while not self.done:
delta_time = self.clock.tick(self.fps)/1000.0
self.event_loop()
self.update(delta_time)
pg.display.update()
class MenuManager:
def __init__(self):
self.selected_index = 0
self.last_option = None
self.selected_color = (255,255,0)
self.deselected_color = (255,255,255)
def draw_menu(self, screen):
'''handle drawing of the menu options'''
for i,opt in enumerate(self.rendered["des"]):
opt[1].center = (self.screen_rect.centerx, self.from_bottom+i*self.spacer)
if i == self.selected_index:
rend_img,rend_rect = self.rendered["sel"][i]
rend_rect.center = opt[1].center
screen.blit(rend_img,rend_rect)
else:
screen.blit(opt[0],opt[1])
def update_menu(self):
self.mouse_hover_sound()
self.change_selected_option()
def get_event_menu(self, event):
if event.type == pg.KEYDOWN:
'''select new index'''
if event.key in [pg.K_UP, pg.K_w]:
self.change_selected_option(-1)
elif event.key in [pg.K_DOWN, pg.K_s]:
self.change_selected_option(1)
elif event.key == pg.K_RETURN:
self.select_option(self.selected_index)
self.mouse_menu_click(event)
def mouse_hover_sound(self):
'''play sound when selected option changes'''
for i,opt in enumerate(self.rendered["des"]):
if opt[1].collidepoint(pg.mouse.get_pos()):
if self.last_option != opt:
self.last_option = opt
def mouse_menu_click(self, event):
'''select menu option '''
if event.type == pg.MOUSEBUTTONDOWN and event.button == 1:
for i,opt in enumerate(self.rendered["des"]):
if opt[1].collidepoint(pg.mouse.get_pos()):
self.selected_index = i
self.select_option(i)
break
def pre_render_options(self):
'''setup render menu options based on selected or deselected'''
font_deselect = pg.font.SysFont("arial", 50)
font_selected = pg.font.SysFont("arial", 70)
rendered_msg = {"des":[],"sel":[]}
for option in self.options:
d_rend = font_deselect.render(option, 1, self.deselected_color)
d_rect = d_rend.get_rect()
s_rend = font_selected.render(option, 1, self.selected_color)
s_rect = s_rend.get_rect()
rendered_msg["des"].append((d_rend,d_rect))
rendered_msg["sel"].append((s_rend,s_rect))
self.rendered = rendered_msg
def select_option(self, i):
'''select menu option via keys or mouse'''
if i == len(self.next_list):
self.quit = True
else:
self.next = self.next_list[i]
self.done = True
self.selected_index = 0
def change_selected_option(self, op=0):
'''change highlighted menu option'''
for i,opt in enumerate(self.rendered["des"]):
if opt[1].collidepoint(pg.mouse.get_pos()):
self.selected_index = i
if op:
self.selected_index += op
max_ind = len(self.rendered['des'])-1
if self.selected_index < 0:
self.selected_index = max_ind
elif self.selected_index > max_ind:
self.selected_index = 0
class States(Control):
def __init__(self):
Control.__init__(self)
self.done = False
self.next = None
self.quit = False
self.previous = None
class Menu(States, MenuManager):
def __init__(self):
States.__init__(self)
MenuManager.__init__(self)
self.next = 'game'
self.options = ['Play', 'Options', 'Quit']
self.next_list = ['game', 'options']
self.pre_render_options()
self.from_bottom = 200
self.spacer = 75
def cleanup(self):
print('cleaning up Main Menu state stuff')
def startup(self):
print('starting Main Menu state stuff')
def get_event(self, event):
if event.type == pg.QUIT:
self.quit = True
self.get_event_menu(event)
def update(self, screen, dt):
self.update_menu()
self.draw(screen)
def draw(self, screen):
screen.fill((255,0,0))
self.draw_menu(screen)
class Options(States, MenuManager):
def __init__(self):
States.__init__(self)
MenuManager.__init__(self)
self.next = 'menu'
self.options = ['Music', 'Sound', 'Graphics', 'Controls', 'Main Menu']
self.next_list = ['options', 'options', 'options', 'options', 'menu']
self.pre_render_options()
self.from_bottom = 200
self.spacer = 75
def cleanup(self):
print('cleaning up Options state stuff')
def startup(self):
print('starting Options state stuff')
def get_event(self, event):
if event.type == pg.QUIT:
self.quit = True
self.get_event_menu(event)
def update(self, screen, dt):
self.update_menu()
self.draw(screen)
def draw(self, screen):
screen.fill((255,0,0))
self.draw_menu(screen)
class Game(States):
def __init__(self):
States.__init__(self)
self.next = 'menu'
def cleanup(self):
print('cleaning up Game state stuff')
def startup(self):
print('starting Game state stuff')
def get_event(self, event):
if event.type == pg.MOUSEBUTTONDOWN or event.type == pg.KEYDOWN:
self.done = True
def update(self, screen, dt):
self.draw(screen)
def draw(self, screen):
screen.fill((0,0,255))
app = Control()
state_dict = {
'menu': Menu(),
'game': Game(),
'options':Options()
}
app.setup_states(state_dict, 'menu')
app.main_game_loop()
pg.quit()
sys.exit()In this example, the already existing classes are hardly touched at all. I did move settings to be attributes of Control for simplicity. I also made the States class sub classed from the Control class explicitly to pass the screen rect over to the menus for drawing. This was to bypass passing screen_rect all over the place. screen_Rect was needed to center the text on the screen. I also added a new Options state for better illustration of the menu system. The main meat of the addition is the MenuManager class. This handles everything related to the menu system. draw_menu() handles the drawing of the menu options, update_menu() handles the update of each state, get_event_menu() handles the index selecting of the options, mouse_hover_sound() would be if you wanted to play a sound when you hover over an option, mouse_menu_click() handles the mouse collision with the option, pre_render_options() handles the setup of the fonts for selected and deselected texts, selected_option() handles the actual selection of an option, and change_selected_option() handles the index position of the options. Only the first three are called upon by the actual menu states.
Each menu related state (Menu, Option) but not game state is sub classed not only to States, but to MenuManager as well. This is so it can draw the menu and update it. the menu draw method calls the MenuManager.draw_menu() to handle the drawing of the menu, update() calls update_menu() to handle the selection change, the get_event() method calls get_event_menu() method which handles the increment or decrement of the options based on events. Each states also contains what is listed on that state's menu via its options attribute. This is what is displayed to the state. The secondary list next_list attribute is the dictionary state's key to the associated index of options attribute. So "Play" text will go to the "play" state key. Quit does not need a state key because there is no state for quitting. Hence it is coded to quit if there is no next_list index.
This is a basic illustration of a menu system using state to handle this. Each class in theory would be in its own module. It is in one solely for a tutorial to copy and paste easily. It is quite a lot of code for little results. But it is very adaptable in terms that you can copy a menu state and simply change merely the options text list and their associated key states, and have added an entirely new menu state. Each menu state can be expanded upon further cleanly as each one is barely over 20 lines long. You would only need to change MenuManager if you plan on changing the layout of the actual menu.
Here is an example of the adaptability of this process:
We simply add this before the pre_render_options() call in any menu state
self.deselected_color = (150,150,150)
self.selected_color = (0,0,0)and change the font menu color of that state only. Full example we put this same code in the Options dunder init method and we now get a different font color from that menu state as opposed to the main menu state.
import pygame as pg
import sys
pg.init()
class Control:
def __init__(self):
self.done = False
self.fps = 60
self.screen = pg.display.set_mode((600,600))
self.screen_rect = self.screen.get_rect()
self.clock = pg.time.Clock()
def setup_states(self, state_dict, start_state):
self.state_dict = state_dict
self.state_name = start_state
self.state = self.state_dict[self.state_name]
def flip_state(self):
self.state.done = False
previous,self.state_name = self.state_name, self.state.next
self.state.cleanup()
self.state = self.state_dict[self.state_name]
self.state.startup()
self.state.previous = previous
def update(self, dt):
if self.state.quit:
self.done = True
elif self.state.done:
self.flip_state()
self.state.update(self.screen, dt)
def event_loop(self):
for event in pg.event.get():
if event.type == pg.QUIT:
self.done = True
self.state.get_event(event)
def main_game_loop(self):
while not self.done:
delta_time = self.clock.tick(self.fps)/1000.0
self.event_loop()
self.update(delta_time)
pg.display.update()
class MenuManager:
def __init__(self):
self.selected_index = 0
self.last_option = None
self.selected_color = (255,255,0)
self.deselected_color = (255,255,255)
def draw_menu(self, screen):
'''handle drawing of the menu options'''
for i,opt in enumerate(self.rendered["des"]):
opt[1].center = (self.screen_rect.centerx, self.from_bottom+i*self.spacer)
if i == self.selected_index:
rend_img,rend_rect = self.rendered["sel"][i]
rend_rect.center = opt[1].center
screen.blit(rend_img,rend_rect)
else:
screen.blit(opt[0],opt[1])
def update_menu(self):
self.mouse_hover_sound()
self.change_selected_option()
def get_event_menu(self, event):
if event.type == pg.KEYDOWN:
'''select new index'''
if event.key in [pg.K_UP, pg.K_w]:
self.change_selected_option(-1)
elif event.key in [pg.K_DOWN, pg.K_s]:
self.change_selected_option(1)
elif event.key == pg.K_RETURN:
self.select_option(self.selected_index)
self.mouse_menu_click(event)
def mouse_hover_sound(self):
'''play sound when selected option changes'''
for i,opt in enumerate(self.rendered["des"]):
if opt[1].collidepoint(pg.mouse.get_pos()):
if self.last_option != opt:
self.last_option = opt
def mouse_menu_click(self, event):
'''select menu option '''
if event.type == pg.MOUSEBUTTONDOWN and event.button == 1:
for i,opt in enumerate(self.rendered["des"]):
if opt[1].collidepoint(pg.mouse.get_pos()):
self.selected_index = i
self.select_option(i)
break
def pre_render_options(self):
'''setup render menu options based on selected or deselected'''
font_deselect = pg.font.SysFont("arial", 50)
font_selected = pg.font.SysFont("arial", 70)
rendered_msg = {"des":[],"sel":[]}
for option in self.options:
d_rend = font_deselect.render(option, 1, self.deselected_color)
d_rect = d_rend.get_rect()
s_rend = font_selected.render(option, 1, self.selected_color)
s_rect = s_rend.get_rect()
rendered_msg["des"].append((d_rend,d_rect))
rendered_msg["sel"].append((s_rend,s_rect))
self.rendered = rendered_msg
def select_option(self, i):
'''select menu option via keys or mouse'''
if i == len(self.next_list):
self.quit = True
else:
self.next = self.next_list[i]
self.done = True
self.selected_index = 0
def change_selected_option(self, op=0):
'''change highlighted menu option'''
for i,opt in enumerate(self.rendered["des"]):
if opt[1].collidepoint(pg.mouse.get_pos()):
self.selected_index = i
if op:
self.selected_index += op
max_ind = len(self.rendered['des'])-1
if self.selected_index < 0:
self.selected_index = max_ind
elif self.selected_index > max_ind:
self.selected_index = 0
class States(Control):
def __init__(self):
Control.__init__(self)
self.done = False
self.next = None
self.quit = False
self.previous = None
class Menu(States, MenuManager):
def __init__(self):
States.__init__(self)
MenuManager.__init__(self)
self.next = 'game'
self.options = ['Play', 'Options', 'Quit']
self.next_list = ['game', 'options']
self.pre_render_options()
self.from_bottom = 200
self.spacer = 75
def cleanup(self):
print('cleaning up Main Menu state stuff')
def startup(self):
print('starting Main Menu state stuff')
def get_event(self, event):
if event.type == pg.QUIT:
self.quit = True
self.get_event_menu(event)
def update(self, screen, dt):
self.update_menu()
self.draw(screen)
def draw(self, screen):
screen.fill((255,0,0))
self.draw_menu(screen)
class Options(States, MenuManager):
def __init__(self):
States.__init__(self)
MenuManager.__init__(self)
self.next = 'menu'
self.options = ['Music', 'Sound', 'Graphics', 'Controls', 'Main Menu']
self.next_list = ['options', 'options', 'options', 'options', 'menu']
self.from_bottom = 200
self.spacer = 75
self.deselected_color = (150,150,150)
self.selected_color = (0,0,0)
self.pre_render_options()
def cleanup(self):
print('cleaning up Options state stuff')
def startup(self):
print('starting Options state stuff')
def get_event(self, event):
if event.type == pg.QUIT:
self.quit = True
self.get_event_menu(event)
def update(self, screen, dt):
self.update_menu()
self.draw(screen)
def draw(self, screen):
screen.fill((255,0,0))
self.draw_menu(screen)
class Game(States):
def __init__(self):
States.__init__(self)
self.next = 'menu'
def cleanup(self):
print('cleaning up Game state stuff')
def startup(self):
print('starting Game state stuff')
def get_event(self, event):
if event.type == pg.MOUSEBUTTONDOWN or event.type == pg.KEYDOWN:
self.done = True
def update(self, screen, dt):
self.draw(screen)
def draw(self, screen):
screen.fill((0,0,255))
app = Control()
state_dict = {
'menu': Menu(),
'game': Game(),
'options':Options()
}
app.setup_states(state_dict, 'menu')
app.main_game_loop()
pg.quit()
sys.exit()Also as you may have noticed....this allows you easily add more states and change it on the fly. Instead of a mouse press or enter key, you can use this same structure to interrupt the normal next state and change it based on events of the game. If player enters east side of the map, queue cut-scene for East Map , etc. You can modify the next state at any point.
Recommended Tutorials: