oujood.com

Tutoriel sur l'affichage d'images avec Pygame

Tutoriel sur l'affichage d'images avec Pygame en utilisant Python. Importation de bibliothèques, initialisation de Pygame, définition de variables de base, chargement et affichage d'une image, exécution du programme

Après avoir : importer les bibliothèques nécessaires, initialiser Pygame et définir les variables de base comme ceci:

Exemple :       Copier le code

import pygame
import sys
pygame.init()
# Définir la taille de la fenêtre
largeur_fenetre = 800
hauteur_fenetre = 600

# Définir les couleurs (R, G, B)
blanc = (255, 255, 255)

# Créer la fenêtre
fenetre = pygame.display.set_mode((largeur_fenetre, hauteur_fenetre))
pygame.display.set_caption("Affichage d'images avec Pygame")

Trois étapes de base pour afficher des images sur la fenêtre de pygame :

Créer un objet surface image, c'est-à-dire un objet surface sur lequel une image est dessinée, en utilisant la méthode image.load() de pygame.

Copier l'objet surface image dans l'objet surface d'affichage en utilisant la méthode blit() de l'objet surface d'affichage de pygame.

Afficher l'objet surface d'affichage sur la fenêtre pygame en utilisant la méthode display.update() de pygame.

Charger et afficher une image

Ici, nous définissons la largeur et la hauteur de l'image et créons la surface d'affichage pour cette taille. Nous indiquons ensuite le chemin de l'image requise dans la fonction image.load() et enfin nous itérons sur la liste des objets d'événement avec la boucle while.

Voici le code python pour Charger et afficher une image en pygame

Exemple :       Copier le code

# Charger l'image
image = pygame.image.load('chemin/vers/votre/image.png')

# Obtenir les dimensions de l'image
largeur_image, hauteur_image = image.get_size()

# Position de départ de l'image
x = (largeur_fenetre - largeur_image) // 2
y = (hauteur_fenetre - hauteur_image) // 2

# Boucle principale
while True:
	for event in pygame.event.get():
		if event.type == pygame.QUIT:
			pygame.quit()
			sys.exit()

	# Effacer l'écran
	fenetre.fill(blanc)

	# Afficher l'image
	fenetre.blit(image, (x, y))

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

Rassembler les deux morceaux de code ci-dessus et enregistrez le script dans un fichier avec l'extension .py et exécutez-le. Assurez-vous que l'image que vous avez spécifiée existe dans le chemin que vous avez fourni.

Ce tutoriel vous donne une base pour afficher une image avec Pygame. Dans ce qui suit nous allons étendre ce programme en ajoutant des fonctionnalités telles que le déplacement de l'image à l'aide des touches du clavier, le redimensionnement de l'image, etc. Pour en savoir plus sur Pygame, consultez la documentation officielle : https://www.pygame.org/docs/

Obtenir la Largeur et la Hauteur d'une Image dans Pygame

Lorsque vous travaillez avec des images dans Pygame, il est souvent essentiel de connaître les dimensions de l'image que vous manipulez. Cela peut être nécessaire pour positionner correctement l'image dans la fenêtre, effectuer des opérations de redimensionnement, ou simplement pour des besoins d'analyse. Dans cet article, nous explorerons comment obtenir la largeur et la hauteur d'une image en utilisant la bibliothèque Pygame avec Python.

Deux méthodes sont possibles pour obtenir les dimensions d'une image en python.

Méthode 1 : Utilisation de la fonction de pygame get_size()

Cette fonction est capable de renvoyer les dimensions de l'image qui lui est fournie comme référence sous la forme d'un tuple.

Approche

  • Utiliser la méthode get_size() pour afficher la largeur et la hauteur de l'image. Cette méthode renvoie la largeur et la hauteur sous forme de tuples, par exemple (200,400).
  • Utiliser display.flip() pour afficher le contenu, c'est-à-dire que tout ce qui est dessiné sur l'objet surface d'affichage sera affiché sur la fenêtre lorsque la fonction est appelée dans le programme.

Chargement de l'Image

Supposons que vous ayez une image nommée "exemple_image.png" dans le même répertoire que votre script. Chargeons cette image et obtenons ses dimensions :

	
		
	

Méthode 2 : Utilisation des fonctions de pygame : get_width() et get_height()

Le nom de la fonction est suffisamment explicite quant à son utilisation.

