Ce tutorial explique les principes de calcul élémentaires qui permettent de représenter des figures géométriques dans le repère de Flash. Tout au long du tutorial, nous appliquerons ces principes pour détecter la collision avec le pointeur de souris.

source : geometrie.zip

Prérequis

Quelques notions de géométrie et d'ActionScript basiques.

Pourquoi la géométrie?

La géométrie est la partie des mathématiques qui traite des figures dans un plan. Actionscript nous donne les moyens d'en appliquer les fonctions majeures. Les utilisations sont variées, que ce soit comme ici pour détecter la position de la souris, ou pour des détections de collisions plus complexes, comme pour un jeu de billard par exemple.

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.

Les Droites

Dans un repère cartésien, la droite est la figure la plus simple à assimiler. Une droite a pour équation : y = ax + b

a est appellé coefficient directeur ou pente, et détermine l'inclinaison d'une droite.

horizontale

Nous allons commencer par le cas le plus simple, c'est à dire une droite dont la pente est nulle (c'est à dire qu'elle n'est pas inclinée, elle est horizontale). Au niveau de l'équation, nous n'aurons qu'une valeur en y, constante. Le résultat est le suivant :

L'équation de la droite est simple à calculer. Elle n'a pas d'inclinaison, donc a = 0, et on voit que sa valeur en y est constante, et égale à 100. Pour détecter si la souris est au dessus ou en dessous de cette droite, il suffit de savoir si la coordonnée y du pointeur de souris (_ymouse en ActionScript) est supérieure ou inférieure à la droite.

Pour que la détection de la position de la souris soit quasi-permanente, je vais l'inclure dans l'événement onEnterFrame. Il s'agit d'un événement invoqué à la cadence du fichier SWF.

Pour afficher le résultat de façon simple, j'ai crée une zone de texte dynamique appellée "resultat_txt" dans lequel je vais afficher le message approprié.

Le code est donc le suivant :

this.onEnterFrame = function() {
if (_ymouse<100) {
resultat_txt.text = "Le pointeur est dans la zone";
} else {
resultat_txt.text = "Le pointeur n'est pas dans la zone";
}
}

verticale

Ce cas est aussi très simple. Dans ce cas, la pente de la droite est égale à 1. Au niveau de l'équation, nous n'aurons qu'une valeur en x, constante : la droite est verticale. Voici le résultat :

Le principe est exactement le même que précédemment, avec cette fois ci la valeur en x du curseur de la souris : _xmouse. Le code est le suivant :

this.onEnterFrame = function() {
if (_xmouse<200) {
resultat_txt.text = "Le pointeur est dans la zone";
} else {
resultat_txt.text = "Le pointeur n'est dans la zone";
}
}

Rectangle

Pour un rectangle, il suffit de joindre les deux exemples précédents. Ce qui donne :

Avec le code :

this.onEnterFrame = function() {
if (_xmouse<200 && _ymouse>100) {
resultat_txt.text = "Le pointeur est dans la zone";
} else {
resultat_txt.text = "Le pointeur n'est pas dans la zone";
}
}

Droites non particulières

Nous allons à présent étudier le cas de droite ni verticales ni horizontales. Partons de l'exemple suivant :

Il faut commencer par détermnier l'équation de la droite, c'est à dire déterminer a et b dans y = ax + b

Pour ce faire, il faut connaître deux points appartenant à la droite. Nous utiliserons les points A(100,200) et B(300,100) de la figure. Dans la pratique, il vous suffit d'utiliser les règles (CTRL+MAJ+ALT+R sous PC) et les guides de Flash. Pour faire apparaître un guide, il faut à l'aide de l'outil Sélection, cliquer à n'importe quel endroit sur la règle et faites glisser le guide vers l'endroit désiré sur la scène. A l'aide d'un guide vertical et d'un guide horizontal, il est facile de déterminer les coordonnées d'un point.

Calcul de a :

a = (yB-yA)/(xB-xA) où yB et yA sont les coordonnées en y des points B et A, de même pour xA et xB.

Ce qui nous donne dans cet exemple : a = (100-200)/(300-100) = -100/200 = -0.5

Calcul de b :

b est la valeur de la droite lorsque x=0. C'est à dire la valeur de y quand la droite coupe l'axe des ordonnées. Dans notre exemple, la droite coupe l'axe y à la valeur 250. Donc b = 250.

L'équation de notre droite est donc : y = -0.5x + 250

Il suffit ensuite d'utiliser le même code que précédemment, en remplacant x et y dans l'équation par les coordonnées de la souris _xmouse et _ymouse. Ce qui donne :

this.onEnterFrame = function() {
if (_ymouse<-0.5*_xmouse+250) {
resultat_txt.text = "Le pointeur est dans la zone";
} else {
resultat_txt.text = "Le pointeur n'est pas dans la zone";
}
};

De même que précédemment, il est possible de joindre plusieurs équations de droite dans la condition if pour déterminer la collision avec un rectangle incliné.

Cercles

L'équation d'un cercle dans le repère cartésien de Flash est plus complexe. Elle est de la forme : r² = (x-a)²+(y-b)². Aïe me direz vous, je vous répondrais qu'il est bien plus simple ici de déterminer les inconnues a,b et r. En effet, a et b sont les coordonnées x et y du centre du cercle, et r la valeur de son rayon.

Appliquons cette jolie formule :

Le problème ici est de déterminer l'équation du cercle. Une fois encore, utilisons les guides, avec une petite astuce pour trouver le centre : utiliser l'outil transformation de flash, qui nous marque le centre d'un point blanc. Reste à y appliquer les guides, et voila le travail :

Le cercle de l'exemple a donc un centre de coordonnées x = 200 et y = 100. Pour trouver le rayon, il suffit de faire la différence entre la coordonnée x du point le plus à droite du cercle avec la coordonnée x du centre. Ici, nous avons : r = 300-200 = 100.

L'équation du cercle est donc : 100² = (x-200)²+(y-100)², soit 10000 = (x-200)²+(y-100)²

Mon curseur de souris est en collision avec le cercle si sa distance par rapport au centre du cercle est inférieure au rayon de celui-ci.

Ce qui nous donne :

differenceX = a - _xmouse //où a est la coordonnée en x du centre du cercle
differenceY = b - _ymouse //où b est la coordonnée en y du centre du cercle
distance = Math.sqrt(differenceX*differenceX+differenceY*differenceY); // Math.sqrt est la fonction actionscript pour la racine carrée

Si distance < r, la souris est dans le cercle.

Soit pour notre exemple le code suivant :

this.onEnterFrame = function() {
differenceX = 200-_xmouse;
differenceY = 100-_ymouse;
distance = Math.sqrt(differenceX*differenceX+differenceY*differenceY);
if (distance>100) {
resultat_txt.text = "Le pointeur n'est pas dans la zone";
} else {
resultat_txt.text = "Le pointeur est dans la zone";
}
};

Autres figures

Il existe un grand nombre d'équations de courbes, formes géométriques particulières (comme l'ellipse par exemple) qui peuvent être utilisées avec ActionScript de la même façon que pour les exemples précédents. A vous dans ce cas de trouver ces équations en vous documentant, le plus dur étant ensuite de déterminer les valeurs des différents coefficients en fonction de la figure que vous aurez tracée. Pensez aux règles et guides de Flash, il s'agit ici d'un outil précieux.

source : geometrie.zip

Conclusion

J'espère que ça aura pu être utile à certains, donné des idées à d'autres. Les applications sont très variées, il s'agit ici d'une base à laquelle il faut parfois associer la trigonométrie, l'API de dessin et la physique pour permettre à l'internaute toujours plus d'interactions !