explainMe

Introduction |

Dans flash il peut être parfois utile de tester les collisions, si par exemple vous souhaitez effectuer une action lorsqu’un clip est par-dessus un autre ou bien pour contraindre un clip en mouvement a l’intérieur d’un autre, etc, etc…

Dans un premier temps nous allons voir la fonction hitTest(); en AS2, puis nous étudierons le fonctionnement de sa sœur jumelle en AS3 : hitTestObject(); dans un prochain cours.

1 – Déclenchement d’une action lorsque 2 clips entrent en collisions |

Nous allons créer 3 clips :

1. Un clip BALLE
2. Un clip MUR
3. Un clip EXPLOSION

Le principe est que la balle va avancer vers le mur et dès qu’elle rentrera en contact avec lui, elle s’arrêtera, et une explosion apparaîtra pour symboliser l’impact.

Pour créer le clip BALLE, créer un cercle (de diamètre 40 px, a régler dans le panneau Propriétés), puis faites [F8], choisissez Clip, nommez le BALLE puis placer le point de référence au centre de l’objet (pour afficher l’option il vous faudra peut-être cliquer sur Avancé). Dans le panneau de propriétés donner lui le nom d’occurrence balle (servira pour l’AS). Pour créer le clip MUR faites la même manipulation mais ce coup-ci dessinez un rectangle vertical auquel vous donnerez comme nom d’occurrence mur. Idem pour l’explosion, dessinez une étoile et donner lui le nom d’occurrence explosion.

Un nom d’occurrence ne doit contenir ni accents (ou caractères spéciaux), ni d’espaces.

Positionnez les différents clips sur la scène :

• La balle sur la gauche, centrée en hauteur.
• Le mur sur la droite.
• L’explosion sur la droite, par-dessus le mur, à la même hauteur que la balle.

Placez vous sur le calque réservé au code et saisissez le code suivant :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

//
//--- On rend le clip explosion invisible ---
//
this.explosion._visible = false;
//
//--- On lance la balle vers la droite ---
//
this.balle.onEnterFrame = function() {
	this._x += 20;
};
//
//--- On test si la balle touche le mur
//
this.mur.onEnterFrame = function() {
	//--- Si la balle touche le mur ---
	if (this.hitTest(balle) == true) {
		//--- On arrête son mouvement ---
		delete balle.onEnterFrame;
		//--- On affiche le clip explosion ---
		explosion._visible = true;
	}
};

Ce qui devrait vous donner quelque chose dans ce style :

Notez que dans mon exemple ci-dessus, j’ai rajouté un bouton replay ainsi que le code qui va avec, cependant il n’est pas présent dans le code que je vous donne afin que vous puissiez vous concentrer sur le hitTest.

Ensuite, pour donner un mouvement à la balle de façon continue, j’utilise ici la propriété onEnterFrame du clip balle, ce qui permet d’effectuer l’action en boucle.

L’action étant donc que le clip balle se déplace de 20px vers la droite (en positif sur l’axe des X), de façon continue.

Et nous voici donc arrivé au fameux test de collision. De la même manière que pour le mouvement de la balle, nous avons besoin que le test soit effectué en boucle (car nous ne savons pas quand interviendra la collision).

C’est pourquoi j’ai une nouvelle fois utilisé l’événement onEnterFrame, mais du clip mur ce coup-ci.

Pourquoi du clip mur et pas du clip balle ?

Parce que je trouve ça plus clair : le clip balle s’occupe de son mouvement, et le clip mur test si la balle le touche.
Sachez cependant que nous aurions très bien pu effectuer le test dans le onEnterFrame de la balle, ça n’a aucune importance. De plus si un jour vous souhaitez utiliser le hitTest dans le développement d’un jeu de course, vous verrez qu’il y a déjà suffisamment d’actions à faire exécuter à la voiture, donc autant faire tester la sortie de piste par la piste elle-même.

Le test :

le hitTest est un booléen, c’est-à-dire qu’il est soit vrai (true), soit faux(false), donc ici pour bien expliquer j’ai rédigé le test comme suit :