Approche

  • Importer pygame
  • Créer un objet image en utilisant pygame.image.load("Indiquez ici le chemin d'accès à l'image ") et stockez-le dans une variable.
  • Pour obtenir la hauteur de l'image, utilisez la méthode image.get_height(), ici image est la variable dans laquelle l'objet image est stocké.
  • De même, pour obtenir la largeur de l'image, nous utilisons la méthode image.get_width(), image étant la variable dans laquelle l'objet image est stocké.
  • Imprimer le résultat.

Exemple : Ce code reprend la même image que dans l'exemple précédent mais il ne l'affiche, il imprime seulement les dimensions de l'image.

Exemple :       Copier le code

# Importation de la bibliothèque pygame
import pygame 

# Création de l'objet image
image = pygame.image.load('exemple_image.png') 

# La méthode get_height retourne la hauteur de la surface en pixels,
# dans notre cas, la surface est une image
print("Hauteur de l'image = " + str(image.get_height())) 

# La méthode get_width retourne la largeur de la surface en pixels,
# dans notre cas, la surface est une image
print("Largeur de l'image = " + str(image.get_width()))

Télécharger l'image utilisée dans les exemples ici

Comment faire pivoter et mettre à l'échelle des images avec PyGame ?

Rotation et mise à l'échelle sont des opérations courantes lors de la manipulation d'images dans Pygame. Voici comment vous pouvez effectuer ces opérations :

Rotation d'une Image

Pour faire pivoter une image dans Pygame, vous pouvez utiliser la fonction pygame.transform.rotate. Voici un exemple de code qui illustre comment faire pivoter une image :

Exemple :       Copier le code

# Importation de pygame
import pygame

# Initialisation de pygame
pygame.init()

# Définir la taille de la fenêtre
taille = largeur, hauteur = 600, 600
ecran = pygame.display.set_mode(taille)

# Horloge
horloge = pygame.time.Clock()

# Charger l'image
image = pygame.image.load('exemple_image.png')

# Définir la taille de l'image
TAILLE_IMAGE_PAR_DEFAUT = (100, 100)

# Faire pivoter l'image par n'importe quel degré
# ici 15 degré
image = pygame.transform.rotate(image, 15)

# Définir une position par défaut
POSITION_IMAGE_PAR_DEFAUT = (20, 20)

# Préparer la condition de la boucle
en_cours = False

# Boucle d'événements
while not en_cours:

    # Événement de fermeture de la fenêtre
    for evenement in pygame.event.get():
        if evenement.type == pygame.QUIT:
            en_cours = True

    # Couleur de fond
    ecran.fill((0, 0, 0))

    # Afficher l'image
    ecran.blit(image, POSITION_IMAGE_PAR_DEFAUT)

    # Partie de la boucle d'événements
    pygame.display.flip()
    horloge.tick(30)

Dans cet exemple, l'image est chargée, pivotée de 45 degrés, et affichée dans la fenêtre.

Mise à l'échelle d'une Image

La mise à l'échelle d'une image dans Pygame peut être réalisée avec la fonction pygame.transform.scale. Voici un exemple de code :

Exemple :       Copier le code

import pygame
import sys

pygame.init()

# Charger l'image
image = pygame.image.load('exemple_image.png')

# Dimensions de l'image d'origine
largeur_image, hauteur_image = image.get_size()

# Facteur d'échelle (1.5 pour agrandir, 0.5 pour réduire de moitié, etc.)
facteur_echelle = 1.5

# Mise à l'échelle de l'image
image_echelle = pygame.transform.scale(image, (int(largeur_image * facteur_echelle), int(hauteur_image * facteur_echelle)))

# Dimensions de l'image mise à l'échelle
largeur_echelle, hauteur_echelle = image_echelle.get_size()

# Dimensions de la fenêtre
largeur_fenetre = 800  # Remplacez par la largeur de votre fenêtre
hauteur_fenetre = 600  # Remplacez par la hauteur de votre fenêtre

# Position de départ de l'image mise à l'échelle
x = (largeur_fenetre - largeur_echelle) // 2
y = (hauteur_fenetre - hauteur_echelle) // 2

# Couleur blanche
blanc = (255, 255, 255)

# Création de la fenêtre
fenetre = pygame.display.set_mode((largeur_fenetre, hauteur_fenetre))

# Boucle principale
while True:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            pygame.quit()
            sys.exit()

    # Effacer l'écran
    fenetre.fill(blanc)

    # Afficher l'image mise à l'échelle
    fenetre.blit(image_echelle, (x, y))

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


