Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

5mar/098

Flex Library – Détection de collision avec HitTest (AS3)

Toute personne qui déjà essayé de faire un jeu en Flash connait la méthode hitTest qui permet de savoir si deux objets sont entrés en collision. Par exemple, pour savoir si un personnage est bien sûr le sol ou quand un projectile touche un ennemi. En AS3, il existe deux méthodes sur DisplayObject: hitTestObject() et hitTestPoint().

La méthode hitTestObject vérifie la collision entre deux DisplayObject alors que la méthode hitTestPoint vérifie la collision entre un Point et un DisplayObject. Pour mon application Flex, je voulais faire un outil permettant de faire un cadre de sélection, comme dans d'autres logiciels de graphisme (Adobe PhotoShop, Adobe Illustrator …). Cette sélection devait se faire sur des objets de type Sprite qui pouvaient avoir des formes diverses. Donc pas forcement des rectangles mais plutôt des polygones. Afin de détecter quelles étaient les géométries qui se trouvent dans mon cadre de sélection (un Sprite lui aussi), il fallait que je détecte quelles formes étaient dans l'intersection entre ma boîte de sélection et mes formes.

J'ai donc commencé avec un hitTestObject() entre ma box de sélection et chacune de mes formes. Le seul problème est que hitTestObject() fait la vérification sur les "bounds" des formes, c'est à dire l'enveloppe des objets. Pour un polygone un peut complexe, cela revenait donc à faire un test de collision entre 2 Rectangle (ma box de sélection et l'enveloppe de ma géométrie). Ce test n'était donc pas bon puisque s'il prenait dans sa sélection une partie de l'enveloppe où il n'y a pas de géométrie, le test renvoyait true.

La méthode hitTestPoint() elle, permet de mettre un flag qui va permettre de faire la vérification sur les pixels ou sur la BoundingBox. C'est un peu ce que j'aurai voulu avoir sur un hitTestObject() mais la c'est sur le Point donc cela faisait trop de calculs/boucles pour détecter une simple collision. Après quelques recherces, je suis tombé sur la classe HitTest de tink.ws, apparemment issu du travail de Grant Skinner.

Cette classe contient 3 méthodes static permettant de faire 3 types de détection de collision en AS3. Pour ma part, j'ai utilisé la méthode  complexHitTestObject() qui correspondait exactement à ce que je recherchais :) . Voila, ça pourrait être utile à quelqu'un donc je partage ce lien très utile.

Article sur le blog de l'auteur de la classe HitTest

Télécharger la classe HitTest.as

ComplexHitTestObject example

IntersectionRectangle example

ComplexIntersectionRectangle example

Articles similaires

Commentaires (8) Trackbacks (0)
  1. Merci pour l'info, c'est exactement ce que je recherchais !!!!

  2. Salut, c'est exactement ce que je cherchais aussi, mais vue que je n'ai pas beaucoup d'expérience dans le domaine de l'AS, je voudrai savoir quel est la fonction utilisée pour le ComplexHitTestObject…
    est-ce que c'est :
    if( mc_1:DisplayObject, mc_2:DisplayObject, accuracy:Number = 1 )){…}

  3. Salut,
    pour utilise le ComplexHitTestObject, tu as une méthode static sur la classe HitTest. Tu peux donc l'appeler comme ceci:

    Actionscript:
    1. if (HitTest.complexHitTestObject( mc_1, mc_2, 5 )){
    2. //
    3. }

    Sinon, tu peux t'inspirer des codes source des exemples qui sont dans l'article (clic droit sur l'application > View Source):
    http://www.tink.ws/blog/files/as3/ComplexHitTestObject/srcview/index.html

    Fabien

  4. Super, ca marche !! Merci ;)

  5. Bien le bonjour,
    D'après vous comment fait-on pour sélectionner une image (interprétée donc comme un DisplayObject) dans un composant TextFlow ?

    Je n'arrive pas à faire comprendre à a souris quelle est sur une image…
    Avec Flex 4 si possible.

    Des idées ?

  6. Salut,
    Désolé, je n'ai pas encore testé vraiment Flex 4. Qu'entends-tu par "faire comprendre à la souris" ? changer de curseur ?

    Fabien

  7. Alors voici :
    Pour être plus précis, j'importe un contenu html en provenance d'une base mysql dans un RichEditableText.
    Lorsque j'exerce une sélection sur le contenu de mon RichEditableText j'aimerais obtenir la source de mon image importée afin de pouvoir appeler un modifyInlineGraphic pour la source obtenue.
    J'ai bien appelé un EditManager pour le textFlow de mon RichEditableText mais je ne sais pas quel code lui associer afin de récupérer la source d'un GraphicElement présent dans le RichEditableText…
    Enfin je dit la source ou tout autre propriété qui me permettrait de jouer avec le GraphicElement (ses propriétés de DisplayObject par exemple).

    Sinon Flex 4 est super cool.

    J'espère avoir été clair.
    Merci d'avance. A plus tard.

  8. Mes excuses pour l'orthographe :
    cf. plus commentaire précédent.
    Enfin de di"s"


Leave a comment

(required)

Aucun trackbacks pour l'instant