if (this.hitTest(balle) == true) {
//— Actions —
}

//— Si la balle touche le mur —
if (this.hitTest(balle)) {
//— Actions —
}

Qui est l’écriture « raccourcie » en quelques sortes.

Notez que l’inverse :

if (this.hitTest(balle) == false) {
//— Actions —
}

Donnera l’écriture raccourcie suivante :

if (!this.hitTest(balle)) {
//— Actions —
}

Notez l’ajout du ! devant this.hitTest(balle), qui signifie que le hitTest n’existe pas (s’il existe : true / s’il n’existe pas : false).
Le hitTest s’écrit donc de la manière suivante :

monClip.hitTest(autreClip);

Les actions à effectuer si le test réussi :

//— On arrête son mouvement —
delete balle.onEnterFrame;

//— On affiche le clip explosion —
explosion._visible = true;

2 – Contraindre un clip à l’intérieur d’un autre |

Nous avons vu que le hitTest était un booléen, donc il est soit vrai, soit faux. De ce fait, nous pouvons définir des actions lorsqu‘il devint vrai (lorsqu’il y a collision ou superposition), ou bien définir qu’une action est toujours vraie tant qu‘il y a collision (et là les amateurs de voiturettes commence à me voir venir…).

Bon on va être clair je ne vais pas vous présenter le code d’un jeu de circuit de course (Il y a beaucoup trop d’autres paramètres que le hitTest et ce n’est pas le sujet du cours). Par contre que diriez-vous si nous faisions se déplacer une balle, à l’intérieur d’un conteneur ?

Nous allons donc créer 2 clips :

1. BALLE (cercle de 80 px de diamètre avec le point de référence placé en son centre, nom d’occurrence balle)
2. CONTENEUR (un cercle de 300px de diamètre, peut importe le point de référence, nom d’occurrence conteneur)

Et voici le code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

//
//
//--- Initialisation des variables ---
//
var coefX:Number = 15;
var coefY:Number = 0;
//
//--- Lancement des actions ---
//
this.balle.onEnterFrame = function() {
	deplaceBalle();
};
//
//--- Fonction qui déplace la balle en fonction du coefficient ---
//
function deplaceBalle() {
	balle._x += coefX;
	balle._y += coefY;
}
//
//--- Fonction qui test les collisions en la balle et le carre ---
//
this.conteneur.onEnterFrame = function() {
	//-- Collision sur la droite et/ou en bas ---
	if (this.hitTest(balle._x+40, balle._y+40, true) == false) {
		coefX = -chiffreAleatoire();
		coefY = -chiffreAleatoire();
	}
	//-- Collision sur la gauche et/ou en bas ---
	if (this.hitTest(balle._x-40, balle._y+40, true) == false) {
		coefX = chiffreAleatoire();
		coefY = -chiffreAleatoire();
	}
	//-- Collision sur la droite et/ou en haut ---
	if (this.hitTest(balle._x+40, balle._y-40, true) == false) {
		coefX = -chiffreAleatoire();
		coefY = chiffreAleatoire();
	}
	//-- Collision sur la gauche et/ou en haut ---
	if (this.hitTest(balle._x-40, balle._y-40, true) == false) {
		coefX = chiffreAleatoire();
		coefY = chiffreAleatoire();
	}
};
//
//--- Fonction qui retourne un chiffe aléatoire en 10 et 30 ---
//
function chiffreAleatoire() {
	var chiffre:Number = Math.round(random(30));
	if (chiffre<10) {
		chiffre = 10;
	}
	return chiffre;
}

Ce qui devrait ressembler au final à :

Et oui c’est un peu plus fourni ce coup-ci, mais pas de panique, il n’y a rien de compliqué.

//— Initialisation des variables —
//
var coefX:Number = 15;
var coefY:Number = 0;

J’ai mis ces 2 valeurs dans des variables car nous allons les faire varier de façon aléatoire à chaque fois que la balle touche un des bords du conteneur (et si on veut changer la vitesse de départ il suffira de modifier ces 2 variables, et non de vérifier tout le code).

