• Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Premières fenêtres

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Si vous êtes ici, c'est que Pygame est installé sur votre machine, et que Python y a accès. :)
Dans cette partie, vous verrez (enfin :p ) une fenêtre gérée par Pygame, et nous essaierons de comprendre comment fonctionne l'affichage de la SDL pour ainsi insérer des images dans la fenêtre !

Nous allons maintenant afficher notre première fenêtre, allez, c'est parti !

Importer la bibliothèque

A partir de maintenant, je pars du principe que Pygame est installé pour Python 3 sur votre machine ! :)

Nous allons voir qu'il y a plusieurs manières d'importer Pygame pour votre programme.
Pour savoir comment importer la bibliothèque dans votre code Python, il faut savoir de quoi celle-ci est composée. Après un petit tour sur la documentation Pygame (http://pygame.org/docs), nous pouvons voir que Pygame est en fait composé de plusieurs modules, dont quelques uns des plus importants :

  • display

  • mixer

  • draw

  • event

  • image

  • mouse

  • time

Les noms des principaux modules sont assez faciles à comprendre. La bibliothèque est "découpées" en plusieurs parties, chacune gérant un système bien précis.
Par exemple, le module "display" s'occupe de l'affichage du programme à l'écran, et le module "mixer" se charge de la gestion des sons.

Importation d'un seul module

Voyons maintenant la première manière d'importer Pygame dans votre code. :)
Imaginez un programme qui, quand on le lance, se contente de jouer un son. Vous pouvez utiliser Pygame pour celà, mais charger toute la bibliothèque pour jouer un son peut être lourd !
C'est pour celà que l'on peut importer les modules un par un dans le script. Pour jouer un son, nous avons seulement besoin du module "mixer", nous l'importons donc avec :

import pygame.mixer

Vous devez avoir déjà vu l'importation dans le tutoriel Python, je passe donc vite ici... :)

Importation complète

La seconde manière d'importer la bibliothèque est de l'importer en entier, vous devez avoir une idée...

import pygame

Ce code importe tous les modules présents dans la bibliothèque Pygame.

Constantes de Pygame

Il est aussi conseillé d'importer les constantes de Pygame, mais cette fois-ci dans l'espace de votre script :

from pygame.locals import *

Pour y accéder, il faudra taper CONSTANTE, plutôt que pygame.CONSTANTE ! :)
Celà vous permettra une meilleure lisibilité dans l'utilisation de ces constantes, vous verrez plus tard à quoi elles serviront :)

Voilà, c'est tout, vous pouvez maintenant vous servir de la bibliothèque Pygame dans votre programme !
Vous voyez, l'importation n'était pas très compliquée ! :lol:

Ouvrir une fenêtre !

Pour afficher une fenêtre, nous importerons toute la bibliothèque Pygame, car nous utiliserons par la suite des fonctionnalités venant de plusieurs de ses modules. Je vous laisse taper ceci :

import pygame
from pygame.locals import *

Ca y est, on y a accès :) , mais avant de pouvoir faire quoique ce soit avec Pygame, il est nécessaire de l'initialiser.
Cette ligne de code initialise tous les modules pour nous :

pygame.init()

Une fois Pygame initialisé, on va se lancer dans la création d'une fenêtre, qui sera vide pour commencer !

Je vous laisse regarder cette ligne de code :

fenetre = pygame.display.set_mode((640, 480))

Maintenant, analysons :

  • Premièrement, nous déclarons une variable fenêtre

  • Nous appelons ensuite la fonction set_mode() contenue dans le module "display" de Pygame

  • Cette fonction prend en paramètre un tuple contenant la largeur et la hauteur de la fenêtre voulue.
    Attention, c'est un bien un tuple, et non pas deux arguments différents, il est donc nécessaire de mettre les parenthèses !

En fait, cette fonction retourne un objet de classe Surface, définie par Pygame. Cette classe est utilisée par la fenêtre ainsi que par chacune des images affichées dans celle-ci. Pour le moment, cette surface est vierge, elle est donc noire.

Vous devriez donc obtenir une fenêtre comme celle-ci :

Image utilisateur

Eh, mais si je lance mon script, la fenêtre apparaît et disparaît aussitôt ! o_O

