(1ADS 08) Interfaces Graphiques

Interfaces graphiques.
1ADS Algorithm in Python
© SUPINFO Interna/onal University – h8p://www.supinfo.com

Objec&fs de ce module
• Présenter une interface graphique simple et

conviviale : Pygame.
• Faire des premiers dessins, chargements

d’images et déplacements de sprites.
• Gérer des événements au clavier ou à la souris.

Plan de ce module
1. Installa/on et premiers pas.

2. Premiers dessins.
3. Ges/on des événements.

1. INSTALLATION ET PREMIERS PAS.

Plan de ce chapitre
a. GUI et CLI.

b. Télécharger pygame.
c. Un premier code.
d. Programme piloté par les événements.


a. GUI et CLI.

• Les programmes écrits jusqu’à maintenant possédaient
une CLI, Command Line Interface.
• Les possibilités d’affichages et d’interac/ons étaient bien

évidemment limitées.
• Nous allons maintenant concevoir des programmes avec

une GUI, Graphic User Interface.

a. GUI et CLI.

De nombreux choix possibles :

• Tkinter (compris dans IDLE).
• PySFML.
• PyQt.
• PyGTK.
• ...
• Pygame.


a. GUI et CLI.

Pourquoi le choix de Pygame ? CeLe librairie est :

• Populaire.
• Compa/ble avec plusieurs OS.
• Facile à installer et à u/liser.
• Très bien documentée.

b. Télécharger Pygame.
• La page de téléchargement du site “officiel”
h8p://www.pygame.org n’est pas à jour.
• On téléchargera la version qu’il nous faut à l’une de ces

deux adresses :
– h8ps://bitbucket.org/pygame/pygame/downloads
– h8p://www.lfd.uci.edu/~gohlke/pythonlibs/#pygame

b. Télécharger Pygame.
Remarque :

• Pour tester que l’installa/on s’est bien déroulé, tapez
“import pygame” dans votre console.

c. Un premier code.

import pygame, sys
from pygame.locals import *
pygame.init()
maSurface = pygame.display.set_mode((500,
300))
pygame.display.set_caption('Hello
SUPINFO')
while True:
for event in pygame.event.get():
if event.type == QUIT:
pygame.quit()
sys.exit()
pygame.display.update()
c. Un premier code.

Le résultat de ce premier code :

c. Un premier code.

1. Les imports :
import pygame, sys

• Le premier permet d’importer les fonc/ons de Pygame et

de notre système d’exploita/on.
• Le second permet d’importer les constantes de Pygame
dont nous aurons besoin.

c. Un premier code.

2. L’ini&alisa&on :
pygame.init()
• Ce8e commande permet l’ini/alisa/on de toutes les

fonc/ons et constantes dont nous aurons besoin.

c. Un premier code.

3. La créa&on de la surface :
300))
• Créa/on d’une surface de 500 pixels de large sur 300

pixels de hauteur, et affecta/on de ce8e surface à une
variable nommée “maSurface”.
• Il est important de noter que le paramètre de la fonc/on
de créa/on est un t-‐uple.
c. Un premier code.

4. Donner un &tre à la fenêtre :
SUPINFO')
• Ici on donne comme /tre à la fenêtre la chaîne de

caractère passée en paramètre.

c. Un premier code.

5. La “boucle de jeu” :
while True:
...
• Ce “while” signifie que l’on répètera ce8e boucle tant que

l’on ne rencontrera pas un “break”, un “return” ou un
“sys.exit()”.
• Ces instruc/ons seront commandées par l’exécu/on d’un
événement de l’u/lisateur.
c. Un premier code.

5. La “boucle de jeu” (suite) :
while True:
...
• Une seconde boucle permet de traiter la liste des

événements (souris, clavier, ...) selon leur ordre
d’appari/on.

c. Un premier code.

6. La sor&e de la boucle de jeu :
pygame.quit()
sys.exit()
• On teste si le “type” de l’événement est “QUIT”, ce qui

correspond à un clic sur la croix de la fenêtre.
• Dans ce cas la commande “pygame.quit()” permet de
désac/ver la librairie et “sys.exit()” permet de terminer
le programme.
c. Un premier code.

7. La mise à jour de la surface :
• Ce8e commande permet d’afficher à l’écran les

éventuelles modifica&ons apportées à la surface.
• Bien saisir qu’une modifica/on de la surface (tracé,
déplacement d’une image, ...) n’est pas “visible” tant que
ce8e commande n’est pas exécutée.
c. Un premier code.

Remarque importante :

• Tous nos programmes comporteront plus ou moins les
étapes précédentes.
• Avec évidemment une “boucle de jeu” plus étoffée.

d. Programme piloté par événements.

Exécu&on d’un programme CLI :
ini/alisa/on
Exécu/on des
fonc/onnalités du
programme
Fin du programme


