Tutoriel: les colisions

Salut, si vous tout comme moi passionné par le language actionscript, ce tutoriel devrait vous interesser.

Nous allons voir, comment il est possible de détécter les collisions dans flash. Cette fonction vous l'aurez surement deviné, est souvent utilisé par les programmeur de jeux flash.

Allez, c'est partie!!!!

Nous allons commencer par comprendre comment agis cette fonction et comment l'utiliser

Le hitTest:

Cette fonction est un booléen, cela veux dire qu'il vaut soit "false" soit "true", pour les quiches en annglais on pourrait traduire: false=faux, true=vrais.

Donnons un exemple concret:

Nous dirons que nous avons deux clips qui nous servirons pour le test: le clip "objet" et le clip "bord".

Code:

if (this.hitTest(objet) == true) {
//ici on mettra l'actions quand objet touchera le clip "bord"
}

Mais nous aurions très bien pu racourcir le code en mettant :

Code:

//— Si l' "objet" touche le "bord" —
if (this.hitTest(objet)) {
//actions
}

Il est aussi possible de faire le contraire

Code:

//si lobjet ne touche pas le "bord"
if (this.hitTest(objet) == false) {
//actions
}

Mais nous aurions très bien pu racourcir le code en mettant :

Code:

//on utilises le "!" pour dire que le hitTest n'existe pas.
if (!this.hitTest(objet)) {
//— Actions —
}

Le "this" nous permet d'éviter d'écrire le nom du clip "bord"


Maintenant imaginons que nous voulions que notre clip objet reste enfermé à l'interieur de notre clip "bord" tout en repoussant celui-ci.

Pour cela, créer un nouveau document de 370 par 370, puis créer un nouveau symbole de type clip contenant un cercle de 80 par 80 px. N'oubliez pas de lui donner un nom d'occurrence "objet".

Créez un scond clip qui nous servira de contener, attribuez lui une taille de 300 par 300px et comme nom d'occurence "bord".

Pour finir placez le code ci-dessous dans un calque de la scéne principale.

Le code:

Code:


///////////////////////////////////////////////////////////////////////////////
//on déclares les variable  elle servirons pour la direction de l'objet aprés colision
////////////////////////////////////////////////////////////////////////////////
var coefX:Number = 30;
var coefY:Number =20;


//on créer un onEnterFrame pour écouter la direction de l'objet
this.objet.onEnterFrame = function() {
   deplaceObjet();
};


//on créer la fonction qui déplacera l'objet on aurais aussi pu écrire
http://ojet._x=objet._x+coefX, mais ici on simplifie le code
function deplaceObjet() {
   objet._x += coefX;
   objet._y += coefY;
}
//On utilises enssuite le hitTest pout connaitre le moment ou l'objet est en contact
//avec le clip "bord, le tout est placé dans un onEnterFrame ce qui permet d'utiliser

this.bord.onEnterFrame = function() {
   //on test si il y a colision sur le bas ou a droite du clip "bord
   if (this.hitTest(objet._x+40, objet._y+40, true) == false) {
      coefX = -chiffreAleatoire();// on soustrait pour inverser le mouvement
      coefY = -chiffreAleatoire();//de même
   }
   //on test si il y a colision sur le bas ou a gauche du clip "bord
   if (this.hitTest(objet._x-40, objet._y+40, true) == false) {
      coefX = chiffreAleatoire();
      coefY = -chiffreAleatoire();
   }
   //on test si il y a colision sur le haut ou a droite du clip "bord
   if (this.hitTest(objet._x+40, objet._y-40, true) == false) {
      coefX = -chiffreAleatoire();
      coefY = chiffreAleatoire();
   }
   //on test si il y a colision sur le haut ou a gauche du clip "bord
   if (this.hitTest(objet._x-40, objet._y-40, true) == false) {
      coefX = chiffreAleatoire();
      coefY = chiffreAleatoire();
   }
};
//Enfin, nous créer une fonction qui a pour but de créer un chiffre aléatoire
//nous voulon que cette génére un chiffre entre 10 et 30
//Nous utilisons le Math.floor pour arrondir le resultat à l'entier et le
http://math.random pour le côté aléatoire de la fonction
//la condition nous sert à empêcher la génération d'un chiffre en dessous de 10
function chiffreAleatoire() {
   var chiffre:Number=(Math.floor(Math.random(123456789)*30));
   if (chiffre <10) {
      chiffre = 10;
   }
   //on récupére le resultat
   return chiffre;
}

Voici à peu pré ce que vous devriez avoir:


Le fichier source:
FICHIER COLISION

Vous pouvez approfondir vos connaissances sur cette fonction en vous rendant:

http://www.explain-me.com/2008/09/19/as2-les-collisions/

C'est grâce à ce site que j'ai pu vous présenter ce tutoriel, alors merci à son auteur. N'hésitez pas à faire un tour sur son blog, qui est d'ailleurs très bien fait.

bonjour, il y a t-il un moyen de rendre la collision plus précise ? Sur l'exemple, le rebond de la boule est parfois illogique.