Un sprite, ou lutin, est dans le jeu vidéo un élément graphique qui peut se déplacer sur l'écran.
En principe, un sprite est en partie transparent (la partie transparente de l'image s'appelle le canal alpha),
et il peut être animé (en étant formé de plusieurs images qui s'affichent les uns après les autres).
Dans les jeux à 2 dimensions, le fond de l'écran constitue souvent le décor, et les sprites sont les personnages (et les objets), qui se déplacent en superposant au fond d'écran.
Le système des sprites a eu une importance telle dans la programmation de jeux vidéo qu'il faisait l'objet, autrefois, de circuits dédiés sur les consoles de jeux,
ainsi que sur certains ordinateurs.
Un sprite que vous connaissez déjà tous : le pointeur de la souris !
b) Alors on danse : faire défiler un gif.
Le format GIF permet de stocker plusieurs images dans un seul fichier. Ceci permet de créer des diaporamas, voire des animations,
si les images sont affichées à un rythme suffisamment soutenu (voir l'image en exemple ci-dessous).
tKinter ne sait pas afficher un gif composé de plusieurs images. Il nous faudra donc commencer par récupérer les différentes images de notre gif, pour ensuite les faire défiler successivement, donnant ainsi l'illusion du mouvement
On trouve de nombreux sites internet permettant d'extraire les différentes images du gif. par exemple : décomposer un gif.
L'idée sera maintenant la suivante : nous allons afficher successivement chacune des images du gif, en laissant des temporisations suffisantes entre chaque image, pour laisser le temps à l'utilisateur de voir chaque image.
Nous commencerons par créer la liste des images du gif.
L'idée la plus naturelle serait alors d'utiliser une boucle for pour parcourir cette liste et afficher les images une à une, MAIS :
Il est impossible d'afficher successivement les images d'une liste avec une boucle for ou while :
la boucle mainloop serait alors suspendue pendant la durée de la boucle for,
ne permettant alors plus au réceptionnaire de récupérer les événements, tel que l'affichage d'une nouvelle image, et de mettre à jour les affichages graphiques.
Le seul mode de temporisation possible est la méthode after, qui va laisser la boucle mainloop poursuivre son travail, en attendant, x millisconde plus tard, de déclencher à nouveau la fonction.
Pas de temporisation possible non plus avec sleep (qui suspendrait la boucle mainloop aussi).
Une technique plus élaborée, mais nettement plus compliquée, consisterait à faire de la programmation parallèle avec du multi-threading (nettement plus technique).
Nous allons donc utiliser une fonction récursive et la méthode after pour faire défiler nos images.
Exercice 1 :
Créer une fenêtre tkinter avec un canevas et un bouton "Go !".
A chaque fois que l'utilisateur appuiera sur "Go !", le programme fera défiler, une à une, toutes les images du gif affiché ci-dessus.
Quelques indications :
récupérer le gif ci-dessus : clic-droit sur l'image, enregistrer sous.
afin de pouvoir facilement placer toutes les images dans une "listeImage" à l'aide d'une boucle for :
renommer les frames 01 à 09 sous la forme : frame-1.gif à frame-9.gif ... pas de 0 devant le chiffre !
Pourquoi 5 et pas 05 ? je vous propose d'y réfléchir plus tard, une fois le programme réalisé...
créer un compteur d'images, pour savoir à quelle image nous en sommes, à chaque nouvel affichage.
créer une fonction "dance" qui :
affichera la nouvelle image (on prendra le soin ici de mettre un tag pour pouvoir effacer l'image plus tard),
mettra à jour la valeur de frame,
si frame <= 40 : se ré-appellera pour l'affichage suivant,
sinon : efface les images, et remet frame à zéro pour les animations suivantes.
c) L'opérateur modulo.
Nous disposons déjà en python des opérateurs d'addition (+), de multiplication (*) ... ajoutons maintenant l'opérateur modulo.
Il existe une infinité de nombres entiers naturels : 0, 1, 2, 3 ... . En mathématiques et en informatique, il sera souvent utile de travailler dans des
structures ne contenant, par exemple, que 10 entiers : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9.
Après, on considérera que : 10, c'est 0; 11, c'est 1; 12, c'est 2 ...
Absurde, n'est-ce pas ? Et bien pas du tout; et pire encore : vous comptez déjà modulo 24 depuis la petite enfance !
En effet, pour les heures, nous ne numérotons les heures que de 0 à 23, et revenons à 0 toutes les 24 heures.
Nous comptons donc modulo 24 : au bout de 24h, il est 0h; au bout de 26h, il est 2h; ... ; au bout de 48h, il est 0h...
En python, l'opérateur modulo sera noté : %.
Exemples :
0 % 2 = 0 1 % 2 = 1 2 % 2 = 2
3 % 2 = ? 4 % 2 = ? 5 % 2 = ? 6 % 2 = ?
Remarque :
pour ceux qui ont vu la division euclidienne au collège, a%b n'est autre que le reste de la division euclidienne de a par b.
2. Qu'affiche le programme suivant lorsqu'on l'exécute :
for i in range(65) :
print(i%13)
3. Ecrire un programme qui affichera les 18 entiers de 0 à 17, 2 fois de suite.
d) Applications en informatique.
Elles sont très nombreuses et nous contenterons ici de citer 2 exemples :
Application 1 : quand la droite devient un cercle, et le plan un tore !
on souhaite faire défiler un objet animé entre un nombre fini de positions, puis, lorsqu'il sort de la fenêtre, le faire revenir à la position de départ, et lui faire reprendre
son défilé, créant ainsi une animation infinie.
Exercice 3 :
Reprendre l'exercice 10 du chapitre 8, et faire en sorte que : lorsque le carré sort de la fenêtre, il ré-apparaisse tout en haut de la fenêtre pour se remettre à descendre ... et ainsi de suite indéfiniment :
Questions :
Aux vues de cet exercice, quelle est la droite qui "devient" un cercle ?
Chercher sur internet ce qu'est un tore, et tenter d'imaginer en quoi l'opérateur modulo permet d'associer un tore à un plan.
Application 2 : Faire bouger et défiler l'image en même temps.
Attention : cette seconde application permettra de rendre certains projets nettement plus élégants et réalistes, mais aussi : plus techniques !
On ne se lancera là-dedans que si l'on se sent très à l'aise, et qu'on est en avance sur le projet.
Pour créer des dépalcements plus réalistes de nos personnages, nous souhaiterions changer d'image à chaque déplacement du personnage :
déplacement basique d'une image :
déplacement avec changement d'image :
Exercice 4 :
Nous souhaitons dans cet exercice obtenir une fenêtre où nous déplacerons notre personnage "Matt" à l'aide
des flèches droite et gauche du clavier.
En outre, lorsque Matt sortira de la fenêtre par l'un des côtés, il poursuivra son chemin de l'autre côté :
On pourra pour cela :
commencer par créer une fenêtre munie d'un canevas 800x250,
créer une liste "listeIm" où nous stockerons les 6 images,
initialiser 2 variables :
frame : qui sert à noter l'image de la liste actuellement affichée,
pos : qui contient l'abscisse de l'image affichée,
lors de l'appui sur une flèche, la fonction gestionnaire :
mettra à jour frame : +1 ou -1 selon la flèche, suivi d'un modulo bien choisi,
mettra à jour pos : +40 ou -40 selon la flèche, suivi d'un modulo bien choisi,
effacera l'image dans le canevas : can.delete(matt), si matt est le nom de l'item image,
et affichera la nouvelle image, à sa nouvelle position : à l'aide listeIm et listePos.
Les images : télécharger et décompresser ce dossier.