Dans cet exemple, l'image est chargée, mise à l'échelle de 1.5 fois sa taille d'origine, et affichée dans la fenêtre.

Rotation et mise à l'échelle de l'image

Voyons comment effectuer la mise à l'échelle et la rotation d'une image donnée. Nous allons définir la taille par défaut de l'image qui nous convient et la position par défaut de l'image à l'endroit où nous voulons la voir sur l'écran de la fenêtre. Les mêmes méthodes que celles expliquées ci-dessus seront utilisées pour la mise à l'échelle et la rotation de l'image. Mais ici au lieu de donner une échelle (1.5), nous donnons une taille(DEFAULT_IMAGE_SIZE ) que doit prendre l'mage après conversion.

Exemple :

Exemple :       Copier le code

# Importation de pygame
import pygame

# Initialiser pygame
pygame.init()

# Définir la taille de la fenêtre
size = width, height = 600, 600
screen = pygame.display.set_mode(size)

# Horloge
clock = pygame.time.Clock()

# Chargement de l'image
image = pygame.image.load('exemple_image.png')

# Définir la taille de l'image
DEFAULT_IMAGE_SIZE = (200, 200)

# Adapte l'image à la taille souhaitée
image = pygame.transform.scale(image, DEFAULT_IMAGE_SIZE)

# Faites pivoter l'image de n'importe quel degré
image = pygame.transform.rotate(image, 90)

# Définir une position par défaut
DEFAULT_IMAGE_POSITION = (200, 200)

# Préparer la condition de boucle
running = False

# Boucle événementielle
while not running:
	# Fermer la fenêtre événement
	for event in pygame.event.get():
		if event.type == pygame.QUIT:
			running = True

	# Couleur d'arrière-plan
	screen.fill((0, 0, 0))

	# Afficher l'image
	screen.blit(image, DEFAULT_IMAGE_POSITION)

	# Partie de la boucle d'événement
	pygame.display.flip()
	clock.tick(30)

Effet miroir horizontal ou retourner une Image Horizontalement avec Pygame

Pour retourner une image horizontalement c'est à dire lui donner un effet miroir dans Pygame, vous pouvez utiliser la fonction pygame.transform.flip. Voici un exemple de code :

Syntaxe:

pygame.transform.flip(Surface, True, False)

Exemple :       Copier le code

import pygame
import sys

pygame.init()

# Charger l'image
image = pygame.image.load('exemple_image.png')

# Retourner l'image horizontalement
image_retournee = pygame.transform.flip(image, True, False)

# Obtenir les dimensions de l'image d'origine
largeur_image, hauteur_image = image.get_size()

# Obtenir les dimensions de l'image retournée
largeur_retournee, hauteur_retournee = image_retournee.get_size()

# Position de départ de l'image retournée
x = (largeur_fenetre - largeur_retournee) // 2
y = (hauteur_fenetre - hauteur_retournee) // 2

# Boucle principale
while True:
	for event in pygame.event.get():
		if event.type == pygame.QUIT:
			pygame.quit()
			sys.exit()

	# Effacer l'écran
	fenetre.fill(blanc)

	# Afficher l'image retournée
	fenetre.blit(image_retournee, (x, y))

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

Dans cet exemple, l'image est chargée, retournée horizontalement, et affichée dans la fenêtre. L'appel à pygame.transform.flip(image, True, False) retourne l'image horizontalement. Le premier argument est l'image d'origine, le deuxième argument (True) indique le retournement horizontal, et le troisième argument (False) indique qu'aucun retournement vertical n'est effectué.

Effet miroir vertical ou retourner une Image verticalement avec Pygame

Pour retourner une image verticalement dans Pygame, vous pouvez utiliser la fonction pygame.transform.flip de manière similaire à la rotation horizontale. Cependant, cette fois-ci, vous allez spécifier False pour le retournement horizontal et True pour le retournement vertical.

Syntaxe:

pygame.transform.flip(Surface, False, True)

Pour exemple reprenez l'exemple précédent et changer la ligne
image_retournee = pygame.transform.flip(image, True, False)
en :
image_retournee = pygame.transform.flip(image, False, True)

On peut aussi faire Retourner une image verticalement et horizontalement, vous avez compris qu'il faut dans ce cas mettre les deux paramètres sur True

Déplacer une Image avec la Souris dans Pygame

