Artkabis

Salut !!!
Si vous êtes membre du forum, vous pouvez vous connecter.
Au cas contraire vous avez la possibilité de créer gratuitement un compte...

Forum d'entraide en graphisme et webdesign. Formation pour Flash, Photoshop et les langages: as2, as3, html, php, javascript, etc.


    Tutoriel: les colisions

    Partagez

    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
    Date d'inscription : 11/09/2008

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Tutoriel: les colisions

    Message par artkabis le Jeu 30 Oct - 19:39

    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.

    dreeck
    Nouveau membre
    Nouveau membre

    Messages : : 3
    Age : : 39
    Logiciels : Logiciels : : Je graph depuis: Au moins 10 ans en loisir

    logiciels Web Mastering :

    Graphique :
    Photoshop, dreamweaver, illustrator, Flash, Notepad++, firefox

    Vidéo :
    Vegas pro, Format Factory, MP4 Modifier, Mediacoder, VirtualdubMod

    Audio :
    ACID Pro, Reason en Rewire, Sound Forge
    Date d'inscription : 01/05/2010

    Capacités en graphisme
    Capacité graph:
    0/0  (0/0)

    Re: Tutoriel: les colisions

    Message par dreeck le Mar 4 Mai - 16:48

    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.

      La date/heure actuelle est Sam 10 Déc - 16:30