Détection des collisions en Flash31/07/2005
Par
Stephane Eyskens (Autres articles)
Détection des collisions en Flash et cadre d'utilisation
1. Introduction
2. Qu'est-ce qu'une collision
2.1. Cadre d'utilisation
2.2. Méthodes de détection
2.3. Exemple simple de collision
2.4. Exemple de collision dans un petit jeu
3. Téléchargement
Ce court article va vous expliquer ce qu'est une collision en flash, comment les détecter et dans quel
cadre les utiliser. Vous devez disposer du flash player 7 pour pouvoir visualiser les animations. Il est disponible
sur le site de Macromedia.
2. Qu'est-ce qu'une collision
Une collision de deux Movie Clip en flash se produit lorsque ceux-ci se rencontrent. Il suffit que l'un
des pixels d'un movie clip rencontre un pixel appartenant à l'autre movie clip pour provoquer une collision.
Les collisions sont principalement utilisées dans les jeux. Tous les jeux de balles s'y prêtent bien. Les jeux
consistant à tirer sur certaines cibles aussi. Dans les exemples qui vont suivre, je vais d'ailleurs vous montrer comment
détecter si un "vaisseau ennemi" a été touché ou non.
2.2. Méthodes de détection
Il existe plusieurs méthodes pour détecter une collision. La plus précise mais certainement la plus complexe aussi
consiste à utiliser des calculs mathématiques. Ceci est surtout nécessaire lorsque l'on désire connaître l'angle de la collision.
Une autre méthode, beaucoup plus simple consiste à utiliser une fonction flash prévue à cet effet. C'est l'utilisation de cette fonction
que nous allons aborder. Cette fonction ne permet malheureusement pas de déterminer un quelconque angle de collision.
2.3. Exemple simple de collision
Cliquez au sein de l'animation pour lui donner le focus et bougez le cercle à l'aide des flèches et allez à la rencontre du carré.
Dans cet exemple simple, nous avons deux movie clip, un cercle et une barre verticale. Nous désirons simplement
savoir si le cercle a touché la barre verticale ou non.
Note: comme vous l'aurez certainement constaté, la détection de la collision dans cet exemple n'est pas parfaite, ceci
est dû au fait que le cercle est englobé dans un MC carré. Donc lorsqu'une des extrémités du carré touche la barre, flash
détecte une collision même si le cercle ne l'a pas touché. Pour éviter cela, soit vous devez préférer une autre
méthode de détection, soit ne travailler qu'avec des formes géométriques se rapprochant le plus possible d'un carré ou d'un rectangle.
Le cercle est nommé "mc1" et la barre "mc2". Voici
le code nécessaire pour réaliser cette animation
mc1.xMin=mc1._x;
mc1.xMax=mc1._x+300;
mc1.yMin=mc1._y-150;
mc1.yMax=mc1._y+150;
mc1.onEnterFrame=function()
{
if(Key.isDown(Key.RIGHT) && this._x<this.xMax)
{
this._x+=10;
}
if(Key.isDown(Key.LEFT) && this._x>this.xMin)
{
this._x-=10;
}
if(Key.isDown(Key.UP) && this._y>this.yMin)
{
this._y-=10;
}
if(Key.isDown(Key.DOWN) && this._y<this.yMax)
{
this._y+=10;
}
}
mc2.onEnterFrame=function()
{
Collision.text="";
if(mc1.hitTest(this))
{
Collision.text="Collision détectée";
}
}
2.4. Exemple de collision dans un petit jeu
Le but du jeu est simple, c'est le classique jeu de fusée auquel on jouait quand on était petit :)). Des vaisseaux
ennemis tentent d'atteindre le bas de l'écran. Vous devez tirer dessus pour les en empêcher, si l'un
d'entre eux parvient à atteindre le bas de l'écran vous perdez. Ce petit jeu illustre bien l'utilisation
de "hitTest()" et la détection de collision.
Du point de vue technique, nous avons deux MC chargés statiquement, il s'agit de la fusée et du clip qui
gère les vaisseaux ennemis. Les flèches de gauche et droite servent à déplacer la fusée et la barre d'espace
à tirer sur les vaisseaux. Vous pouvez la maintenir enfoncer pour envoyer une série de balles.
Nous devons donc gérer:
- Les flèches du clavier
- La barre d'espace
- L'envoi automatique de vaisseaux ennemis
- Détecter si une balle touche un vaisseau ennemi et supprimer celui-ci
- Détecter si un vaisseau ennemi a atteint le bas de l'écran auquel cas, le joueur perd
Code à placer sur la frame 1 de l'animation
commencer.onPress=function()
{
gotoAndPlay(2);
}
stop();
Code à placer sur la frame 2 de l'animation
ennemi=new Array();
fusee.currentItem=0;
fusee.onEnterFrame=function()
{
if(Key.isDown(Key.LEFT))
{
this._x-=50;
}
if(Key.isDown(Key.RIGHT))
{
this._x+=50;
}
if(Key.isDown(Key.SPACE))
{
_root.attachMovie("bullet","bullet"+this.currentItem,100+this.currentItem);
_root["bullet"+this.currentItem]._x=this._x+25;
_root["bullet"+this.currentItem]._y=this._y-30;
_root["bullet"+this.currentItem].onEnterFrame=function()
{
if(this._y<0) this.removeMovieClip();
for(value in ennemi)
{
if(_root[value].hitTest(this))
{
_root[value].removeMovieClip();
delete(_root.ennemi[value]);
this.removeMovieClip();
}
}
this._y-=45;
}
this.currentItem++;
}
}
ennemis.timeStarted=getTimer()/1000;
ennemis.interval=1;
ennemis.item=1;
ennemis.onEnterFrame=function()
{
if((getTimer()/1000) > (this.timeStarted+this.interval))
{
_root.attachMovie("ennemi","ennemi"+this.item,200+this.item);
_root.ennemi["ennemi"+this.item]=1;
_root["ennemi"+this.item]._x=random(300);
_root["ennemi"+this.item].onEnterFrame=function()
{
this._y+=10;
if(this._y>300)
{
this.removeMovieClip();
gotoAndStop(3);
}
}
this.item+=1;
this.interval+=1;
}
}
stop();
Code à placer sur la frame 3 de l'animation
for (value in ennemi)
{
_root[value].removeMovieClip();
}
recommencer.onPress=function()
{
gotoAndPlay(2);
}
Cet article est la propriété de www.developpez.com en tant qu'hebergeur ainsi que
celle de Stephaneey en tant que redacteur, ce texte est donc protégé par le code de la
propriété intellectuelle et est soumis à la réglementation en vigueur.
www.developpez.com ou son auteur se reserve le droit d'apporter des modifications
sans préavis. Vous pouvez utiliser cet article comme bon vous semble, faire un lien depuis
votre site Web, ou le copier en spécifiant l'auteur et la provenance (www.developpez.com)
Le non respect de cette règle equivaudrait à faire une contrefaçon. La responsabilité de
www.developpez.com, de l'un de ses membres, ou de la direction ne pourra etre engagé en cas
de destruction partielle ou totale des données ou de l'architecture système ou logicielle
inhérente à l'utilisation des ses logiciels. Les logiciels decrits ici sont la propriété de
leurs auteurs respectifs.
|