Accueil | Tutoriaux

Tutoriaux : simuler la gravité
 

1. Introduction

Vous êtes nombreux à me poser des questions sur la gravité et bien souvent vos difficultés proviennent de la confusion entre les notions de force, de vitesse et d'accélération.Si vous connaissez bien ces différentes notions, la programmation de la chute d'un corps deviendra très facile. Quelques rappels sommaires : la vitesse est la variation de la position tandis que l'accélération est la variation de la vitesse ! Lorsqu' un corps tombe, sa vitesse est uniformément accélérée, autrement dit sa vitesse augmente "régulièrement".

Dans l'animation ci-contre g représente la constante de gravitation. Vous pouvez faire varier cette constante à l'aide de la glissière et observer le déplacement des 20 particules grises.

Plus la valeur de g est grande, plus l'accélération des particules est grande.
2. Dans la bibliothèque et sur la scène
 

0) Dans le panneau propriétés du document, définissez les dimensions de l'animation : largeur et hauteur valent respectivement 100 et 300 pixels. Prenez une cadence de 20 images par seconde.

1) Dans la bibliothèque de l'animation, créez un clip simple : par exemple un disque gris de 20 pixels de diamètre, centré verticalement et horizontalement.

2) Placez une occurrence de ce clip n'importe où sur la scène principale. Dans le panneau propriétés, nommez cette occurrence "balle".
 
3. Le code et l'animation
 

Dans le panneau action de l'image n°1 de la scène principale, placez le code suivant :
  
ymin = -10;
ymax = 310;
 
vitesse = 0;
gravite = 0.5;
 
balle._x = 50;
balle._y = ymin;
 
onEnterFrame = function () {
 
vitesse += gravite;
balle._y += vitesse;
 
if (balle._y>ymax) {
balle._y = ymin;
vitesse = 0;
}
 
}
 
4. Le code avec ses commentaires
 
Dans un premier temps nous définissons deux constantes ymin et ymax qui représentent respectivement l'ordonnée minimale et maximale de l'occurrence "balle". ymin étant négative, le début de la trajectoire de la balle sera en dehors de la scène et de même pour la fin de la trajectoire puisque ymax est supérieure à la hauteur de notre animation.
ymin = -10;
ymax = 310;
 
Nous définissons deux variables "vitesse" et "gravite". La première est initialisée à zéro et sa valeur sera modifiée au cours de l'animation tandis que le paramètre "gravite" gardera une valeur constante au cours de l'animation. En fait cette deuxième constante représente l'accélération du clip "balle", c'est à dire la variation de la vitesse entre deux images.
 
vitesse = 0;
gravite = 0.5;
 
On définit ensuite l'abscisse et l'ordonnée de l'occurrence "balle" que nous avons placée manuellement un peu au hasard sur la scène... Cette occurrence est centrée horizontalement par rapport à la scène et placée au dessus du haut de l'animation (donc l'occurrence " balle" est invisible au début de l'animation).
balle._x = 50;
balle._y = ymin;
 
Nous créons une fonction qui sera exécutée à chaque image de notre animation.
onEnterFrame = function () {
 
Une des lignes à bien comprendre : à chaque image on ajoute la valeur de la constante "gravite" à celle de la variable "vitesse". Autrement dit, à chaque image, la vitesse augmente...
vitesse += gravite;
 
Comme je l'ai écrit en introduction, la vitesse est la variation de la position. Le mouvement de la balle étant vertical, on ajoute à l'ordonnée de l'occurrence "balle" la valeur de la vitesse pour obtenir la nouvelle ordonnée. Cette ligne de code équivaut à :
balle._y = balle._y + vitesse;
balle._y += vitesse;
 
Si l'ordonnée de l'occurrence "balle" est supérieure à ymax (c'est à dire si la balle sort de la scène), alors nous replaçons la balle en haut de la scène et nous lui redonnons une vitesse nulle.
if (balle._y>ymax) {
balle._y = ymin;
vitesse = 0;
}
 
Fin de la fonction onEnterFrame
}
 
5. Pour aller plus loin
 
En modifiant le code précédent, on pourrait faire rebondir la balle contre le bas de l'animation, puis ajouter des forces de frottement afin que la balle finisse par s'immobiliser... Tout cela est possible, il faut juste comprendre ce qui se passe en termes de vitesse et d'accélération ! Je vous laisse réfléchir en attendant la parution sur zoneflash d'un tutoriel sur les rebonds { := )
 
Accueil | Tutoriaux