Afficher des images en fond d'écran en PyGame

Un fond d'écran va rendre ton jeu plus joli. Utilisez des images donnera un meilleur résultat qu'une simple couleur de fond..

    3ttr
  • Découverte

Utiliser un motif répétitif

Dans un jeu vidéo, il est parfois utile d'utiliser une image en motif (pattern) qui se répète pour couvrir tout l'écran. Voici comment procéder en PyGame.

Tu peux télécharger des images de fond dans la section téléchargement. Dans les exemples suivants, remplace le nom de fichier par celui dont tu as besoin.

  1. Charger l'image du motif :
background_tile = pygame.image.load('background.png')
  1. Dessiner l'image en répétition :
for x in range(0, largeur_ecran, background_tile.get_width()):
    for y in range(0, hauteur_ecran, background_tile.get_height()):
        screen.blit(background_tile, (x, y))

Le code fait exactement ça :

  • Il commence tout en haut à gauche de l'écran.

  • Il pose ton image carrée une fois.

  • Ensuite, il avance vers la droite et pose à nouveau ton image, juste à côté de la première, sans laisser d'espace.

  • Il fait ça jusqu'à remplir toute la ligne du haut.

  • Quand il arrive au bout, il descend d'une ligne, et recommence depuis le début.

  • Il fait ça ligne après ligne, jusqu'à ce que tout l'écran soit rempli.

Comme ça, tu obtiens un beau motif avec ton image, qui se répète partout sur l'écran !

Exemple complet

import pygame
import sys

# Initialisation
pygame.init()
largeur_ecran = 800
hauteur_ecran = 600

# Création de la fenêtre de jeu
screen = pygame.display.set_mode((largeur_ecran, hauteur_ecran))
clock = pygame.time.Clock()

# position initiale du joueur
player_x = 100
player_y = 100
vitesse = 5

# Chargement des images
player = pygame.image.load('player.png')
background_tile = pygame.image.load('sol_paves.png')


# Boucle de jeu
running = True
while running:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False

    # Mise à jour de l'écran
    # Remplir l'écran avec le motif répété
    for x in range(0, largeur_ecran, background_tile.get_width()):
        for y in range(0, hauteur_ecran, background_tile.get_height()):
            screen.blit(background_tile, (x, y))

    screen.blit(player, (player_x, player_y))
    pygame.display.flip()
    
    # Limiter la vitesse d'exécution (60 FPS)
    clock.tick(60)

pygame.quit()
sys.exit()

:: box-light 💣 on ajouté les variables largeur_ecran et hauteur_ecran

::

Exemple avec déplacement du personnage

import pygame
import sys

# Initialisation
pygame.init()
largeur_ecran = 800
hauteur_ecran = 600

# Création de la fenêtre de jeu
screen = pygame.display.set_mode((largeur_ecran, hauteur_ecran))
clock = pygame.time.Clock()

# position initiale du joueur
player_x = 100
player_y = 100
vitesse = 5

# Chargement des images
player = pygame.image.load('player.png')
background_tile = pygame.image.load('sol_paves.png')


# Boucle de jeu
running = True
while running:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False

    keys = pygame.key.get_pressed()
    
    if keys[pygame.K_LEFT] or keys[pygame.K_q]:
        player_x -= vitesse
    if keys[pygame.K_RIGHT] or keys[pygame.K_d]:
        player_x += vitesse
    if keys[pygame.K_UP] or keys[pygame.K_z]:
        player_y -= vitesse
    if keys[pygame.K_DOWN] or keys[pygame.K_s]:
        player_y += vitesse
        
    # Mise à jour de l'écran
    # Remplir l'écran avec le motif répété
    for x in range(0, largeur_ecran, background_tile.get_width()):
        for y in range(0, hauteur_ecran, background_tile.get_height()):
            screen.blit(background_tile, (x, y))

    screen.blit(player, (player_x, player_y))
    pygame.display.flip()
    
    # Limiter la vitesse d'exécution (60 FPS)
    clock.tick(60)

pygame.quit()
sys.exit()

Astuces

  • Choisis une image qui s'assemble bien pour éviter les coupures visibles.
  • Assure-toi que la taille du motif est optimisée pour éviter des répétitions trop évidentes.
  • Pour un effet plus dynamique, ajoute un léger déplacement du motif à chaque frame pour simuler un défilement.

Avec cette technique, tu peux créer facilement des arrière-plans immersifs et fluides !

Bonus

Pour les plus courageux: essaye d'afficher un mur autours de la fenêtre.

Cela peut se faire avce 3 boucles:

  1. Une pour le mur du haut
  2. Une pour les murs verticaux
  3. Une pour le mur du bas

Téléchargements

Sol (eau)
sol_eau.png
Sol (herbe)
sol_herbe.png
Sol (paves)
sol_paves.png
Sol (sable)
sol_sable.png
Sol (tapis)
sol_tapis.png
Mur (bonus)
mur.png

Pour aller plus loin