Ce tutorial rappelle les bases des mathématiques et les fonctions Actionscript associées, base des calculs de mouvements et de trajectoires.

Prérequis

Quelques notions de mathématiques et d’Actionscript basiques.

Pourquoi la trigonométrie?

La trigonométrie est la partie des mathématiques qui traite des rapports de distances et d’angles dans les triangles. Actionscript nous donne les moyens d’en appliquer les fonctions majeures. Les enjeus sont énormes : bouger des objets, analyser des positions de souris, déterminer des trajectoires, des collisions, etc… On ne peut y échapper par exemple pour la conception d’un jeu sous flash.

Les bases

Les coordonnées utilisés dans Flash sont les coordonnées cartésiennes. Chaque point peut être situé grâce à deux uniques informations : sa projection sur l’axe des abscisses (x) et sa projection sur l’axe des ordonnées (y). Nous avons ainsi :

Le point A a pour coordonnées : x = 4 et y = 2. Nous noterons A(4,2).

Notons au passage que l’axe des ordonnées Y dans Flash est positif dans le sens inverse du repère étudié d’habitude à l’école par exemple… L’origine (registration point) est donc situé en haut à gauche du document, ce qui se vérifie lorsque l’on demande l’affichage des repères (CTRL+MAJ+ALT+R sous PC)
Pourquoi inverser cet axe Y? Tout simplement parce que lorsque vous redimmensionnez votre fenêtre, ce point reste fixe, le reste augmente ou diminue. Si l’origine était située ailleurs, il faudrait changer les coordonnées des éléments à chaque redimmensionnement de la fenêtre.

Un second point à souligner est le fait que chaque movie clip possède son propre système de coordonnées.

Notions de trigonométrie

Radians et degrés

Il existe plusieurs systèmes de représentation des angles. L’unité que vous connaissez probablement est le degré. Pour les besoins de flash, il vous faudra souvent utiliser le radian, basé sur le nombre pi (Math.PI en actionscript). Pour faire un tour sur vous même, vous effectuez une rotation de 360°, ce qui correspond à 2*pi radians. Nous aurons donc souvent besoin de tranformer des radians en degrés, et vice versa, grâce aux formules suivantes :

AngleEnRadians = AngleEnDegrés * Math.PI/180
AngleEnDegrés  = AngleEnRadians * 180/Math.PI

Fonctions usuelles

Les fonctions dont nous aurons besoin sont le sinus, le cosinus et la tangeante. Considérons le triangle suivant :

Nous avons un triangle composé de trois points A, B et C. La distance entre A et B est 4px, entre B et C, 3px et entre A et C, 5px. L’angle B est un angle droit (90°). Le côté AC est le côté opposé à l’angle droit, on dit qu’il s’agit de l’hypothénuse. Il vérifie le théorème de Pythagore, c’est à dire que si l’on élève l’hypothénuse au carré (on la multiplie par elle même, ou bien Math.pow(x,2) en Actionscript), elle est égale à la somme des carrés des deux autres côtés. Math.pow(5,2) est bien égal à Math.pow(4,2) + Math.pow(3,2), c’est à dire 25.

Nous allons étudier l’angle µ, associé au sommet A. Il respecte les lois suivantes :

• Le sinus (Math.sin() en Actionscript) est égal au quotient du côté opposé sur l’hypothénuse. Math.sin(µ) = BC/AC = 3/5.
• Le cosinus (Math.cos() en Actionscript) est égal au quotient du côté adjacent sur l’hypothénuse. Math.cos(µ) = AB/AC = 4/5.
• La tangeante (Math.tan() en Actionscript) est égal au quotient du côté opposé sur le côté adjacent. Math.tan(µ) = BC/AB = 3/4.

Quelques notions nous manquent à ce stade pour pouvoir calculer la valeur de l’angle µ. Il s’agit des fonctions inverses. En Actionscript, ce sont :

• Le sinus inverse : Math.asin(). Nous avons µ = Math.asin(BC/AC) = Math.asin(3/5).
• Le cosinus inverse : Math.acos(). µ = Math.acos(AB/AC) = Math.acos(4/5).
• La tangeante inverse : Math.atan(). µ = Math.atan(BC/AB) = Math.atan(3/4).

