TP 1:Animation avec Pygame

Bibliothèque graphique

Nous allons mettre au point un jeu en le programmant en Python

Quelle bibliothèque graphique utiliser? Python propose une bibliothèque pour le traitement des images (PIL pour Python Imaging Library) que l'on pourrait utiliser avec Tkinter, cependant il existe une autre solution plus simple la bibliothèque Pygame Voir ici (en français)

Voir ici (tutoriels en anglais))

Voir ici (conseils en anglais)

Au lycée on utilisera Pygame avec Python 3 sur des machines Windows 7, personnellement j'ai testé Pygame avec Python 2.7 avec Ubuntu 12.04 LTS. Il y a peut être des modifications à faire dans les fichiers .py à télécharger ci-dessous , par exemple remplacer une instruction comme print event par print(event)

Nous allons nous familiariser avec Pygame par une suite d'exercices de modification de code, nous entrerons progressivement dans les détails

Exemple 1:Dessiner un carré rouge dans une fenêtre

Pour commencer à se familiariser avec Pygame nous allons étudier un exemple statique où un carré rouge est dessiné dans une fenêtre graphique ayant un fond noir

Télécharger le code ici

Exécuter le

Exercice

  1. Changer la couleur du carré
  2. Changer la longueur du côté
  3. Dessiner un carré bleu de côté 100 au centre d'une fenêtre de taille 600 x 500

Exemple 2: Le carré rouge maintenant se déplace de la gauche vers la droite de la fenêtre

Télécharger le code ici

Exécuter le

Exercice

  1. Modifier pour que le carré se déplace de haut en bas
  2. Modifier pour que le carré se déplace de bas en haut
  3. A quels endroits du code faire des modifications pour que le défilement soit "plus rapide" ?
  4. Modifier le code de telle sorte qu'au début de l'exécution du programme le carré surgisse au milieu de la fenêtre mais se déplace dans une direction aléatoire
  5. A quoi servent les symboles % aux lignes 47 et 48 ?

Exemple 3: Une balle rouge se déplace et rebondit sur les bords de la fenêtre

Télécharger le code ici

Exécuter le

Manifestement ce programme ne marche pas !!!

Exercice

  1. Modifier le pour qu'il n'y ait plus de "traces" de la balle
  2. La balle ne rebondit pas bien. Utiliser les variables BORD_GAUCHE, BORD_DROIT, BORD_BAS et BORD_HAUT
  3. Assurez vous d'avoir bien compris la "logique du rebond" avec les vecteurs, dans la fonction mettreAJourCentre() sinon demander au prof!
  4. Commenter la ligne global centre,vecteur dans la fonction mettreAJourCentre() que se passe-t-il ?
  5. Compléter la fonction spawn() qui définit le "surgissement" de la balle" pour que celle-ci apparaisse toujours au centre de la fenêtre mais avec une direction aléatoire
  6. On veut augmenter encore la lisibilité de notre code en introduisant les fonctions toucheBordsLateraux() qui retourne vrai si la balle touche le bord droit ou gauche de la fenêtre et faux sinon (et toucheBordsTransversaux()) télécharger le code ici , compléter le et tester

Exemple 4: Un carré "réagit" aux flèches directionnelles

Nous allons utiliser la programmation évènementielle déjà vue avec TKinter

Un évènement "appui sur une touche" est géré et transformé en une instruction, par exemple l'appui sur la touche -> est traduit par le déplacement d'un cube vers la droite dans la fenêtre

Télécharger le code ici

Exécuter le

Exercice

  1. Observer dans le "terminal" ce qui se passe lorsque vous déplacez la souris dans la fenêtre ou lorsque vous appuyez sur une touche du clavier
  2. De quel type est l'appui d'une touche, le relâchement d'une touche , le clic droit, le clic gauche ? (à la place de print(event) mettre print(event.type) )
  3. Commenter la ligne print event.
  4. Modifier le programme de telle sorte que le relâchement d'une touche soit convertie en un freinage du cube.Il y a ici partie expérimentale . Utiliser la variable COEFF_FREINAGE, qui contiendra un nombre compris entre 0 et 1, et qui multiplié au vecteur translation "diminuera" les translations

Exemple 5: Afficher une image dans une fenêtre

Une difficulté supplémentaire apparaît, la gestion des images

D'abord nous allons apprendre à placer des images de manière statique dans une fenêtre

Il y a deux opérations

  1. L'image est chargée en mémoire vive à partir du disque dur, sous la forme d'une suite d'octets, repérée par une seule adresse mémoire
  2. Cette suite d'octets est incorporée à la fenêtre graphique à l'endroit voulu, puis la fenêtre graphique est mise à jour et on voit l'image dans la fenêtre

Télécharger l' image d'un ballon ici

et l'image d'une banane ici

Télécharger le code ici

Pour que le programme fonctionne les fichiers doivent être dans le même répertoire

Exécuter le

Exercice

  1. Droit des images: Peut on utiliser les images trouvées sur le Web n'importe comment ?
  2. Qu'observez vous ?Quelles sont les dimensions de ces images?
  3. Aller chercher dans la documentation de Pygame à quoi sert la fonction blit() ?Que signifie cet acronyme ?
  4. Faire afficher un ballon dans chaque coin de la fenêtre

Exemple 5_bis: Une balle (image) rebondit dans une fenêtre

Nous allons adapter l'animation de la balle rebondissante mais cette fois ci la balle est une image, le ballon de football précédent

Télécharger le code ici

Exercice

  1. Comparer les codes de animation3.py et animation5_bis.py
  2. Qu'observez vous ?

Exemple 7: Un exemple de sprite

Dans le jeu astéroids lorsque qu'on appuie sur la touche UP le vaisseau accélère et on voit à l'écran le temps de l'accélération l' image d'un vaisseau avec des flammes d'éjection de gaz. Lorsqu'il n' y a pas d'accélération il n' y a pas de flammes. Comment cette illusion est produite ?

On a deux images de vaisseau et suivant que l'on appuie ou pas sur la touche UP on affiche à l'écran une image ou l'autre

De même pour donner l'illusion d'une explosion on "passe" à l'écran une dizaine d'images rapidement pour créer l'illusion d'une explosion

Ci-dessous vous allez télécharger une image 3072 x 128 composée de 24 images 128x128 chacune représentant un état de l'explosion

Une telle image regroupant une succession d'états de même dimensions est appelé un sprite

Télécharger le sprite de l'explosion ici

Télécharger le fonds d'écran ici

Télécharger le code de l'explosion ici

Exercice

  1. Comment a été modifié la commande blit() pour n' incorporer qu'une partie du sprite à l'écran?
  2. Comprendre le programme de animation7.py