Pour déplacer une image avec la souris dans Pygame, suivez ces étapes principales :

  1. Initialisation de Pygame : Commencez par initialiser Pygame et configurer la fenêtre.
  2. Chargement de l'image : Chargez l'image que vous souhaitez déplacer.
  3. Boucle Principale : Créez une boucle principale pour surveiller les événements, y compris les mouvements de la souris.
  4. Position de l'Image : Suivez la position de la souris et mettez à jour la position de l'image en conséquence.

Voici un exemple de code qui illustre comment déplacer une image avec la souris dans Pygame :

Exemple :       Copier le code

import pygame
import sys

pygame.init()

# Paramètres de la fenêtre
largeur_fenetre = 800
hauteur_fenetre = 600
fenetre = pygame.display.set_mode((largeur_fenetre, hauteur_fenetre))
pygame.display.set_caption("Déplacer une Image avec la Souris")

# Couleurs
blanc = (255, 255, 255)

# Charger l'image
image = pygame.image.load('exemple_image.png')
image_rect = image.get_rect()

# Position de départ de l'image
x, y = (largeur_fenetre - image_rect.width) // 2, (hauteur_fenetre - image_rect.height) // 2

# Boucle principale
while True:
	for event in pygame.event.get():
		if event.type == pygame.QUIT:
			pygame.quit()
			sys.exit()

	# Obtenir la position de la souris
	mouseX, mouseY = pygame.mouse.get_pos()

	# Vérifier si le bouton gauche de la souris est enfoncé
	if pygame.mouse.get_pressed()[0]:
		# Mettre à jour la position de l'image selon la position de la souris
		x, y = mouseX - image_rect.width // 2, mouseY - image_rect.height // 2

	# Effacer l'écran
	fenetre.fill(blanc)

	# Afficher l'image à la position actuelle
	fenetre.blit(image, (x, y))

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

Dans cet exemple, la position de l'image est mise à jour en fonction de la position de la souris lorsque le bouton gauche de la souris est enfoncé. L'image est ensuite affichée à la nouvelle position à chaque itération de la boucle principale.

Exemple 2

Exemple :       Copier le code

# Programme Python pour déplacer l'image avec la souris

# Importer la bibliothèque pygame
import pygame
from pygame.locals import *

# Entrée des couleurs
JAUNE = (255, 255, 0)
BLEU = (0, 0, 255)

# Initialiser le jeu GUI
pygame.init()

# Définir les dimensions de l'interface graphique du jeu
largeur, hauteur = 640, 350
écran = pygame.display.set_mode((largeur, hauteur))

# Entrée de l'image
img = pygame.image.load('old-logo.png')
img.convert()

# Dessiner un rectangle autour de l'image
rect = img.get_rect()
rect.center = largeur // 2, hauteur // 2

# Définir les valeurs de fonctionnement et de déplacement
en_cours = True
en_mouvement = False

# Définir ce qui se passe lorsque le jeu est en cours d'exécution
while en_cours:
	
	for event in pygame.event.get():

		# Fermer si l'utilisateur quitte le jeu
		if event.type == QUIT:
			en_cours = False

		# Faire bouger l'image
		elif event.type == MOUSEBUTTONDOWN:
			if rect.collidepoint(event.pos):
				en_mouvement = True

		# Définir en_mouvement sur False si vous voulez 
		# déplacer l'image seulement avec le clic de la souris
		# Définir en_mouvement sur True si vous voulez 
		# déplacer l'image sans le clic de la souris
		elif event.type == MOUSEBUTTONUP:
			en_mouvement = False

		# Faire bouger continuellement votre image
		elif event.type == MOUSEMOTION and en_mouvement:
			rect.move_ip(event.rel)

	# Définir la couleur de l'écran et afficher l'image sur l'écran
	écran.fill(JAUNE)
	écran.blit(img, rect)

	# Construire la bordure autour de l'image
	pygame.draw.rect(écran, BLEU, rect, 2)

	# Mettre à jour l'interface graphique pygame
	pygame.display.update()

# Quitter le jeu GUI
pygame.quit()

N'oubliez pas d'ajuster le chemin de l'image dans les exemples en fonction de l'emplacement de votre fichier.




Voir aussi nos tutoriel :

CSS border-right

Définit toutes les propriétés de bordure à droite dans une déclaration

fonction lcfirst, lcfirst

Met le premier caractère en minuscule

min-height

Définit la hauteur minimale d'un élément