Attention ! Tous les angles utilisés ci-dessus doivent être exprimés en radians. Pour avoir µ en degré, il faudrait faire : µ = Math.asin(3/5)*180/Math.PI. Un petit test avec Flash : trace(Math.asin(3/5)*180/Math.PI) nous donne : 36,8°. Voila pour les bases…

Une application

A quoi tout cela va il bien nous servir? Besoin d’un exemple? Nous y voilà….

J’ai dessiné un joli vaisseau (MovieClip nommé « vaisseau_mc »), je veux le faire bouger. (fichier vaisseau1.fla) Son origine (coin supérieur gauche) est au départ placé au point de coordonnées (100, 100). Je veux le faire se déplacer au point de coordonnées (350,250).

Nous pourrions tout simplement faire vaisseau_mc._x = 350 et vaisseau_mc._y = 250. Si vous testez, vous ne verrez pas le vaisseau bouger, vous le verrez directement à sa position finale. Il faut que le vaisseau se déplace progressivement. Pour ce faire, nous allons utiliser onEnterFrame. Il s’agit d’un événement invoqué à la cadence du fichier SWF. Nous allons donc à chaque fois que cet événement est levé faire avancer notre vaisseau de quelques pixels. Nous allons donc avant toute chose fixer le nombre de pixels de déplacement élémentaire en x et en y; ici 3 et 2 :

deplacement_ele_x = 3;
deplacement_ele_y = 2;

il faut ensuite définir la fonction associée à l’événement onEnterFrame, qui va faire avancer le vaisseau (vaisseau_mc) en x et en y seulement si nous n’avons pas encore atteinds le point d’arrivée (350,250). Ce qui donne :

1
2
3
4
5
6
7
8
9
10
11
12

this.onEnterFrame = function() {
if (vaisseau_mc._x<=350) {
vaisseau_mc._x += deplacement_ele_x;
} else {
deplacement_ele_x = 0;
}
if (vaisseau_mc._y<=250) {
vaisseau_mc._y += deplacement_ele_y;
} else {
deplacement_ele_y = 0;
}
};

Le test nous donne :

Et la trigonométrie dans tout ça me direz vous? Nous y voilà. Le vaisseau bouge bien, mais le mouvement n’est pas réaliste, car il ne s’oriente pas dans le sens du mouvement. Il va falloir jouer sur sa propriété _rotation en fonction du déplacement. Le calcul qui permet de donner l’angle en fonction du déplacement élémentaire est celui utilisé pour calculer la tangeante, décrit plus haut :

Nous avons Math.tan(µ) = deplacement_ele_y/deplacement_ele_x, c’est à dire µ = Math.atan(deplacement_ele_y/deplacement_ele_x), ce qui donne en degrés :

µ = Math.atan(deplacement_ele_y/deplacement_ele_x)*180/Math.PI;

Il existe une fonction actionscript spéciale pour le calcul de atan(y/x) :  atan2(y,x), ce qui donne :

µ = Math.atan2(deplacement_ele_y,deplacement_ele_x)*180/Math.PI;
vaisseau_mc._rotation = µ;

Modifions la fonction onEnterFrame :

1
2
3
4
5
6
7
8
9
10
11
12
13
14

this.onEnterFrame = function() {
if (vaisseau_mc._x<=350) {
vaisseau_mc._x += deplacement_ele_x;
} else {
deplacement_ele_x = 0;
}
if (vaisseau_mc._y<=250) {
vaisseau_mc._y += deplacement_ele_y;
} else {
deplacement_ele_y = 0;
}
µ = Math.atan2(deplacement_ele_y, deplacement_ele_x)*180/Math.PI;
vaisseau_mc._rotation = µ;
};

pour le résultat suivant :

Conclusion

J’espère que ça vous aura donné des idées sans être trop pénible à lire. En creusant un peu, les possibilités sont vastes, surtout en couplant ces fonctions mathématiques à des équations physiques.

Télécharger sources.zip