Afficher des formes à l'écran avec Pygame¶

Apprenez à dessiner des formes et comprendre le repère de l’écran pour afficher vos premiers éléments en Pygame.

Le repère de l’écran¶

Dans Pygame, l’écran est une grille de pixels.

Le point (0, 0) est en haut à gauche
L’axe x va vers la droite
L’axe y va vers le bas

Par exemple, sur une fenêtre de 800x600 :

(0, 0) : coin haut gauche
(800, 0) : coin haut droit
(0, 600) : coin bas gauche

Attention : en maths, l’axe va de haut en bas. En informatique graphique, c’est souvent l’inverse.

Dessiner un rectangle¶

Pour dessiner un rectangle, on utilise :

pygame.draw.rect(surface, couleur, rectangle)

Exemple :

pygame.draw.rect(screen, (255, 0, 0), (100, 100, 200, 80))

Ici :

(255, 0, 0) est la couleur (rouge)
(100, 100) est la position du coin haut gauche
200 est la largeur
80 est la hauteur

Dessiner un cercle¶

Pour un cercle :

pygame.draw.circle(surface, couleur, centre, rayon)

Exemple :

pygame.draw.circle(screen, (0, 255, 0), (400, 300), 50)

Ici :

(400, 300) est le centre du cercle
50 est le rayon

Dessiner plusieurs formes¶

Les fonctions de dessin doivent être appelées à chaque tour de boucle.

Exemple complet :

import pygame

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

running = True
while running:
    clock.tick(60)

    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False

    screen.fill((30, 30, 30))

    pygame.draw.rect(screen, (255, 0, 0), (100, 100, 200, 80))
    pygame.draw.circle(screen, (0, 255, 0), (400, 300), 50)

    pygame.display.flip()

pygame.quit()

Attention, si vous supprimez l’appel à screen.fill, les dessins vont s’accumuler à l’écran. On en reparlera plus tard, mais c’est parfois utilisé pour certains effets.

pygame formes — Résultat de l'affichage des formes

Dessiner des contours¶

Par défaut, les formes sont pleines.

On peut dessiner uniquement le contour en ajoutant un paramètre :

pygame.draw.rect(screen, (0, 0, 255), (200, 200, 150, 100), 3)

Ici, 3 est l’épaisseur du contour.

Les rectangles Pygame (`Rect`)¶

Pygame fournit un objet très utile : Rect.

Un Rect représente un rectangle avec :

une position
une taille

rect = pygame.Rect(100, 100, 200, 80)
pygame.draw.rect(screen, (255, 0, 0), rect)

Avantage :

plus lisible
on peut modifier facilement sa position

rect.x += 5
rect.y += 2

On utilisera les Rect partout pour les collisions plus tard.

Quizz¶

pygame.draw.rect(screen, (255, 0, 0), (50, 50, 100, 100))

Que représente le tuple `(50, 50, 100, 100)` ?
- Le centre et le rayon du rectangle
- *La position (x, y) et la taille (largeur, hauteur)
- Deux points opposés du rectangle
> Les deux premiers nombres sont la position du coin haut gauche, les deux suivants la taille.

Exercice pratique¶

Codez un programme Pygame qui :

Ouvre une fenêtre
Dessine le contour d'un cercle rouge
Dessine un rectangle bleu à l'intérieur du cercle.
Place-les à des positions différentes
Ne laisse aucun effet de traînée à l’écran

En résumé¶

Vous savez maintenant :

Comment fonctionne le repère de l’écran
Dessiner des rectangles et des cercles
Utiliser les couleurs RGB
Comprendre la différence entre position et taille
Utiliser un pygame.Rect pour représenter un objet à l’écran

Dans la prochaine page, on va commencer à interagir avec ce qu’on affiche.