Graphismes avancés en Pygame¶

Apprenez à afficher de vrais sprites et images en Pygame pour transformer vos jeux en projets visuellement crédibles.

Jusqu’ici, on a fait des jeux avec des rectangles et des cercles. C’est très bien pour apprendre, mais au bout d’un moment, ça ressemble un peu à un contrôle de maths.

Dans cette page, on va apprendre à afficher :

des images
des sprites (images de personnages)
des sprites avec transparence
et un minimum de bonnes pratiques pour éviter les bugs et les lenteurs

Charger une image¶

Pour charger une image, on utilise :

image = pygame.image.load("chemin/vers/image.png")

Puis pour l’afficher :

screen.blit(image, (x, y))

Exemple :

player_img = pygame.image.load("assets/player.png")
screen.blit(player_img, (100, 100))

Important : le chemin du fichier¶

Si vous avez :

main.py
un dossier assets/

Alors un chemin typique ressemble à :

"assets/player.png"

Si votre image ne se charge pas : 90% du temps, c’est juste un chemin incorrect.

Transparence : PNG obligatoire¶

Si vous voulez un personnage avec un fond transparent, utilisez une image en PNG.

Et chargez-la comme ça :

player_img = pygame.image.load("assets/player.png").convert_alpha()

convert_alpha() permet d’avoir :

la transparence
et un affichage plus performant

Si votre image n’a pas de transparence (jpg par exemple), vous pouvez faire :

bg_img = pygame.image.load("assets/background.jpg").convert()

Afficher une image à une position¶

Comme pour les rectangles, l’écran utilise un repère où (0,0) est en haut à gauche.

x = 200
y = 150
screen.blit(player_img, (x, y))

Redimensionner une image¶

Parfois votre image ne fait pas la bonne taille. On peut la redimensionner :

player_img = pygame.transform.scale(player_img, (64, 64))

Ne redimensionnez pas l’image à chaque frame ! Faites-le une seule fois au début.

Retourner une image¶

Utile pour un personnage qui va à gauche / droite :

player_left = pygame.transform.flip(player_img, True, False)

Ici :

True : flip horizontal
False : flip vertical

Associer une image à un rectangle¶

Même si vous utilisez une image, vous aurez quand même besoin d’un Rect pour :

la position
les collisions

On fait souvent :

player_img = pygame.image.load("assets/player.png").convert_alpha()
player_rect = player_img.get_rect()
player_rect.topleft = (100, 100)

Ensuite :

screen.blit(player_img, player_rect)

Et vous pouvez bouger le joueur en modifiant le rect :

player_rect.x += 5

Oui pour l'instant ce n'est pas très pratique de coder comme ça, mais bientôt on verra un moyen plus sympa de structurer tout ça.

Exemple complet : image + déplacement¶

import pygame

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

player_img = pygame.image.load("player.png").convert_alpha()
player_img = pygame.transform.scale(player_img, (64, 64))

player_rect = player_img.get_rect()
player_rect.center = (400, 300)

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

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

    keys = pygame.key.get_pressed()
    if keys[pygame.K_LEFT]:
        player_rect.x -= speed
    if keys[pygame.K_RIGHT]:
        player_rect.x += speed
    if keys[pygame.K_UP]:
        player_rect.y -= speed
    if keys[pygame.K_DOWN]:
        player_rect.y += speed

    screen.fill((30, 30, 30))
    screen.blit(player_img, player_rect)
    pygame.display.flip()

pygame.quit()

pygame image — Une image de Mario à l'écran

`blit`, ça veut dire quoi ?¶

blit est un mot un peu bizarre qui vient de “copy fast” (en gros). Ça signifie : copier une image (surface) sur une autre (l’écran).

C’est donc la fonction de base pour afficher des sprites.

Quizz¶

img = pygame.image.load("player.png")
screen.blit(img, (100, 100))

Que manque-t-il très souvent ici pour éviter des bugs/ralentissements, surtout avec des PNG transparents ?
- Rien, c’est parfait
- `pygame.draw.rect(...)`
- *`convert_alpha()`
- `pygame.time.Clock()`
> Pour les images avec transparence, `convert_alpha()` est important : transparence correcte et affichage plus performant.

Exercice pratique¶

Dans un dossier assets/, mettez une image player.png (avec fond transparent si possible).

Codez un programme qui :

Charge l’image du joueur
Affiche-la à l’écran
Permet de la déplacer avec les flèches
Utilise un Rect associé à l’image (get_rect())
Redimensionne l’image à une taille raisonnable (ex: 64x64)

Bonus :

Affichez une image de fond (background)
Retournez le sprite quand le joueur va à gauche

En résumé¶

Vous savez maintenant :

Charger une image avec pygame.image.load
Afficher une image avec blit
Gérer la transparence avec convert_alpha()
Optimiser l’affichage avec convert() / convert_alpha()
Redimensionner et retourner une image avec pygame.transform
Utiliser un Rect même quand on utilise des sprites

Dans la prochaine page, on va faire un vrai truc stylé : donner de la vie au personnage avec des animations.