PyPhyPC

Animations - Principes

L’animation d’un objet ou d’une image ne requiert pas d’instructions Tkinter supplémentaires, l’animation est construite à l’aide des commandes présentées dans les pages précédentes.

Pour animer un objet, il faut le déplacer (méthodes move() ou coords()), par étapes, de son point de départ à son point d’arrivée.
On pense naturellement à une boucle. Cette technique est décevante dans le cas d’un jeu : le programme ne tient compte d’aucune action extérieure (clic souris, clavier…) tant que la boucle n’est pas terminée (car les instructions sont effectuées séquentiellement, les unes après les autres). En conséquence, le programme n’est guère interactif.

Pour contourner cette difficulté, on a recours à des fonctions dites récursives (programme de seconde année). Ce sont des fonctions qui s’appellent elles-mêmes.
Une telle fonction doit impérativement posséder un test d’arrêt sous peine d’entrer dans une série infinie d’appels (sauf animation "infinie" terminée par fermeture de la fenêtre).
Ces fonctions se comportent comme de petits programmes indépendants qui, en quelque sorte, vivent leur vie pendant que le reste du programme continue à s’exécuter.

Réaliser l'animation d'un tir dans le champ de pesanteur.
Rappeler les lois horaires x et y en fonction de la position initiale (xo, yo), de la vitesse initiale (vox, voy), de l'accélération de la pesanteur g et du temps t.
On pourra utiliser une variable temporelle t incrémentée avec un pas dt.

import tkinter as tk
from tkinter import ttk

def tir():
	global xo, yo, t, dt, r, vox, voy, g, dessin, oval, jeu
	t += dt/1000    # Conversion en s
	x, y = xo+vox*t, yo+voy*t+1/2*g*t**2
	if 0<x<xmax and 0<y<ymax:
		dessin.coords(oval,x,y,x+d,y+d)
		jeu.after(6, tir)

# Paramétrage
H, L = 300, 300         # Taille canevas
d = 10                  # Diamètre du projectile
xo, yo = 10, 280        # Position initiale (1 px = 1 m)
t, dt = 0, 10           # Temps et pas temporel en ms
xmax, ymax = L-d, H-d   # Valeur max des coordonnées
vox, voy = 15, -70     # Coordonnées vitesse initiale
g = 10                  # Accélération pesanteur

jeu = tk.Tk()

dessin = tk.Canvas(jeu,bg='dark grey',height=H, width=L)
dessin.pack(side='left', padx =5, pady =5)
oval = dessin.create_oval(xo, yo, xo+d, yo+d, width=2, fill='red')

boutQ = ttk.Button(jeu,text='Quitter', width=8, command=jeu.destroy)
boutQ.pack(side='bottom',padx =5, pady =5)
boutD = ttk.Button(jeu, text='Démarrer', width=8, command=tir)
boutD.pack(padx =5, pady =5)

jeu.mainloop()

❮ ❯

Code

import tkinter as tk
from tkinter import ttk	

def deplaceDisque():
	global x, y, dx, dy, dessin, jeu
	x, y = x+dx, y+dy   # Incrémentation des coordonnées
	if x<xf and y<yf:   # Test d'arrêt : point d'arrivée atteint ?
		dessin.coords(oval,x,y,x+d,y+d)     # Déplacement du disque
		jeu.after(50,deplaceDisque)			# Attendre 50 ms et recommencer

# Variables globales - Paramétrage du jeu
H, L = 250, 250         # Taille canevas
x, y = 10, 10           # coordonnées initiales du disque
d = 30					# Diamètre du disque 
dx, dy = 15, 15         # Pas du déplacement du disque
xf, yf = 210, 210       # coordonnées finales du disque

jeu = tk.Tk()

dessin = tk.Canvas(jeu,bg='dark grey',height=H, width=L)
dessin.pack(side='left', padx =5, pady =5)

oval = dessin.create_oval(x, y, x+d, y+d, width=2, fill='red')

boutQ = ttk.Button(jeu,text='Quitter', width =8, command=jeu.destroy)
boutQ.pack(side='bottom',padx =5, pady =5)
boutD = ttk.Button(jeu, text='Démarrer', width =8, command=deplaceDisque)
boutD.pack(padx =5, pady =5)

jeu.mainloop()

Commentaires

La ligne essentielle est jeu.after(50, deplaceDisque) : la fonction deplaceDisque est récursive, elle s'appelle elle-même.
L'animation est réalisée par la fonction deplaceDisque qui modifie les coordonnées du disque et qui s'appelle elle-même pour recommencer le même travail (après un délai exprimé en millisecondes qui règle la vitesse de l'animation) jusqu'à ce que le point final soit atteint.

En ajustant le pas spatial du déplacement ainsi que le pas temporel (délai), on rend l'animation plus ou moins grossière et plus ou moins fluide.

Pour des animations "infinies" dans le temps, voir page suivante.

Remarque : les "coordonnées initiales du disque" (ligne 12 ci-dessus) sont en réalité les coordonnées du coin supérieur gauche du carré dans lequel le cercle est inscrit.

Organisation du code et commentaires

Points essentiels :

Organisation du code : un paramétrage rigoureux et centralisé (toutes les variables sont regroupées) permet de modifier très rapidement et très simplement les caractéristiques visuelles ou le "comportement" du jeu.
Commentaires : chaque variable doit être assortie d'un commentaire explicitant sa signification, de même pour les fonctions dont l'interprétation n'est pas immédiate à l'aide du seul nom.

Ressources :

Site ISN

Gérard Swinnen « Apprendre à programmer avec Python 3 »

❮ ❯