• En mode CLI, on dit que le programme pilote les
événements.
• Même si de l’interac/vité est possible, elle est à l’ini&a&ve

du programme.
• C’est ce dernier qui impose en par/culier l’ordre des

saisies de l’u/lisateur.


• Par exemple dans un jeu de morpion, c’est le programme
qui va demander au joueur quelle case il veut jouer.
• Puis plus tard s’il veut refaire une autre par/e.
• Mais ces étapes ne pourront s’inverser, le programme

impose l’ordre.


Exécu&on d’un programme GUI :
ini/alisa/on
Exécu/on des
Souris, Récep/on
fonc/onnalités du
clavier ... d’événements
programme
Fin du programme


• En mode GUI, on dit que le programme est piloté par les
événements.
• La phase de récep/on des événements est permanente, et

traite ceux-‐ci selon leurs ordres d’appari/on.
• Selon la nature de ces événements, telle ou telle

fonc/onnalité du programme est exécutée.
• Ce8e fois-‐ci l’ordre des exécu/ons des fonc/onnalités est

laissée à l’u/lisateur.

• Dans le jeu du morpion, un joueur pourra par exemple
choisir de faire une nouvelle par/e au lieu de jouer son
coup.


• La phase de récep/on des événements est implémentée
avec une boucle qui “tourne” tant qu’aucun événement ne
se produit.
• Il va sans dire que la récep/on d’événements conduira à

une mise à jour de la fenêtre graphique.


Autre visualisa&on :

Fin de ce chapitre
Avez – vous des ques/ons ?

2. PREMIERS DESSINS.

Plan de ce chapitre
a. Le système de coordonnées.

b. Les couleurs.
c. Dessiner des formes classiques.
d. Afficher une image.
e. L’illusion du mouvement.
f. Écrire du texte.


• La surface sur laquelle on va dessiner, insérer des images,
etc. peut être vue comme un tableau de pixels.
maSurface = pygame.display.set_mode((l,h))

• Ce8e commande créé donc une surface de l pixels de large
sur h pixels de hauteur.
• Un pixel de la surface est reperé par un t-‐uple (x,y), où x
est entre 0 et l -‐ 1, et y entre 0 et h -‐ 1


Exemple : une surface de 16 pixels sur 9 pixels, deux étant
noirs (7,0) et (2,7).
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
0
1
2
3
4
5
6
7
8

b. Les couleurs.
Codage des couleurs :

• Les différentes couleurs des pixels sont codées en RGB,
Red Green Blue.
• Une couleur sera donc représentée par un t-‐uple (r,g,b) où
r, g et b sont des en/ers entre 0 et 255.

b. Les couleurs.
Remarque :

• Pour améliorer la lisibilité de nos codes, on prendra
l’habitude de déclarer des constantes correspondantes
aux différentes couleurs que l’on u/lisera :
BLUE = (0, 0, 255)

BLACK = (0, 0, 0)
WHITE = (255, 255, 255)
...

b. Les couleurs.
Remarque :

• Par défaut, à la créa/on d’une surface, celle-‐ci est noire.
• Pour modifier la couleur de fond, on u/lisera la

commande :
maSurface.fill(COLOR)


• On considère ici que l’on dispose d’une surface nommée
“maSurface”.
• On suppose aussi que l’on dispose d’une couleur “COLOR”.
• On va voir des commandes pour dessiner des lignes,

polygones, rectangles, cercles et ellipses.


Dessin d’une ligne :

pygame.draw.line(maSurface,COLOR,(x,y),
(z,t),epaisseur)

• Trace une ligne du point (x,y) vers le point (z,t).
• Par défaut épaisseur vaut 1 pixel.


Dessin d’un polygone :

pygame.draw.polygon(maSurface,COLOR,((x,y),
(z,t),...,(u,v)),epaisseur)

• Trace un polygone fermé du point (x,y) vers le point (u,v)
en passant par les points (z,t), ...
• Par défaut épaisseur vaut 1 pixel.


Dessin d’un rectangle :

pygame.draw.rect(maSurface,COLOR,
(x,y,l,h),epaisseur)

• Trace un rectangle dont le sommet en haut à droite est en
(x,y) et dont les largeurs et hauteurs valent l et h.
• Par défaut épaisseur vaut 0, i.e. le rectangle est “plein”.


Dessin d’un cercle :

pygame.draw.circle(maSurface,COLOR,(x,y),
r,epaisseur)

• Trace un cercle dont le centre est en (x,y) et dont le rayon
vaut r.
• Par défaut épaisseur vaut 0, i.e. le cercle est “plein”.


Dessin d’une ellipse :

pygame.draw.ellipse(maSurface,COLOR,
(x,y,l,h),epaisseur)

