Dans la première partie, nous avons posé les bases pour réaliser un space invaders like avec Pygame. Cliquez pour voir la première partie du tutoriel.
Aujourd’hui, nous allons créer la vue Menu.
Initialisation de Pygame
Tout d’abord, initialisons Pygame pour nous aider à créer l’écran Menu.
#!/usr/bin/python3 import sys import pygame pygame.init()
Création du Menu
Cette partie se décompose en sous objectif.
- Initialisation du Menu
- Positionnement des éléments visuels
- Interaction avec l’utilisateur
Initialisation du Menu
Premièrement, nous définissons la classe pour gérer le menu avec les paramètres suivants.
- screen : contient la hauteur et la largeur de l’écran
- bg_color : arrière plan en noir par défaut
- font : Police de caractère par défaut
- font_size : Taille de la police de caractère
- font_color : Couleur de la police en blanc
class GameMenu:
def __init__(
self, screen, items,
bg_color=(0, 0, 0), font=None,
font_size=100, font_color=(255, 255, 255)):
A présent, nous paramétrons la hauteur et largeur de l’écran à partir de la variable screen.
# init self.screen = screen self.scr_width = self.screen.get_rect().width self.scr_height = self.screen.get_rect().height
Ensuite, ajoutons un fond d’écran et des effets sonores pour mettre dans l’ambiance.
# Background Main Menu
self.bg_color = bg_color
self.bg_img = pygame.image.load('resources/images/menubackground.jpg')
self.bg_img_rect = self.bg_img.get_rect()
# Sound Menu Change
self.menu_sound = pygame.mixer.Sound('resources/sounds/menu_noise.wav')
self.valid_menu_sound = pygame.mixer.Sound('resources/sounds/menu_valid_sound.wav')
# Menu Music
self.menu_music = pygame.mixer.music.load('resources/sounds/music.mp3')
pygame.mixer.music.set_volume(0.5)
Puis quelques paramètres supplémentaires pour gérer le menu.
# Gère l'écart entre le cadre de sélection et le texte de l'élément self.paddingx = 8 self.paddingy = 20 # Informe de l'écran actuel affiché self.start_selected = False self.settings_selected = False self.quit_select = False # Le premier élement sera sélectionné par défaut avec l'index 0. # Si le second élément est sélectionné l'index passera à 1, etc. self.index_selected = 0 # Element courant sélectionné self.current_item = ()
Positionnement des éléments visuels
Ici, l’objectif est de récupérer les données fournies par items et de préparer les éléments menu pour l’affichage si aucun écran est sélectionné.
# init.py
self.menu_items = []
for index, item in enumerate(items):
label = self.font.render(item, 1, font_color)
width = label.get_rect().width
height = label.get_rect().height
# Calcul la position en abscisse de l'élément de menu
posx = (self.scr_width / 2) - (width / 2)
# Calcul la hauteur totale du menu
t_h = len(items) * height
# Calcul la position en ordonnée
posy = (self.scr_height / 2) - (t_h / 2) + (index * height)
# Ajoute l'élément de menu avec ses dimensions calculées
self.menu_items.append([item, label, (width, height), (posx, posy)])
Afin de démarrer l’écran menu, ajoutez la méthode suivante dans GameMenu :
def run(self):
# gère la boucle de menu, par défaut l'écran menu ne s'arrête jamais
mainloop = True
while mainloop:
...
Par défaut, l’élément sélectionné est le premier.
self.current_item = self.menu_items[self.index_selected]
Pour chaque passage dans la boucle de menu, nous affichons le menu et ses éléments.
self.screen.fill(self.bg_color)
if not self.start_selected or not self.settings_selected:
self.screen.blit(self.bg_img, self.bg_img_rect)
for name, label, (width, height), (posx, posy) in self.menu_items:
self.screen.blit(label, (posx, posy))
name, label, (width, height), (posx, posy) = self.current_item
pygame.draw.rect(
self.screen, (255, 255, 255),
[
posx - self.paddingx, posy - self.paddingy,
width + self.paddingx + self.paddingx, height + self.paddingy
], 2)
pygame.display.flip()
Interaction avec l’utilisateur
Pygame récupère les interactions utilisateurs. Notre objectif est de les filtrer et de déclencher une action particulière pour chaque évènement.
Par exemple, quand l’utilisateur appuie sur la touche de clavier ↓ , l’élément de menu sélectionné doit passer au suivant.
Le code suivant doit être placé au début de la boucle. Ainsi, le menu sélectionné sera affiché.
On parcourt les évènements dans une boucle.
for event in pygame.event.get():
...
Si l’utilisateur clique sur la croix pour fermer la fenêtre, le jeu s’arrête.
if event.type == pygame.QUIT:
mainloop = False
sys.exit()
Sinon si l’utilisateur appuie sur une touche du clavier, on déclenche un évènement particulier.
# ↓ : Sélectionne l'élément suivant si existant
if event.key == pygame.K_UP:
# Jouer bip de sélection de l'élément
self.menu_sound.play()
# Mise à jour de l'index de menu
for index, item in enumerate(self.menu_items):
if self.current_item[0] == item[0]:
if self.index_selected > 0:
self.index_selected -= 1
# ↑ : Sélectionne l'élément précèdent si existant
if event.key == pygame.K_DOWN:
self.menu_sound.play()
for index, item in enumerate(self.menu_items):
if self.current_item[0] == item[0]:
if self.index_selected < (len(self.menu_items) - 1):
self.index_selected += 1
En appuyant sur ENTRER, nous souhaitons afficher l’écran sélectionné.
if event.key == pygame.K_RETURN:
self.valid_menu_sound.play()
if len(self.current_item) > 0:
if self.current_item[0] == "Start":
self.start_selected = True
elif self.current_item[0] == "Settings":
self.settings_selected = True
elif self.current_item[0] == "Quit":
self.quit_select = True
pygame.mixer.music.fadeout(1000)
mainloop = False
.
Félicitations, vous savez maintenant créer un menu de jeu avec Pygame.
Dans la partie suivante, nous créerons la partie la plus importante, l’écran de jeu.
Le code source de ce tutoriel disponible sur le repository git.