Introduction
L'interface utilisateur (UI) est un élément essentiel dans les jeux vidéo. Elle permet de rendre les interactions avec le joueur plus intuitives, via des boutons, des menus, ou encore l'affichage de scores et de messages à l'écran. En Pygame, bien qu'il n'existe pas de système d'interface intégré aussi développé que dans d'autres moteurs de jeu, il est tout à fait possible de créer une interface utilisateur fonctionnelle en gérant manuellement les éléments graphiques et les événements utilisateur.
Dans cet article, nous allons voir :
- Comment créer des boutons et des menus dans Pygame.
- Afficher des scores et des messages à l'écran.
- Gérer les événements utilisateur via une interface graphique.
1. Créer des boutons et des menus avec Pygame
Créer des boutons et des menus est un excellent moyen d'ajouter une interface interactive à vos jeux. Un bouton est généralement un rectangle que l'on dessine à l'écran, et qui réagit aux clics de la souris.
Créer un bouton simple
Pour créer un bouton, il faut :
- Dessiner un rectangle à l'écran.
- Détecter un clic de souris sur ce rectangle.
Voici un exemple de code qui crée un bouton et détecte un clic :
import pygame
# Initialiser Pygame
pygame.init()
# Créer la fenêtre
screen = pygame.display.set_mode((800, 600))
# Définir les couleurs
WHITE = (255, 255, 255)
BLUE = (0, 0, 255)
DARK_BLUE = (0, 0, 200)
# Définir la position et la taille du bouton
button_rect = pygame.Rect(300, 250, 200, 80)
# Police pour le texte
font = pygame.font.Font(None, 36)
running = True
while running:
for event in pygame.event.get():
if event.type == pygame.QUIT:
running = False
if event.type == pygame.MOUSEBUTTONDOWN:
if button_rect.collidepoint(event.pos):
print("Bouton cliqué !")
# Remplir l'écran avec du blanc
screen.fill(WHITE)
# Dessiner le bouton
pygame.draw.rect(screen, BLUE, button_rect)
# Ajouter du texte sur le bouton
text = font.render("Jouer", True, WHITE)
screen.blit(text, (button_rect.x + 50, button_rect.y + 25))
# Mettre à jour l'affichage
pygame.display.flip()
pygame.quit()
Explication :
pygame.draw.rect(): Dessine un rectangle qui sert de bouton.button_rect.collidepoint(event.pos): Vérifie si la position de la souris au moment du clic se trouve à l'intérieur du rectangle représentant le bouton.pygame.font.Font(): Utilisé pour afficher du texte (comme "Jouer") sur le bouton.
Avec ce code, un clic sur le bouton affichera "Bouton cliqué !" dans la console.
Créer un menu avec plusieurs boutons
Un menu est simplement un groupe de boutons disposés de manière organisée. Vous pouvez gérer plusieurs boutons en les stockant dans une liste et en vérifiant les clics pour chacun d'entre eux. Voici un exemple de menu simple avec trois boutons :
buttons = [
pygame.Rect(300, 200, 200, 80), # Bouton "Jouer"
pygame.Rect(300, 300, 200, 80), # Bouton "Options"
pygame.Rect(300, 400, 200, 80), # Bouton "Quitter"
]
button_texts = ["Jouer", "Options", "Quitter"]
running = True
while running:
for event in pygame.event.get():
if event.type == pygame.QUIT:
running = False
if event.type == pygame.MOUSEBUTTONDOWN:
for i, button in enumerate(buttons):
if button.collidepoint(event.pos):
print(f"Bouton '{button_texts[i]}' cliqué !")
screen.fill(WHITE)
for i, button in enumerate(buttons):
pygame.draw.rect(screen, BLUE, button)
text = font.render(button_texts[i], True, WHITE)
screen.blit(text, (button.x + 50, button.y + 25))
pygame.display.flip()
2. Afficher des scores et des messages à l'écran
L'affichage de scores ou de messages est une fonctionnalité essentielle pour informer les joueurs de leur progression ou pour afficher des informations importantes pendant le jeu.
Afficher un score à l'écran
Pour afficher un score ou un texte, Pygame utilise des polices pour rendre le texte sous forme d'image, qui peut ensuite être affichée à l'écran à l'aide de la fonction blit().
Voici comment afficher un score dynamique dans le coin supérieur gauche de l'écran :
# Initialiser la police
font = pygame.font.Font(None, 36)
# Initialiser le score
score = 0
running = True
while running:
for event in pygame.event.get():
if event.type == pygame.QUIT:
running = False
# Mettre à jour le score
score += 1
# Effacer l'écran
screen.fill(WHITE)
# Afficher le score
score_text = font.render(f"Score: {score}", True, (0, 0, 0))
screen.blit(score_text, (10, 10))
pygame.display.flip()
pygame.time.delay(100) # Juste pour ralentir un peu la mise à jour du score
pygame.quit()
Afficher un message à l'écran
Vous pouvez également afficher des messages d'information ou des notifications (comme "Game Over" ou "Victoire") de manière similaire. Voici comment afficher un message Game Over centré à l'écran :
message = "Game Over"
# Calculer la position pour centrer le texte
text = font.render(message, True, (255, 0, 0))
text_rect = text.get_rect(center=(400, 300))
screen.blit(text, text_rect)
pygame.display.flip()
3. Gestion des événements utilisateur via une interface graphique
Les événements utilisateur dans un jeu peuvent être capturés via l'interface graphique en détectant les interactions avec les boutons, les menus et autres éléments interactifs. Nous avons déjà vu comment capturer les clics de souris, mais vous pouvez aussi gérer d'autres types d'interactions, comme le clavier ou même des glissements sur des interfaces tactiles.
Exemple de gestion de la souris et du clavier via l'UI
Voici un exemple simple qui combine la détection de clics de souris et appuis sur les touches :
running = True
while running:
for event in pygame.event.get():
if event.type == pygame.QUIT:
running = False
# Gestion des événements de la souris
if event.type == pygame.MOUSEBUTTONDOWN:
if button_rect.collidepoint(event.pos):
print("Bouton cliqué avec la souris")
# Gestion des événements du clavier
if event.type == pygame.KEYDOWN:
if event.key == pygame.K_SPACE:
print("Touche Espace pressée")
screen.fill(WHITE)
pygame.draw.rect(screen, BLUE, button_rect)
pygame.display.flip()
Utilisation avancée : glisser-déposer
Pour les interfaces interactives plus complexes, vous pouvez également gérer des actions comme le glisser-déposer d'objets (drag and drop). Voici un exemple où un rectangle peut être déplacé par un clic et glissement de la souris :
dragging = False
rect = pygame.Rect(200, 200, 100, 50)
while running:
for event in pygame.event.get():
if event.type == pygame.QUIT:
running = False
if event.type == pygame.MOUSEBUTTONDOWN:
if rect.collidepoint(event.pos):
dragging = True
offset_x = rect.x - event.pos[0]
offset_y = rect.y - event.pos[1]
if event.type == pygame.MOUSEBUTTONUP:
dragging = False
if event.type == pygame.MOUSEMOTION:
if dragging:
rect.x = event.pos[0] + offset_x
rect.y = event.pos[1] + offset_y
screen.fill(WHITE)
pygame.draw.rect(screen, BLUE, rect)
pygame.display.flip()
Conclusion
La création d'une interface utilisateur avec Pygame est une étape importante dans le développement de jeux vidéo. Bien que Pygame n'ait pas de système UI intégré aussi complet que d'autres moteurs, il est possible de créer des interfaces interactives personnalisées grâce aux boutons, menus, et la gestion des événements utilisateur. En combinant ces éléments avec l'affichage de scores et de messages à l'écran, vous pouvez offrir une meilleure expérience aux joueurs.
Ces bases vous permettent de développer des interfaces plus avancées et de rendre vos jeux plus intuitifs et agréables à jouer.