Créer des menus et interfaces utilisateurs avec Pygame

Introduction

Dans la plupart des jeux vidéo, l'expérience utilisateur ne se limite pas à des mécaniques de jeu simples. L'ajout d'une interface utilisateur (UI), comme des menus, des boutons, et des écrans de pause est essentiel pour rendre le jeu plus interactif et professionnel. Avec Pygame, il est possible de créer des interfaces utilisateur en dessinant des éléments graphiques comme des boutons et en capturant les événements utilisateur, tels que les clics de souris ou les pressions sur les touches du clavier.

Cet article vous montrera comment construire des menus interactifs avec des boutons cliquables, gérer les événements liés à l'interface, et afficher des informations telles que les scores et messages dans votre jeu Pygame.

1. Création d'un menu principal basique

Un menu principal est souvent l’écran d'accueil d'un jeu, offrant des options comme "Jouer", "Options", ou "Quitter". Voici comment vous pouvez créer un menu de base avec des boutons interactifs.

1.1. Afficher un texte dans Pygame

Pygame permet d’afficher du texte en utilisant la classe pygame.font.Font. Vous pouvez charger une police de caractères, définir une taille, puis créer des surfaces de texte pour les afficher.

Code : Afficher du texte pour un menu :

import pygame

# Initialiser Pygame
pygame.init()

# Créer une fenêtre
screen = pygame.display.set_mode((800, 600))
pygame.display.set_caption("Menu Principal")

# Définir une police et une taille
font = pygame.font.Font(None, 74)  # Police par défaut, taille 74

# Créer un texte
text = font.render("Commencer", True, (255, 255, 255))

# Afficher le texte sur l'écran
screen.blit(text, (300, 200))

# Mettre à jour l'écran
pygame.display.flip()

1.2. Créer des boutons cliquables

Un bouton dans Pygame est simplement une zone rectangulaire où un utilisateur peut cliquer. Vous pouvez surveiller les événements de souris pour savoir si l'utilisateur clique à l'intérieur d’un rectangle, puis déclencher une action.

Code : Créer un bouton cliquable :

# Définir les dimensions du bouton
button_rect = pygame.Rect(300, 200, 200, 100)  # x, y, largeur, hauteur

# Dessiner le bouton
pygame.draw.rect(screen, (0, 128, 255), button_rect)

# Vérifier si l'utilisateur clique sur le bouton
for event in pygame.event.get():
    if event.type == pygame.MOUSEBUTTONDOWN:
        if button_rect.collidepoint(event.pos):
            print("Le bouton a été cliqué !")

1.3. Mettre en place le menu principal

Pour créer un menu principal complet, il suffit de combiner plusieurs boutons et d'assigner des actions différentes selon les interactions de l’utilisateur. Par exemple, un bouton "Jouer" peut lancer le jeu, et un bouton "Quitter" peut fermer le programme.

2. Gérer les événements utilisateur dans un menu

Dans un jeu avec des menus, il est crucial de gérer les événements de clavier et de souris. Vous pouvez capturer les événements pour surveiller les interactions du joueur et naviguer dans les différentes options du menu.

2.1. Gestion des événements de souris et clavier

Les événements dans Pygame sont capturés dans une boucle via pygame.event.get(). Vous pouvez surveiller des événements comme les clics de souris et les appuis sur les touches du clavier.

Code : Gérer les événements :

running = True
while running:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False
        elif event.type == pygame.MOUSEBUTTONDOWN:
            if button_rect.collidepoint(event.pos):
                print("Bouton cliqué !")
        elif event.type == pygame.KEYDOWN:
            if event.key == pygame.K_RETURN:  # Appuyer sur Entrée
                print("Appuyer sur Entrée pour jouer !")

2.2. Exemple complet d’un menu avec plusieurs boutons

Voici un exemple de menu complet avec trois boutons : "Jouer", "Options", et "Quitter".

Code : Exemple de menu principal complet :

import pygame

pygame.init()
screen = pygame.display.set_mode((800, 600))

font = pygame.font.Font(None, 74)
text_play = font.render("Jouer", True, (255, 255, 255))
text_options = font.render("Options", True, (255, 255, 255))
text_quit = font.render("Quitter", True, (255, 255, 255))

play_rect = pygame.Rect(300, 200, 200, 100)
options_rect = pygame.Rect(300, 350, 200, 100)
quit_rect = pygame.Rect(300, 500, 200, 100)

running = True
while running:
    screen.fill((0, 0, 0))
    screen.blit(text_play, (play_rect.x + 50, play_rect.y + 25))
    screen.blit(text_options, (options_rect.x + 35, options_rect.y + 25))
    screen.blit(text_quit, (quit_rect.x + 50, quit_rect.y + 25))

    pygame.draw.rect(screen, (0, 128, 255), play_rect, 2)
    pygame.draw.rect(screen, (0, 128, 255), options_rect, 2)
    pygame.draw.rect(screen, (0, 128, 255), quit_rect, 2)

    pygame.display.flip()

    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False
        elif event.type == pygame.MOUSEBUTTONDOWN:
            if play_rect.collidepoint(event.pos):
                print("Jouer")
            elif options_rect.collidepoint(event.pos):
                print("Options")
            elif quit_rect.collidepoint(event.pos):
                print("Quitter")

3. Afficher les scores et messages à l’écran

Les jeux incluent souvent un système de scores ou des messages d'état comme "Game Over" ou "Niveau terminé". Vous pouvez facilement afficher ces informations avec Pygame en utilisant des textes dynamiques.

3.1. Afficher les scores

Voici comment afficher un score en haut de l'écran qui se met à jour au fil du jeu.

Code : Afficher un score :

score = 0
font = pygame.font.Font(None, 36)

# Mettre à jour le score
def afficher_score(score):
    text = font.render("Score: " + str(score), True, (255, 255, 255))
    screen.blit(text, (10, 10))

# Dans la boucle principale du jeu
afficher_score(score)

3.2. Messages de fin de jeu

Lorsque le jeu se termine, vous pouvez afficher un message "Game Over" ou tout autre message pertinent pour informer le joueur de l’état du jeu.

Code : Afficher un message de fin de jeu :

def afficher_message(message):
    text = font.render(message, True, (255, 0, 0))
    screen.blit(text, (300, 250))

# Exemple d'affichage de "Game Over"
afficher_message("Game Over")

4. Créer des menus de pause et d'options

Un menu de pause permet au joueur de mettre le jeu en attente et d'accéder à des options comme la reprise du jeu ou la modification des paramètres.

4.1. Menu de pause basique

Vous pouvez implémenter un menu de pause qui est accessible en appuyant sur une touche (par exemple P pour pause), et revenir au jeu en appuyant sur la même touche.

Code : Menu de pause :

pause = False

while running:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False
        elif event.type == pygame.KEYDOWN:
            if event.key == pygame.K_p:  # Touche P pour pause
                pause = not pause

    if pause:
        afficher_message("Pause")
    else:
        # Logique du jeu continue ici
        pass

    pygame.display.flip()

Conclusion

Ajouter des interfaces utilisateurs telles que des menus et des boutons dans Pygame enrichit l’expérience utilisateur de vos jeux vidéo. Que ce soit pour créer un menu principal, afficher des scores, ou gérer des écrans de pause, Pygame fournit des outils flexibles pour répondre à ces besoins. En associant ces interfaces à une gestion des événements efficace, vous pouvez créer des jeux plus interactifs et conviviaux.