En effet, Pygame affiche la fenêtre, et une fois qu'il a terminé, il considère que le travail est fait et continue le script. :p
Vous vous rappelez du chapitre sur les interfaces graphiques ? Je disais que celles-ci devaient produire une boucle qui s'effectuait tant qu'aucun événement ne se produisait.

Pour rester ouverte, la fenêtre a donc besoin d'une boucle infinie, je pense que vous savez faire celà, non ? :)

Voici le code minimal pour l'ouverture d'une fenêtre Pygame :

#Importation des bibliothèques nécessaires
import pygame
from pygame.locals import *

#Initialisation de la bibliothèque Pygame
pygame.init()

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

#Variable qui continue la boucle si = 1, stoppe si = 0
continuer = 1

#Boucle infinie
while continuer:
	continue #Je place continue ici pour pouvoir relancer la boucle infinie
                 #mais il est d'habitude remplacé par une suite d'instructions

Vous ne devriez pas avoir de difficultés à comprendre ce code :) La boucle infinie se charge simplement de garder le programme ouvert !

Eh mais avec ta boucle infinie je peux pas fermer la fenêtre !

Si vous avez eu cette réaction, vous avez eu raison ! :p
Nous verrons plus tard comment utiliser les événements, qui casseront cette boucle (qui donneront la valeur 0 à continuer), pour permettre à l'utilisateur de fermer la fenêtre d'un clic sur le bouton de fermeture, par exemple...
Pour l'instant, fermez la fenêtre par un Ctrl+C dans la console sous Linux, ou fermez simplement l'invite de commande qui s'ouvre sous Windows ! :)

Si vous souhaitez pouvoir redimensionner la fenêtre, vous devez utiliser la fonction comme ceci :

fenetre = pygame.display.set_mode((640,480), RESIZABLE)

La fenêtre prendra la taille voulu, mais on pourra la rétrécir ou l'agrandir ! :)

Si vous souhaitez la mettre en plein écran, utilisez le paramètre FULLSCREEN, de la même façon !

Afficher une image

On a une fenêtre, mais vide ! Ca vous intéresserait peut-être de la remplir un peu ? Si c'est le cas, on est parti ! :)

Afficher un fond

Nous allons commencer par afficher un beau fond pour cette fenêtre. Si vous avez suivi le tutoriel jusqu'à maintenant, vous avez besoin d'un fond de 640 par 480 pixels.

Allez, en voici un, c'est cadeau ! :)

Image utilisateurbackground.jpg

Enregistrez cette image et placez-la dans le répertoire de votre script Python.

Nous allons maintenant voir comment l'afficher dans notre fenêtre.
Avant de l'afficher, il faut charger l'image :

fond = pygame.image.load("background.jpg")

Ca y est, on peut maintenant accéder à l'image par la variable fond. La fonction load() retourne une Surface, contenant l'image voulue. Cependant, elle a gardé le format de pixels de l'image source, qui peut différer de celui utilisé par Pygame, ou par les autres images de votre programme !
Pour régler ce problème, nous utilisons la fonction convert(), qui vient tout de suite après load(). Grâce à cette ligne, votre image sera chargée et convertie au bon format, ce qui rendra l'affichage plus rapide ! :)

fond = pygame.image.load("background.jpg").convert()

Python n'aura plus à convertir l'image à chaque affichage ! Je vous conseille de faire ceci avec toutes vos images !

Maintenant, nous avons tout ce qu'il faut pour l'afficher dans cette fenêtre ! :p

Le principe d'affichage de la SDL est à connaître pour bien afficher ses images :
fenetre est une surface vide, sur laquelle on va "coller", ou "empiler" les autres images.
Le fond doit donc être empilé sur la surface vide de la fenêtre.

Voyons voir comment faire :

fenetre.blit(fond, (0,0))

