Techniques > Collision entre deux occurrences>

Qu'est-ce que c'est ?

Lorsque 2 occurrences de type movie clip se trouvent sur la scène, si l'une d'entre elles est mobile (manuellement ou automatiquement), il est possible de déceler une collision avec l'autre. Télécharger le fichier .fla - Mac - PC

Comment tester cette collision ?

Dans l'exemple ci-dessus, un seul des 4 côtés suffit à tester la collision. Les 3 autres côtés comportent le même code (seul la variable et la valeur changent) mais voyons plutôt en détail la procédure.

1. Placer un movie clip sur la scène (Une barre horizontale représentant un des 2 murs, haut ou bas)
2. Sélectionner l'occurrence de ce movie clip sur la scène
3. Taper le code ci-dessous :

onClipEvent (enterFrame) {
if (this.hitTest(_root.balle)) {
_root.v = -3;
}
}

Rappelons que le gestionnaire d'événements onClipEvent permet de contrôler les événements liés au movie clip contenant ce code. Tout le code contenu dans ce gestionnaire est valable pour la timeline de ce movie clip, c'est pourquoi nous utilisons _root. Comme nous utilisons l'événement enterFrame, le code contenu dans ce gestionnaire va s'exécuter en boucle.

if (this.hitTest(_root.balle)) permet de réaliser un test de collision entre this, c'est à dire le movie clip qui supporte ce code et l'occurrence intitulée balle qui se trouve sur la scène.

La variable v qui se trouve sur la scène (_root) est initialisée à - 3. Nous verrons plus bas à quoi sert cette variable.

4. Placer un autre movie clip sur la scène (Une balle qui va se déplacer et donc rebondir)
5. Sélectionner l'occurrence de ce movie clip sur la scène
6. Nommer l'occurrence "balle"
7. Taper le code ci-dessous dans la fenêtre Actions :

 

onClipEvent (enterFrame) {
this._x = this._x+_root.h;
this._y = this._y+_root.v;
}

Ce code va s'exécuter également en boucle et donc automatiquement. this, faisant référence au movie clip contenant ce code (c'est à dire la balle) la balle va avoir pour position, sa position actuelle + la valeur de h. Cela va donc faire avancer ou reculer la balle horizontalement selon la valeur de h.

Nous aurions pu également avoir le code ci-dessous en remplacement.

this._x+=_root.h;
this._y +=_root.V;

Initialement, nous avions sélectionné l'image 1 de la timeline principale sur laquelle le code ci-dessous avait été tapé.

h=3;
v=3;

Nous n'avons pas besoin de faire référence à _root car ce "mot" permet de faire référence à la scène. Dans le cas présent, ces 2 lignes d'instructions sont situées sur la timeline principale, donc directement sur la scène.

Adaptez le code ci-dessous sur les 3 autres murs.

Mur du haut :

onClipEvent (enterFrame) {
if (this.hitTest(_root.balle)) {
_root.v = 3;
}
}

Mur de gauche :

onClipEvent (enterFrame) {
if (this.hitTest(_root.balle)) {
_root.h = 3;
}
}

Mur de droite :

onClipEvent (enterFrame) {
if (this.hitTest(_root.balle)) {
_root.h = -3;
}
}

A chaque collision entre la balle et l'un des murs, les valeurs des variables h et v vont changer à 3 ou -3, changeant ainsi la direction de la balle.

Le casse brique n'est donc pas difficile à réaliser à présent !

< Sommaire