//
//
//— Lancement des actions —
//
this.balle.onEnterFrame = function() {
deplaceBalle();
};
//
//— Fonction qui déplace la balle en fonction du coefficient —
//
function deplaceBalle() {
balle._x += coefX;
balle._y += coefY;
}

La notation :

balle._x += coefX;

balle._x = balle._x + coefX;

Mais signifie exactement la même chose.

Vous aurez certainement remarqué que le test des collisions est moins « simple » que dans l’exemple précédent.

En effet il est toujours effectué dans le onEnterFrame du clip conteneur mais plusieurs tests sont effectués.

//
//— Fonction qui test les collisions en la balle et le carre —
//
this.conteneur.onEnterFrame = function() {
//— 4 tests –
};

Pourquoi ?

Parce qu’à la différence du premier exercice qui se contentait de savoir si la collision était effective ou non, ici il nous faut tester la collision sur chaque « côté » du conteneur (comme si nous étions dans un carré), car selon le cas, la réaction de la balle ne sera pas la même.

Examinons l’un des tests :

//– Collision sur la droite et/ou en bas —
if (this.hitTest(balle._x+40, balle._y+40, true) == false) {
coefX = -chiffreAleatoire();
coefY = -chiffreAleatoire();
}

La manière « simple » :

monClip.hitTest(autreClip);

La manière plus « précise » :

monClip.hitTest(valeur _x, valeur _y, true or false);

Dans notre exemple, le clip balle fait 80 px de diamètre et son point de référence est placé au centre (plus pratique pour une balle !). La balle ne doit pas sortir du conteneur, donc nos tests doivent s’effectuer sur l’extérieur de la balle, c’est pourquoi nous devons ajouter ou soustraire son rayon pour déplacer le test sur l’extérieur de l’occurrence (voir illustration).

Enfin lorsque vous utiliser hitTest avec des coordonnées _x et _y, vous pouvez préciser au système si vous voulez effectuer le test sur la forme de l’objet (le cercle = true) , ou juste sont cadre de délimitation (le cadre bleu qui apparaît lorsque vous sélectionnez un objet dans la scène = false).

Attention cependant, malgré ce mode « plus précis », hitTest n’aime pas les coins ! Au début lors de la rédaction de ce cours, je contraignais la balle dans un carré. Certes le script marchait, mais si la balle avait le malheur de se « laisser coincer » entre 2 bords près d’un coin, elle finissait par sortir du carré car à force de « rebonds » trop proches, le centre était expulsé hors du carré (trop vite pour le script), inversant ainsi l’effet qui éloignait donc la balle du carré au lieu de la renvoyer vers le centre.

Une fois le test effectuer, il faut donc que la balle reparte dans un sens opposé pour qu’elle reste dans le conteneur, donc comme la fonction deplaceBalle continue de tourner en boucle et qu’elle dépend des variables coefX et coefY, il nous suffit de modifier les valeurs de ces variables pour que la balle change de trajectoire.

coefX = -chiffreAleatoire();
coefY = -chiffreAleatoire();

//
//— Fonction qui retourne un chiffe entier aléatoire en 10 et 30 —
//
function chiffreAleatoire() {
var chiffre:Number = Math.round(random(30));
if (chiffre<10) {
chiffre = 10;
}
return chiffre;
}

var chiffre:Number = Math.round(random(30));

Ensuite comme nous ne voulons pas que la balle soit trop lente, nous interdisons donc les chiffres inférieurs à 10 à l’aide d’un petit test :

if (chiffre<10) {
chiffre = 10;
}

Et enfin nous demandons à la fonction de retourner le chiffre obtenu (de façon à ce qu’il soit affecté à la variable qui l’a demandé (coefX ou coefY)) :

return chiffre;

Conclusion |

Voilà, ces 2 petits exemples vous auront, je l’espère, permis de comprendre le fonctionnement de la fonction hitTest en AS2 et permis d’apercevoir les possibilités offertes par ce procédé pour le développement de jeux, d’animations, et autres tel que des puzzles, des jeux de course de voiture, des jeux de plateaux, des questionnaires où les éléments doivent êtres replacés dans l’ordre, etc…, etc…