Analysons ce code :

  • Nous utilisons la méthode blit() de la surface fenetre, à laquelle nous envoyons deux paramètres.

  • 1er paramètre : l'image à coller.

  • 2nd paramètre : le tuple contenant l'abscisse et l'ordonnée du point de collage (coin en haut à gauche de l'image)

Ce code peut se résumer par :
"colle l'image fond en haut à gauche de l'image fenetre."
ou encore : "sur l'image fenetre, colle l'image fond, en commençant au coin en haut à gauche."

Voilà un petit exemple pour mieux comprendre, une fenêtre contenant des images, ainsi que le tuple de coordonnées de leur point haut-gauche :

Image utilisateur

J'ai essayé de lancer le code, la fenêtre est toujours noire, pourquoi ?

Très bonne question ! :lol:
Il faut savoir que quand on "colle" une image, celle-ci n'apparait pas sur l'écran qu'on avait avant de la coller.
En effet, il faut "mettre à jour", ou "rafraîchir" l'écran pour voir les changements effectués depuis le dernier rafraîchissement !

Voilà la ligne qui permettra le rafraîchissement :

pygame.display.flip()

Ce code met à jour la fenêtre Pygame entière, et tadaaaaaam, votre image apparaît ! :D

Voici donc le code complet pour afficher un fond dans une fenêtre Pygame :

import pygame
from pygame.locals import *

pygame.init()

#Ouverture de la fenêtre Pygame
fenetre = pygame.display.set_mode((640, 480))

#Chargement et collage du fond
fond = pygame.image.load("background.jpg").convert()
fenetre.blit(fond, (0,0))

#Rafraîchissement de l'écran
pygame.display.flip()

#BOUCLE INFINIE
continuer = 1
while continuer:
	continuer = int(input())
Afficher un personnage

Maintenant que nous avons un fond, j'aimerais que vous me donniez le code permettant d'afficher le fond, et ce personnage aux cordonnées x = 200 et y = 300 !

Image utilisateurperso.png

Ca y est ? Alors voilà la correction !

import pygame
from pygame.locals import *

pygame.init()

#Ouverture de la fenêtre Pygame
fenetre = pygame.display.set_mode((640, 480))

#Chargement et collage du fond
fond = pygame.image.load("background.jpg").convert()
fenetre.blit(fond, (0,0))

#Chargement et collage du personnage
perso = pygame.image.load("perso.png").convert()
fenetre.blit(perso, (200,300))

#Rafraîchissement de l'écran
pygame.display.flip()

#BOUCLE INFINIE
continuer = 1
while continuer:
	continuer = int(input())

Ce code vous permet d'obtenir une fenêtre comme celle-ci :

Image utilisateur

J'espère que vous y êtes arrivé, ce n'était pas très difficile !
Ici vous pouvez voir que les images s'empilent les unes au dessus des autres. Le personnage s'est ainsi "empilé" sur l'image de fond, car il a été collé après ! :)

Gestion de la transparence

Mais attend ? C'est quoi ça ? La zone transparente est devenue noire !

Bien vu ! :lol: , pour régler cela, utilisez convert_alpha() au lieu de convert() pour les images à transparence !

Remplacez donc la ligne de chargement par :

perso = pygame.image.load("perso.png").convert_alpha()

Ca marche tout de suite beaucoup mieux ! :D

Si vous souhaitez utiliser une image sans transparence, mais rendre la couleur de fond transparente, vous pouvez utiliser cette la méthode de Surface set_colorkey(), qui prend en paramètre une valeur RGB (Red, Green, Blue), dont les valeurs vont de 0 à 255 :

image.set_colorkey((255,255,255)) #Rend le blanc (valeur RGB : 255,255,255) de l'image transparent

Vous pouvez retrouver ces valeurs pour n'importe quelle couleur grâce à GIMP, Photoshop, ou même Paint, grâce à l'outils de sélection de couleur !
Voilà l'exemple avec Paint :

Image utilisateur

C'est fait, vous êtes maintenant capable d'affichez n'importe quelle fenêtre, contenant n'importe quelle image ! :p

Vous pouvez être fier, vous avez affiché votre première fenêtre Pygame, et vos premières images ! :p
N'hésitez pas à vous entraîner, et à insérer d'autres images, à d'autres endroits, à les empiler les unes sur les autres pour familiariser avec ce concept !

Dans la prochaine partie, nous rendrons notre programme un peu plus interactif grâce aux événements ! :D
Nous rentrons maintenant dans le vif du sujet de la programmation de jeu en Python !

Exemple de certificat de réussite
Exemple de certificat de réussite