• Trace une ellipse dont le rectangle tangent a pour
paramètres (x,y,l,h).
• Par défaut épaisseur vaut 0, i.e. l’ellipse est “pleine”.


Exemple :
import pygame, sys
WHITE = (255,255,255)
BLUE = (0,0,255)
GREEN = (0,255,0)
RED = (255,0,0)
BLACK = (0,0,0)
pygame.init()
300))
SUPINFO')
maSurface.fill(RED)

Exemple (suite) :
pygame.draw.rect(maSurface,BLUE,
(10,10,200,100))
pygame.draw.line(maSurface,BLUE,(20,200),
(200,250),5)
pygame.draw.circle(maSurface,WHITE,
(400,100),20)
pygame.draw.polygon(maSurface,BLACK,(
(400,70),(440,80),(440,130),(290,130),
(270,100)),1)
pygame.draw.ellipse(maSurface,GREEN,
(250,200,100,50))


Exemple (encore la suite) :
while True:
pygame.quit()
sys.exit()


Exemple (fin) :


Autre représenta&on des rectangles :

monRect = pygame.Rect(x,y,l,h)

• A8en/on, ceci ne modifie en rien la surface courante.
• Par contre, un tel objet peut être passé en paramètre aux
fonc/ons de dessins des rectangles et ellipses.


Intérêt de ceLe représenta&on :

• Pouvoir récupérer automa&quement (i.e. sans calculs)
toutes les propriétés du rectangle.
• Exemples : monRect.lew, monRect.right, monRect.top,

monRect.bo8om, monRect.centerx, monRect.centery,
monRect.width, monRect.height, monRect.toplew, ...


Charger une image :

monImage = pygame.image.load(‘nom.xxx’)

• A8en/on, ceci ne modifie en rien la surface courante.
• L’image doit se trouver dans le répertoire du programme

et doit être aux extensions classiques : JPG, PNG, GIF,
BMP.


Copier l’image sur la surface “courante” :

maSurface.blit(monImage,(x,y))

• Ce8e commande “colle” l’image précédemment chargée
sur la surface courante.
• Le coin en haut à gauche de l’image sera posi/onné en

(x,y).


Exemple : imaginons que nous ayons deux images
‘fond.jpg’ (640 x 480) et ‘avion.png’ (80 x 80) dans le
répertoire de notre programme.
import pygame, sys

pygame.init()
480))
SUPINFO')


Exemple (suite) :
fond = pygame.image.load("fond.jpg”)
maSurface.blit(fond,(0,0))
ariane = pygame.image.load('avion.png')
maSurface.blit(ariane,(500,300))


Exemple (fin) :


• Le FPS, Frame Per Second, désigne le nombre d’images
que le programme dessine par secondes.
• Si on ne l’impose pas, le programme ira aussi vite que le

permet le processeur.
• Ce qui peut rendre les jeux et/ou anima/ons trop rapides.


Comment contrôler le FPS :

• Au début du code :
fpsClock = pygame.time.Clock()
• À la fin de la “boucle de jeu”, après la mise à jour de la
surface :
fpsClock.tick(FPS)


Exemple : avec les mêmes images que précédemment.
import pygame, sys

pygame.init()
FPS = 30
fpsClock = pygame.time.Clock()
480))
SUPINFO')


Exemple (suite) :
fond = pygame.image.load("fond.jpg”)
y = 300


Exemple (fin) : la “boucle de jeu”.
while True:
y -= 5
maSurface.blit(ariane,(500,y))
pygame.quit()
sys.exit()
fpsClock.tick(FPS)


Voyons cela sur un exemple :
import pygame, sys

pygame.init()
480))
SUPINFO')
WHITE = (255,255,255)
BLACK = (0,0,0)
fond = pygame.image.load("fond.jpg")


Exemple (suite) :
fontObj = pygame.font.Font
('freesansbold.ttf',48)
texteSurface = fontObj.render('Jolie
écorce',True,BLACK,WHITE)
texteRect = texteSurface.get_rect()
texteRect.topleft = (100,100)
maSurface.blit(texteSurface,texteRect)


Exemple (fin) :

Fin de ce chapitre

3. GESTION DES ÉVÉNEMENTS.

Plan de ce chapitre
a. Événements au clavier.

b. Événements à la souris.



Test de l’appui d’une touche :

if event.type == KEYDOWN

Test du relachement d’une touche :

if event.type == KEYUP


Test de la nature de la touche :

• Les tests précédent sont indépendants de la touche
pressée.
• On les complète en général par une vérifica&on de la

touche :
– K_a, K_b, ..., K_z
– K_0, ..., K_9
– K_SPACE, K_RIGHT, K_LEFT, K_DOWN, K_UP


Exemple : on reprend nos deux images ‘avion’ et ‘fond’.
import pygame, sys

pygame.init()
480))
SUPINFO')


Exemple (suite) :
y = 300


while True:
pygame.quit()
sys.exit()
if event.type == KEYDOWN:
if event.key == K_UP:
y -= 5
if event.key == K_DOWN:
y += 5
maSurface.blit(ariane,(500,y))

Remarque :

• Pour gérer les déplacements lorsque l’on laisse la touche
appuyée, on u/lisera ce8e commande en amont de la
boucle de jeu :
pygame.key.set_repeat(t1,t2)
où les paramètres sont le délai entre avant l’envoi de la

première répé//on, et l’intervalle de temps entre les
répé//ons suivantes.

Test d’un clic :

if event.type == MOUSEBUTTONUP

Test du relachement de la pression :

if event.type == MOUSEBUTTONDOWN


Récupéra&on des coordonnées du clic :

poseX, poseY = event.pos

Ou alors, u/lisa/on directe de
event.pos[0], event.pos[1]


Récupéra&on du type de clic :

event.button

• 1 : bouton gauche
• 2 : bouton du milieu
• 3 : bouton droit
• 4 : mole8e haut
• 5 : mole8e bas


Exemple : on reprend nos deux images ‘avion’ et ‘fond’.
import pygame, sys

pygame.init()
480))
SUPINFO')


Exemple (suite) :
maSurface.blit(ariane,(500,300))


while True:
pygame.quit()
sys.exit()
if event.type == MOUSEBUTTONUP:
x,y = event.pos
maSurface.blit(ariane,(x,y))

Fin de ce chapitre

THE END.

(1ADS 08) Interfaces Graphiques

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

(1ADS 08) Interfaces Graphiques

Transféré par

Droits d'auteur :

Formats disponibles

Interfaces graphiques.

1ADS Algorithm in Python

© SUPINFO Interna/onal University – h8p://www.supinfo.com

Objec&fs de ce module

• Présenter une interface graphique simple et

• Faire des premiers dessins, chargements

• Gérer des événements au clavier ou à la souris.

© SUPINFO Interna/onal University – h8p://www.supinfo.com

Plan de ce module

1. Installa/on et premiers pas.

© SUPINFO Interna/onal University – h8p://www.supinfo.com

1. INSTALLATION ET PREMIERS PAS.

© SUPINFO Interna/onal University – h8p://www.supinfo.com

Plan de ce chapitre

a. GUI et CLI.

© SUPINFO Interna/onal University – h8p://www.supinfo.com

a. GUI et CLI.

• Les possibilités d’aﬃchages et d’interac/ons étaient bien

• Nous allons maintenant concevoir des programmes avec

© SUPINFO Interna/onal University – h8p://www.supinfo.com

a. GUI et CLI.

© SUPINFO Interna/onal University – h8p://www.supinfo.com

a. GUI et CLI.

• Compa/ble avec plusieurs OS.

• Facile à installer et à u/liser.

• Très bien documentée.

© SUPINFO Interna/onal University – h8p://www.supinfo.com

• On téléchargera la version qu’il nous faut à l’une de ces

© SUPINFO Interna/onal University – h8p://www.supinfo.com

© SUPINFO Interna/onal University – h8p://www.supinfo.com

c. Un premier code.

c. Un premier code.

© SUPINFO Interna/onal University – h8p://www.supinfo.com

c. Un premier code.

import pygame, sys

• Le premier permet d’importer les fonc/ons de Pygame et

c. Un premier code.

• Ce8e commande permet l’ini/alisa/on de toutes les

© SUPINFO Interna/onal University – h8p://www.supinfo.com

c. Un premier code.

• Créa/on d’une surface de 500 pixels de large sur 300

c. Un premier code.

• Ici on donne comme /tre à la fenêtre la chaîne de

© SUPINFO Interna/onal University – h8p://www.supinfo.com

c. Un premier code.

• Ce “while” signiﬁe que l’on répètera ce8e boucle tant que

c. Un premier code.

• Une seconde boucle permet de traiter la liste des

© SUPINFO Interna/onal University – h8p://www.supinfo.com

c. Un premier code.

• On teste si le “type” de l’événement est “QUIT”, ce qui

c. Un premier code.

• Ce8e commande permet d’aﬃcher à l’écran les

c. Un premier code.

• Avec évidemment une “boucle de jeu” plus étoﬀée.

© SUPINFO Interna/onal University – h8p://www.supinfo.com

d. Programme piloté par événements.

Fin du programme

© SUPINFO Interna/onal University – h8p://www.supinfo.com

d. Programme piloté par événements.

• Même si de l’interac/vité est possible, elle est à l’ini&a&ve

• C’est ce dernier qui impose en par/culier l’ordre des

© SUPINFO Interna/onal University – h8p://www.supinfo.com

• Ce8e fois-‐ci l’ordre des exécu/ons des fonc/onnalités est