Forums Développement Multimédia

Aller au contenu

[AS3] Drag un object sur un rail complexe

drag drop CODE Actionscript

62 réponses à ce sujet

#1 Urban angel

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 50 messages

Posté 31 October 2012 - 09:34 AM

Bonjour a tous !
Je ne poste pas bcp sur MediaBox, je grapille ça et là des infos.

Mais la je bute, et je ne trouve nul part réponse à ma question :
je voudrait déplacer un objet de la scène, mais en drag selon un RAIL qui est parfois en ligne droite, parfois en courbe, etc...
Un rail qui peut être en forme de "S" ou de "M" (j'espère être un peu clair). et dans un cas plus complexe (aiguillage) en forme de "K"
un peu comme l'on faisait avec un "guide" à l'époque.

Je ne trouve rien qui ne réponde a ma curiosité,
à part des déplacement sur ligne droite OU selon un cercle...
mais rien qui permettrait de faire un drag sur une forme de "S" par exemple ou un "Z"

Merci à vous de me dire si cela est possible :)
Christophe

#2 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 31 October 2012 - 11:29 AM

bonjour :)

Je te propose une ruse éhontée… pas sûre que ça s'adapte à ta problématique… :?

Spoiler

Fichier(s) joint(s)


Le savoir est le seul bien qui s'accroit quand on le partage
une tartine de tutos

#3 Henri_B

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 337 messages

Posté 31 October 2012 - 12:47 PM

ca depend du type de "guide".. est il toujours le meme ou change t-il en cours d'application ? et du mouvmeent de la souris ? doit on "suivre" exactement le rail ou juste "glisser" selon un axe (horizontalement par exemple) ?...

#4 Urban angel

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 50 messages

Posté 31 October 2012 - 14:21 PM

Nataly > Ruse est grossière, et marche...
mais malheureusement j'ai besoin que les "bouts" soient ajoutés les uns aux autres par code...
du coup ça ne peut marcher avec un "vrai" guide...


Henri_B > oui, le guide change lors de la construction du rail qui est progressive.
le rond doit et ne peut sortir du rail...
rhaaa je bloque.

#5 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7017 messages

Posté 31 October 2012 - 15:43 PM

Une idée comme ça (peut être pas du tout réaliste), dessiner en temps réel le tracé dans un bitmap de deux couleurs (blanc pour le fond et noir pour le tracé) qu'on affiche pas, faire une détection par getPixel pour connaître la couleur où se trouve le "rond" dans le bitmap, imposer au rond de rester sur le noir mais de suivre la position de la souris sur X ou sur Y quand il le peut.

#6 tlecoz

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3486 messages

Posté 31 October 2012 - 16:16 PM

Citation

faire une détection par getPixel pour connaître la couleur où se trouve le "rond" dans le bitmap, imposer au rond de rester sur le noir mais de suivre la position de la souris sur X ou sur Y quand il le peut.
Pas mieux :)

#7 Urban angel

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 50 messages

Posté 31 October 2012 - 23:27 PM

Voir le messageMonsieur Spi, le 31 October 2012 - 15:43 PM, dit :

dessiner en temps réel le tracé dans un bitmap de deux couleurs (blanc pour le fond et noir pour le tracé) qu'on affiche pas, faire une détection par getPixel pour connaître la couleur où se trouve le "rond" dans le bitmap, imposer au rond de rester sur le noir mais de suivre la position de la souris sur X ou sur Y quand il le peut.
Mmm... ça va pas être super doux comme mouvement... voir même un peu saccadé...
j'ai encore jamais experimenté avec le getpixel, vous avez des liens pour que je vois un peu de code qq part?

Sinon, un autre lecteur à une idée?
j'ai du mal à croire que personne ai encore jamais fait ça... :)

#8 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 01 November 2012 - 11:04 AM

J'ai essayé hier à coup de getPixel sur le bitmapData d'un clip avec un tracé.
Suis arrivée à rien de probant faute de trouver le bon algo.

Les if dans des if avec des else if, je le prends comme symptôme de pensée inadéquate, ça se vérifie :mrgreen:

l'idée c'était "je repère la position du pointeur, celle du suiveur (clip à balader) et je regarde les pixels contigus ds la direction du pointeur.
S'il y en a un dont getPixel renvoie autre chose que zéro, j'y déplace le suiveur".

Il y en a un qui s'est bien amusé avec du getPixel c'est Billy, ici

Il parait que la nuit porte conseil, je m'y re-essaierai peut être ds l'aprèm' :)
Le savoir est le seul bien qui s'accroit quand on le partage
une tartine de tutos

#9 Urban angel

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 50 messages

Posté 01 November 2012 - 14:34 PM

Et ce jeu là, les mouvements sont sur un rail aussi...
certes c'est pas dynamique (le path) mais y a pas qq qui aurait tenté un truc similaire?
Image IPB

#10 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7017 messages

Posté 01 November 2012 - 16:35 PM

Nath >

Citation

je repère la position du pointeur, celle du suiveur (clip à balader) et je regarde les pixels contigus ds la direction du pointeur.
S'il y en a un dont getPixel renvoie autre chose que zéro, j'y déplace le suiveur".

Perso je l'imaginais plus comme ça : le "rond" se déplace librement et suis la souris, sauf si il détecte à son prochain mouvement un pixel blanc, dans ce cas il ne peut pas aller là où se trouve le pixel blanc.

La différence réside dans le fait que je laisse au "rond" la liberté de se déplacer comme il veut, je ne fais que "brider" son déplacement pour le cas où il rencontrerai une "barrière" (le pixel blanc), c'est avec ce genre de "color map" qu'on gère certains jeux de voiture, on utilise un bitmap de couleurs restreintes (la "color map") et on teste le pixel qui se trouve dans la direction prise par la voiture à une distance correspondant à la vitesse de déplacement, si le pixel trouvé est référencé comme n'étant pas la piste alors il y a collision ou sortie de piste au prochain mouvement. L'IA des adversaires se base aussi là dessus pour savoir quand tourner par exemple ou si il y a un obstacle à éviter.

@ Urban Angel : le type de jeu que tu montre à des guides fixes, ce n'est pas la même procédure, ce qui rend la chose complexe dans ta demande ce sont les guides dynamiques qui se tracent quand on veut.

Pour info, la méthode du getPixel pour la détection d'un chemin (ici d'une route) à été tutorialisée et testée ici : http://forums.mediab...-ca-vous-tente/
Pour déplacer le vaisseau sur la route (qui n'est jamais la même donc impossible de prévoir un tracé à l'avance) on délimite une zone restreinte autour du vaisseau que l'on retrace dans un bitmap, et on teste la couleur des pixels, dans cet exemple on se base au début sur la transparence des pixels, pixel transparent = hors de la piste.

#11 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 01 November 2012 - 16:41 PM

de mon côté je creuse l'idée brutasse "je regarde les trois pixels du côté de la souris et je m'y déplace si possible.
Quand plusieurs sont possibles, je prends en priorité le plus proche de la souris (tiens en le formulant comme ça ça me donne une idée).

C'est à optimiser (voire à repenser complètement)

… ah une réponse est postée pendant que j'écris … je la lis avant d'aller plus loin, et je reviens poser les sources si ça vaut le coup qd elles seront un peu commentées.

ce n'est pas un glisser-lâcher, il suffit de maintenir la souris enfoncée sur la scène

Fichier(s) joint(s)


Le savoir est le seul bien qui s'accroit quand on le partage
une tartine de tutos

#12 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 01 November 2012 - 16:44 PM

ah ah Spi ! c'est sans doute mieux (remarque, pire j'attends de pied ferme :mrgreen: )

Je retourne cogiter/ comparer ma nouvelle idée et la ta proposition. Chic, je m'amuse bien :Hola:
Le savoir est le seul bien qui s'accroit quand on le partage
une tartine de tutos

#13 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7017 messages

Posté 01 November 2012 - 17:02 PM

Amuses toi bien ;-)
Moi je lance les idées mais je n'ai pas le temps de faire des tests et mises en applications, heureusement que tu as le temps de t'y coller ;-)

#14 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 01 November 2012 - 17:25 PM

Isn'it que ça tombe bien ? ;)

résultat du test de ton idée :


var _tm:Timer = new Timer(50);
_tm.addEventListener(TimerEvent.TIMER,suitPointeur);

var dataZone:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,true,0);
dataZone.draw(stage,new Matrix());

suiveur.addEventListener(MouseEvent.MOUSE_DOWN, qdEnfonce);
stage.addEventListener(MouseEvent.MOUSE_UP, qdLache);

function qdEnfonce(me:MouseEvent):void {
        _tm.start();
}
function qdLache(me:MouseEvent):void {
        _tm.stop();
}

function suitPointeur(te:TimerEvent):void {

        if (dataZone.getPixel(mouseX,mouseY)) {
                suiveur.x = mouseX;
                suiveur.y = mouseY;
        }

}




- Afficher le SWF -
Fichier joint  suitTracéSourisDrag.swf   3.31 Ko   20 téléchargement(s)

du coup si on force le pointeur en "traversant" des zones blanches, la pastille "saute par dessus"

j'ai essayé en contraignant à un rayon max entre pointeur et suiveur (pastille)



var rayon:int = suiveur.width / 2;

[]
if (Point.distance(p,s)<=rayon &&dataZone.getPixel(mouseX,mouseY)) {
 

ça rend le déplacement peu fluide…


- Afficher le SWF -
Fichier joint  suitTracéSourisDragRayon.swf   3.35 Ko   22 téléchargement(s)

Il faudrait peut-être essayer sur un MouseMove :roll:
Le savoir est le seul bien qui s'accroit quand on le partage
une tartine de tutos

#15 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7017 messages

Posté 01 November 2012 - 17:31 PM

Citation

du coup si on force le pointeur en "traversant" des zones blanches, la pastille "saute par dessus"

Je pense que c'est lié à la manière dont tu déplace le "rond" et non à la détection.
Pour moi le "rond" se déplace dans la direction de la souris et vérifie en chemin si il rencontre un pixel blanc.
Il n'y a donc pas de raison que le "rond" saute par dessus un "mur" si il se déplace de manière continue.
Mais pour ça il faut ajouter un code de déplacement du rond en direction de la souris avec une vitesse et un angle (ou via vecteurs). Principe du clip qui suis une cible, sauf que là on limite le déplacement du clip à une zone (détectée via getPixel).

#16 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 01 November 2012 - 18:58 PM

Voir le messageMonsieur Spi, le 01 November 2012 - 17:31 PM, dit :

Pour moi le "rond" se déplace dans la direction de la souris et vérifie en chemin si il rencontre un pixel blanc.

Oui, c'était ma première idée. Je suis parti du principe qu'il se déplaçait de 1 pixel vers la souris.
J'aurais pu décider de calculer un trajet d'une distance x sur la ligne le reliant au pointeur. Mais en cas de pixel vide, on fait quoi ? on recule jusqu'à trouver ?

En fait ça marche plutôt bien.



- Afficher le SWF -
Fichier joint  suitTracéSouris.swf   2.77 Ko   22 téléchargement(s)
Le code est sans doute mal écrit, on doit bien pouvoir le faire sans les moufles ;)



l'idée c'est : 8 pixels autours du point de référence. selon la position du pointeur respectivement au suiveur, il y a le choix entre trois pixels potentiels.
par exemple j'ai représenté 2 des 4 choix/situations :
Image attachée: suitTracéSourisjeter.fla*.png


si parmi ces trois pixel, j'ai le choix (surface, ou embranchement) l'angle du pointeur au suiveur détermine la priorité .



var suiveur:Mv_Suiveur=new Mv_Suiveur();
addChild(suiveur);
suiveur.x = 250;
suiveur.y = 200;
var _tm:Timer = new Timer(10);
_tm.addEventListener(TimerEvent.TIMER,suitPointeur);

var dataZone:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,true,0);
dataZone.draw(mcTrajet,new Matrix());

stage.addEventListener(MouseEvent.MOUSE_DOWN, qdEnfonce);
stage.addEventListener(MouseEvent.MOUSE_UP, qdLache);

function qdEnfonce(me:MouseEvent):void {
    _tm.start();
}
function qdLache(me:MouseEvent):void {
    _tm.stop();
}

function suitPointeur(te:TimerEvent):void {
    //trace("sous suiveur "+dataZone.getPixel(suiveur.x,suiveur.y));
    var i:int;
    var tbPoints:Array;
    var deltax:int = mouseX - suiveur.x;
    var deltay:int = mouseY - suiveur.y;
    //trace("deltas "+deltax+" " +deltay);
    switch (true) {
        case deltax >= 0 && deltay <= 0 :
            //HD
            // côté y, diag, côté x
            tbPoints = [new Point(0,-1),new Point(1,-1),new Point(1,0)];
            break;

        case deltax >= 0 && deltay >= 0 :
            //BD
            tbPoints = [new Point(1,0),new Point(1,1),new Point(0,1)];
            break;

        case deltax <= 0 && deltay >= 0 :
            //trace("BG");
            tbPoints = [new Point(0,1),new Point(-1,1),new Point(-1,0)];
            break;

        default :
            tbPoints = [new Point(0,-1),new Point(-1,-1),new Point(-1,0)];
    }


    deplace(deltax,deltay,tbPoints);

}


function deplace(deltax:int,deltay:int,tbPoints:Array) {
    //var tbPoints ds cet ordre : [côté y, diag, côté x]
    var prio:Array;// (booléens )côté y, diag, côté x
    var tbPixPossibles: Array=new Array();
    var i:int;
    var ang:int = Math.atan(deltay / deltax) * 180 / Math.PI;
    if (Math.abs(ang) > 30 && Math.abs(ang) < 60) {
        //trace("priorité diag");
        prio = [false,true,false];
    } else if (Math.abs(deltax)>Math.abs(deltay)) {
        //trace("prio x");
        prio = [false,false,true];

    } else {
        //trace("prio y");
        prio = [true,false,false];
    }

    //trace("prio "+prio);
    for (i=0; i<3; i++) {
        // pour chacun des trois points angulaires, d'abord sens y, puis diag et sens x
        var p:Point = new Point(suiveur.x + tbPoints[i].x,suiveur.y + tbPoints[i].y);
        //trace("----------------get "+dataZone.getPixel32(p.x,p.y));
        if (dataZone.getPixel(p.x,p.y)) {
            if (prio[i]) {
                // pixel à privilégier
                suiveur.x = p.x;
                suiveur.y = p.y;
                return;// on sort, c'est fait
            } else {
                // un pixel possible si pas mieux
                tbPixPossibles.push(p);
            }
        }
    }
    //trace("hasard "+tbPixPossibles[0]);
    if (tbPixPossibles.length) {
        // le premier (on pourrait au hasard, ça changerait pas gd chose, je crois…)
        p = tbPixPossibles[0];
        suiveur.x = p.x;
        suiveur.y = p.y;
    }
}
 


là mes sources ne sont pas publiables, et comme je suis sûre que d'autres vont améliorer le principe, je ne les joins pas (encore ;))

[edit, c'est mieux avec la fonction deplace ]
Le savoir est le seul bien qui s'accroit quand on le partage
une tartine de tutos

#17 Urban angel

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 50 messages

Posté 02 November 2012 - 10:13 AM

Spi et Nataly > merci d'avoir passé du temps, en effet le Getpixel sur un path d'1 pixel peut m'intéresser... car je veux un mouvement qui soit vraiment sur rail, à voir maintenant comment ce mouvement peut être très rapide sur un path plus simple.

De mon côté, j'avance sur un algo qui gère les briques les unes après les autres, pour un drag du slider fluide.
Pour le moment ça ne gère que les blocs horizontaux, mais je vais y ajouter les verticaux... et j'espère bien les courbes en y greffant un algo de cercle par dessus.

PS : je trouve pas comment insérer un SWF dans le post :/ (et je peux pas fermer le popup non plus)

#18 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 02 November 2012 - 11:58 AM

… ou alors start/stopDrag et un suiveur dont la classe de base surcharge les accesseurs x et y … :roll:

moi j'ai assez joué comme ça ;) Tiens nous au courant :)

Voir le messageUrban angel, le 02 November 2012 - 10:13 AM, dit :

PS : je trouve pas comment insérer un SWF dans le post :/ (et je peux pas fermer le popup non plus)

bouton "plus d'options de réponse" en bas droite, puis "Joindre fichiers"
Le savoir est le seul bien qui s'accroit quand on le partage
une tartine de tutos

#19 Urban angel

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 50 messages

Posté 02 November 2012 - 12:08 PM

Voilà le code qui override les limitation du drag/drop suivant les 4 briques.

Fichier(s) joint(s)



#20 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 02 November 2012 - 16:54 PM

Ah ! C'est ça le but ?

J'avais compris tout autre chose :)

Du coup, je me suis tirée de la consigne avec deux clip (droit et courbe) et leur classe de base qui se contente de calculer les coordonnées du point sur le rail selon position de la souris et de les diffuser (converties sur le repère racine) au mouseMove.
Pas de surcharge.


En vrai c'est tellement pas grand chose que pour mes tests, j'ai mis des trois lignes ds chaque clip :P

genre pour le rail droit :

var _x:Number
var _y:Number
addEventListener(MouseEvent.MOUSE_MOVE,qdSurvole)

function qdSurvole (me:MouseEvent) {
        var p:Point=new Point(mouseX,25)
        var pc:Point=this.localToGlobal(p)
        _y=pc.y
        _x=pc.x
        dispatchEvent(new Event("survoleRail",true))
}

c'est plus ça que tu cherchais ?

Fichier(s) joint(s)


Le savoir est le seul bien qui s'accroit quand on le partage
une tartine de tutos

#21 Goabonga

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 2724 messages

Posté 02 November 2012 - 17:10 PM



Y'a des bugs ;)

Faut aussi jouer sur le déplacement entre l'intersection de depart et d'arrivé.


Souvent dans des projets similaires (mais pas des jeux), je prefere oublier les outils graphique ( getPixel.. hitTest...) et travailler uniquement avec les math; ce qui permet un gain en performance et une portabilité du code vers un autre language....

#22 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 02 November 2012 - 17:54 PM

en vrai tant qu'on ne sait pas dans quel contexte, dans quel but, ça reste de l'ordre du test de piste ;)

Pour empêcher de traverser j'ai mis une rustine :

function qdSurvoleRail(e:Event) {
        var marge:int=45
        if (Math.abs(pastille.x - e.target._x) > marge || Math.abs(pastille.y - e.target._y)>marge) {
                trace("sort");
                return;
        }

        pastille.x = e.target._x;
        pastille.y = e.target._y;
}

ce que je trouve sympa avec la construction clip, c'est de "faire faire les maths à flash" : un même clip rail droit, je l'oriente, le déforme… ça suit toujours le localToGlobal s'en débrouille ;)

Fichier(s) joint(s)


Le savoir est le seul bien qui s'accroit quand on le partage
une tartine de tutos

#23 lilive

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 2993 messages

Posté 03 November 2012 - 00:52 AM

Bonsoir,

J'ai en stock une classe qui permet de définir un chemin composé de segments de droites et de courbes de bézier. Du coup j'ai pu faire un truc. C'est surement pas optimisé du tout, mais ça marche.



- Afficher le SWF -
Fichier joint  DragSurGuide.swf   12.04 Ko   21 téléchargement(s)
Fichier joint  drag-sur-guide.zip   25.13 Ko   21 téléchargement(s)

C'est assez simple d'ajouter un chemin.
- Soit comme cela:

// Construire le chemin
_path = new Path();
_path.addPoint2(50, 50);
_path.addBezier2(150, 50, 100, 125, 150, 150);
_path.addBezier2(400, 50, 350, 300);
_path.addBezier2(200, 350, 150, 300);
_path.addPoint2(650, 200);
_path.addBezier2(750, 250, 450, 400, 700, 500);
 
- Soit en utilisant la méthode setSVG() de la classe Path, qui permet d'utiliser un tracé fait dans un logiciel comme illustrator ou inkscape.

#24 lilive

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 2993 messages

Posté 03 November 2012 - 01:20 AM

Un exemple où le rail s'agrandit à chaque appui sur la touche espace.
Comme les tronçons s'ajoutent au hasard, ça devient vite n'importe quoi. Appuyer sur n'importe quelle autre touche pour remettre le rail à zéro.

Fichier(s) joint(s)



#25 Urban angel

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 50 messages

Posté 03 November 2012 - 11:29 AM

Nataly > Ah voilà, désolé ne n'avoir été plus clair... mais le dernier essai est clairement ce que je voyais.
reste à voir si tu veux bien partager tes sources :) ça serait un bonheur de pouvoir comparer.
Après, pourquoi ta version est si peu fluide? est juste le framerate? ou le code qui demande ça?

Lilive > Merci, voilà un autre super exemple... votre code est tellement clean...
je ne suis pas un habitué des méthode draw et getpixel et tout ça... plus dans ce qu'a fait Nataly.
Mais cette méthode semble tellement plus... optimisée... art.

-PS : peut-on aussi supprimer un morceau du path dynamiquement?
à part un graphics.clear(); puis redessiner tout sauf le morceau à virer?
-PS2 : lilive, quelle heure tardive pour poster :)
-PS3 : pourquoi ne puis-je rien ajouter sur la scène (clips, boutons) sans avoir un "TypeError: Error #1009: Il est impossible d'accéder à la propriété ou à la méthode d'une référence d'objet nul. at DragSurGuide()"
-PS4 : avec ta fonction, je ne peux pas tracer une ligne horizontale après un Béziers :
exemple de path :
_path.addPoint2(50, 50);
_path.addPoint2(200, 50);
_path.addPoint2(200, 200);
_path.addBezier2(200, 200, 200, 300, 300, 300);
_path.addPoint2(600, 300);
j'obtiens :
"Error: endLength > _length
at geom::Segment/loop()
at geom::Path/initLoopCurve()
at geom::Path/nextPoint()
at geom::Path/draw()
at DragSurGuide()"

Mais merci beaucoup à vous 2, c'est vraiment gentil de m'aider :)

#26 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 03 November 2012 - 12:45 PM

C'est avec plaisir que je joue avec ta consigne. Coder est un des moyens les plus efficaces que je connaisse pour ne pas penser à ce qui fait iech, du coup c'est moi qui te remercie :P

je n'ai pas poussé plus avant faute de connaitre le contexte et l'objectif.
Comme toi j'ai constaté que c'était peu fluide, sans pour autant penser à modifier la cadence ( :oops: )
Pas sûre que ça suffise, je pense que c'est pcq j'utilise du mouse_move, si tu veux bien nous éclairer sur l'objectif, je m'essaierai volontiers à quelque chose de plus convaincant.

Bien évidemment que je vais partager les sources :D… je ne l'ai pas fait plus que ça, pcq je n'étais pas bien certaine que ce soit ce que tu cherchais, et pcq c'est carrément pas abouti (tout en dur et codé ds les clips), juste de la testouille vite fait pour voir si l'idée donne quelque chose d'exploitable.

Je repasse plus tard poser les sources modifiées et (un peu) plus revendicables. Mais attention ça reste de la bidouille, par exemple la "rustine" pour empêcher le franchissement.
En attendant, tu as le code du rail droit (le courbe c'est même principe à coups de cosinus) ainsi que la fonction de rappel (écouteur posé sur la scène qui écoute "survoleRail")

++ :)
Le savoir est le seul bien qui s'accroit quand on le partage
une tartine de tutos

#27 lilive

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 2993 messages

Posté 03 November 2012 - 15:25 PM

Voir le messageUrban angel, le 03 November 2012 - 11:29 AM, dit :

Mais cette méthode semble tellement plus... optimisée... art.
Ça c'est pas sûr!

Voir le messageUrban angel, le 03 November 2012 - 11:29 AM, dit :

peut-on aussi supprimer un morceau du path dynamiquement?
Je viens de rajouter 2 méthodes à la classe Path: removeFirstPiece() et removeLastPiece().
Rien n'est prévu pour enlever des morceaux au milieu, puisque justement le principe de cette classe est d'être un chemin continu. Ce qui d'ailleurs, selon ce que tu veux réaliser, peut être un handicap.

Voir le messageUrban angel, le 03 November 2012 - 11:29 AM, dit :

quelle heure tardive pour poster :)
C'est si bon parfois de coder la nuit!

Voir le messageUrban angel, le 03 November 2012 - 11:29 AM, dit :

pourquoi ne puis-je rien ajouter sur la scène (clips, boutons) sans avoir un "TypeError: Error #1009: Il est impossible d'accéder à la propriété ou à la méthode d'une référence d'objet nul. at DragSurGuide()"
Je ne sais pas, Ça dépend comment tu utilises DragSurGuide.as
Dans mon exemple c'est la classe du document. Si tu ne fais pas pareil tu peux en effet avoir une telle erreur puisque j'accède à stage dans le constructeur. Si tu veux une adaptation à un autre cas de figure et que tu ne sais pas comment faire le plus simple est que tu postes ton essai.

Voir le messageUrban angel, le 03 November 2012 - 11:29 AM, dit :

avec ta fonction, je ne peux pas tracer une ligne horizontale après un Béziers :
exemple de path :
_path.addPoint2(50, 50);
_path.addPoint2(200, 50);
_path.addPoint2(200, 200);
_path.addBezier2(200, 200, 200, 300, 300, 300);
_path.addPoint2(600, 300);
j'obtiens :
"Error: endLength > _length
at geom::Segment/loop()
at geom::Path/initLoopCurve()
at geom::Path/nextPoint()
at geom::Path/draw()
at DragSurGuide()"
En effet. Je n'ai pas encore testé ces classes dans de multiples situations. Je viens de faire une correction qui résoud le problème (cf fichiers joints).

Voir le messageNataly, le 03 November 2012 - 12:45 PM, dit :

je n'ai pas poussé plus avant faute de connaitre le contexte et l'objectif.
[...] si tu veux bien nous éclairer sur l'objectif, je m'essaierai volontiers à quelque chose de plus convaincant.
Moi c'est un peu pareil, sans savoir ce que tu veux faire exactement je ne saurais dire si mon approche est intéressante. De ce que je vois jusque-là, je dirais que l'approche de Nataly semble plus pertinente. A voir.
J'ai proposé ma technique car j'avais du code tout fait, mais je sais pas si c'est adapté!

Fichier(s) joint(s)

  • Fichier joint  geom.zip   12.22 Ko   12 téléchargement(s)


#28 Urban angel

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 50 messages

Posté 03 November 2012 - 19:13 PM

Lilive > oui, je suis un codeur aguerri AS2 qui tente de passer à l'AS3.
du coup, j'apprend petit à petit, et ce nouveau projet me donne l'occaz de tester de nouveaux truc.
par exemple, à par de petits fichier .as externe, je n'ai jamais travaillé avec des classe, je ne comprends pas vraiment l'intérêt (pauvre de moi),
du coup, là je suis un peu perdu avec ton stage depuis le constructeur... mes scripts locaux (en frame1) provoquent des erreurs, et mes graphiques (simple logo/menu) plantent le tout...
serait-il possible d'avoir une version de ton système, ou tout est dans le .fla en frame1 ? (je parle pas des scripts as externe hein).
je sais pas si c'est possible, ou si ta méthode (et ça doit être le cas) est plus optimisée,
si c'est le cas, pourquoi cela plante-il avec mes clips en frame1? mystère pour moi.

#29 lilive

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 2993 messages

Posté 03 November 2012 - 20:48 PM

Quand on te donne le code d'une application sous forme d'une classe, c'est que cette classe doit être utilisée comme classe du document (cf la doc, et il y a aussi quelque chose là-dessus dans le wiki je crois).

Sinon, si tu veux mettre ce code directement dans le fla, tu dois:
- Recopier certains import (ceux qui ne sont pas natif à l'actionscript)
- Recopier les déclaration de variables (en enlevant les choses comme private et public il me semble)
- Recopier le code présent dans la fonction constructeur (la fonction qui a le même nom que la classe)
- Recopier les déclaration de fonctions (en enlevant les choses comme private et public il me semble)

Dans ce cas ça devrait donner:

import geom.*;

var _path:Path;
var _disk:Shape;
 
// Construire le chemin
_path = new Path();
// _path.addPoint2(50, 50);
// _path.addBezier2(150, 50, 100, 125, 150, 150);
// _path.addBezier2(400, 50, 350, 300);
// _path.addBezier2(200, 350, 150, 300);
// _path.addPoint2(650, 200);
// _path.addBezier2(750, 250, 450, 400, 700, 500);
_path.addPoint2(50, 50);
_path.addPoint2(200, 50);
_path.addPoint2(200, 200);
_path.addBezier2(200, 200, 200, 300, 300, 300);
_path.addPoint2(600, 300);
 
// Dessiner le chemin
graphics.lineStyle(1, 0x000000);
_path.draw(graphics);
// Créer le curseur
_disk = new Shape();
_disk.graphics.lineStyle(1, 0xff);
_disk.graphics.drawCircle(0, 0, 20);
addChild(_disk);
// Placer le curseur sur le premier point du chemin
var pos:Point = _path.getPoint(0);
_disk.x = pos.x;
_disk.y = pos.y;
// Et c'est parti
stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
 

function onMouseDown(e:MouseEvent):void {
stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
}
function onMouseUp(e:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_UP, onMouseUp);
stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
}
function onMouseMove(e:MouseEvent):void {

var length:Number = _path.length;        // La longueur du chemin
var l:Number = 0;                // Va varier entre 0 et length dans la boucle
var mousePos:Point = new Point(mouseX, mouseY);  // Position du pointeur de la souris
var currentPos:Point = new Point(_disk.x, _disk.y); // Position actuelle du curseur
var p:Point;              // Point placé à la longueur l sur le chemin
var dist:Number;                 // Distance entre p et le pointeur de la souris
var bestMatch:Point;            // Meilleure position trouvée sur le chemin   
var bestMatchDist:Number = -1;    // distance entre bestMatch et le pointeur de la souris

// Boucle pour parcourir tout le chemin, par pas de 2 pixels
while (l <= length) {

  p = _path.getPoint(l);         // Trouver le point positionné à la longueur l sur le chemin
  dist = p.subtract(mousePos).length;  // Calculer la distance entre ce point et le pointeur de la souris

  // voir si ce point est plus proche de la souris que le point précédemment testé,
  // et si ce point n'est pas plus éloigné de la position précédente du curseur de plus de 20 pixels
  if ((bestMatchDist == -1 || dist < bestMatchDist) && p.subtract(currentPos).length < 20) {
   // Dans ce cas c'est un bon candidat pour être la prochaine position du curseur
   bestMatch = p;
   bestMatchDist = dist;
  }

  l += 2;

}

if (bestMatch == null) return// Si on n'a rien trouvé de valable au revoir

// Sinon on place le curseur sur ce point
_disk.x = bestMatch.x;
_disk.y = bestMatch.y;

}

 

(Oups, l'indentation est toute zigouillée, désolé)

#30 lilive

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 2993 messages

Posté 03 November 2012 - 20:53 PM

Voilà le fla pour CS5

Fichier(s) joint(s)



#31 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 04 November 2012 - 11:56 AM

Voir le messageUrban angel, le 03 November 2012 - 19:13 PM, dit :

Lilive > oui, je suis un codeur aguerri AS2 qui tente de passer à l'AS3.
[…] je n'ai jamais travaillé avec des classe, je ne comprends pas vraiment l'intérêt (pauvre de moi),


arff, c'est un sale moment à passer a migration de 2 à 3 ;)

ce tuto est pensé pour ceux qui n'ont jamais travaillé avec des classes mais connaissent bien flash… Il te sera sans doute utile.
un récap des principales différences (que tu pourras enrichir si tu notes des manques)


J'ai, de mon côté, fabriqué un truc. C'est maintenant fluide : en écoutant le mouseMove il fallait que le pointeur quitte la pastille pour le déclencher. Un coup de mouseEnabled false ou true aux moments adéquats a réglé le problème.

le franchissement je ne suis pas arrivée à m'en défaire de façon convaincante. Plusieurs pistes avec chacune leur rustine… il faut connaitre l'objectif pour trancher.

pour tester, j'ai écrit ds les clips. Il faudra en faire des classes, ce qui sera tout de même plus correct.

Je le ferai quand j'en saurai plus :)

Les pièces glisssables lachables ;
A/Z pour les faire tourner (ou Q/W même souci qu'ici pas résolu)
Maj-clic pour supprimer (et : non ! on ne les déplace pas après coup, on supprime et recommence :P )
(c'est aimanté sur une grille de 50)

• Version gap fossé : je considère une distance max entre pointeur et suiveur (25 ou 50 case à cocher) du coup (non seulement ça ne résout pas toujours tout mais ) ça rend le mouvement saccadé : dès que le pointeur s'éloigne trop :


- Afficher le SWF -
Fichier joint  moRalils.swf   32.83 Ko   11 téléchargement(s)


• Version je détecte le point de sortie : c'est mieux mais je n'ai pas trouvé comment empêcher d'entrer.
on ne peut pas sortir en traversant, mais on peut entrer.
typiquement sur un T tu peux monter la colonne et arriver ds la barre transversale, mais tu ne peux plus redescendre (sauf à faire le trajet ds le vide avec le pointeur d'une porte à l'autre ;)).
Peut-être que l'objectif final fait qu'on s'en fout complètement.


- Afficher le SWF -
Fichier joint  moRailInfranchissable.swf   33.22 Ko   12 téléchargement(s)


Dis moi ce qui t'intéresse, je ferai des sources publiables (tel que, en tant que débutant de la classe tu vas souffrir pour transférer le code des clips aux classes ;))

… et je vais peut-être avoir d'ici là l'illumination qui résoud tout ;)
Le savoir est le seul bien qui s'accroit quand on le partage
une tartine de tutos

#32 Urban angel

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 50 messages

Posté 04 November 2012 - 12:13 PM

Nataly > merci, de la lecture :)
je vais me prendre ça en pdf pour les voyages en trains :)
pas mal le coup de l'éditeur mobile, pas mon sujet pour le moment, mais très intéressant pour la suite :)

Lilive > Super, je suis dessus.
je tente aussi d'ajouter les dernières fonction (ajouter/supprimer) au fla général

#33 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 04 November 2012 - 19:24 PM

Alors non ! Dans le train, l'ouvrage de T.Imbert sera bien plus adapté ;)
Le savoir est le seul bien qui s'accroit quand on le partage
une tartine de tutos

#34 Urban angel

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 50 messages

Posté 06 November 2012 - 01:05 AM

Lilive, question, tout le système repose sur le fait que path est visible c'est ça?
dès qu'il est caché impossible de faire marcher le tout...
n'y a t il pas un moyen de faire marcher le path système sans que le path soit visible?
car là... en fait c'est juste que c'est pas joli par dessus mes tiles...

#35 Goabonga

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 2724 messages

Posté 06 November 2012 - 01:33 AM

:oops: d'ou ma remarque....

Mais au pire tu peux travailler en deux plans ( un en dehors du stage pour le path ... ) et un sur le stage pour les jolies elements graphique.

#36 lilive

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 2993 messages

Posté 06 November 2012 - 09:47 AM

Voir le messageUrban angel, le 06 November 2012 - 01:05 AM, dit :

Lilive, question, tout le système repose sur le fait que path est visible c'est ça?
dès qu'il est caché impossible de faire marcher le tout...
Salut,
Ben non, regarde, voici mon premier test pour lequel j'ai juste effacé la ligne qui dessine le path:

Fichier(s) joint(s)



#37 Urban angel

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 50 messages

Posté 06 November 2012 - 10:16 AM

Ha! Cool, j'avais essayé plusieurs méthodes mais ça ne marchait pas.
PS : vous avez essayé sur un support tactile, genre iPad,
Ça sera ma prochaine étape ;)

#38 lilive

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 2993 messages

Posté 06 November 2012 - 10:29 AM

Voir le messageUrban angel, le 06 November 2012 - 10:16 AM, dit :

PS : vous avez essayé sur un support tactile, genre iPad,
Non j'ai pas essayé, j'ai pas ce qu'il faut.


Tant que j'y suis voici un exemple où le dessin est plus riche. Mais ça reste du lineTo avec différentes épaisseurs.


Quant au choix de la méthode de programmation, fais peut-être attention à ce que tu choisis:
- la mienne repose sur la classe Path, qui selon ton niveau ne va pas forcément être facile à modifier pour tes besoins. Le code d'exemple que je t'ai donné peut être séduisant car assez simple et concis, mais sauras-tu l'adapter?
- l'approche proposée par Nataly dans ses derniers posts est peut-être plus adaptée, ou en tout cas son code est plus facile à s'approprier je pense, car plus court et plus simple (si on compte tout le code de ma classe Path)
Comme l'a dit Nataly, tant qu'on ne connait pas plus tes objectifs, on ne peut guère t'orienter d'avantage ;)

Fichier(s) joint(s)



#39 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 06 November 2012 - 11:39 AM

Sans plus de commentaires un zip avec plus de classes que de code (cause interface), histoire de pouvoir continuer à affirmer que je fais tj ce que je dis que je ferai (en l'espèce déposer les sources de mes essais)

Fichier(s) joint(s)


Le savoir est le seul bien qui s'accroit quand on le partage
une tartine de tutos

#40 lilive

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 2993 messages

Posté 06 November 2012 - 13:48 PM

Ça marche bien bravo!
C'est dommage qu'on perde la main quand le curseur de la souris sort du chemin puis y revient lors d'un même glissé.

#41 Urban angel

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 50 messages

Posté 06 November 2012 - 14:53 PM

Nataly > wow ça marche nickel !
Meme si je n'utilise pas ce code... plus j'y pense, plus je crois que je vais intégrer une partie user à tout ça :)

Lilive > Oui, j'ai bien pu intégrer la classe sans vraiment tout comprendre... mais ça marche pour le but précis que je voulait en faire :
"un drag selon un path fluide qui soit dynamique".

Le but de mon projet avait 3 buts :
- Re-coder, car ça faisait des lustres que j'en avait envie.
- Apprendre à faire un projet de A à Z en AS3.
- Créer un jeu ipad en base AS3.
J'avais déja créé mon gameplay depuis des mois, et je buttait sur le système de drag pur et simple...
le miens était pire (en terme de fluidité) que vos tout premiers tests :)
du coup, là, j'arrive à le maitriser, et à en faire ce que je veux.

Mes prochaines étapes seront donc une conversion IOS, puis test simulateur ipad ( je n'en ai pas encore)
je crois qu'il existe un simulateur IOS made from Adobe basé sur un SDK Apple... je ne me suis pas encore trop penché dessus.
:)

#42 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 06 November 2012 - 14:55 PM

Voir le messagelilive, le 06 November 2012 - 13:48 PM, dit :

C'est dommage qu'on perde la main quand le curseur de la souris sort du chemin puis y revient lors d'un même glissé.

C'est le parti pris :(
faute d'objectifs, j'ai décidé…


mais de toutes façons sans même avoir ouvert tes sources, c'est sur que je peux remballer les miennes :D
et… même pas mal :P

(ce qui m'a plu c'est la mise en œuvre simple et parlante quant à son intéret de la composition avec interface)
Le savoir est le seul bien qui s'accroit quand on le partage
une tartine de tutos

#43 lilive

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 2993 messages

Posté 06 November 2012 - 15:14 PM

Voir le messageNataly, le 06 November 2012 - 14:55 PM, dit :

mais de toutes façons sans même avoir ouvert tes sources, c'est sur que je peux remballer les miennes :D
Sans compter que dedans il y a un portage d'un code qui n'est pas de moi et que je ne comprends pas :P

Voir le messageNataly, le 06 November 2012 - 14:55 PM, dit :

(ce qui m'a plu c'est la mise en œuvre simple et parlante quant à son intéret de la composition avec interface)
Carrément :)


Tu nous montreras le résultat Urban angel?


Et j'ai pas pu m'empêcher de faire un peu mumuse:

Fichier(s) joint(s)



#44 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 06 November 2012 - 15:28 PM

Raaaaa ! 't'énervant ce bonhomme… ça le fait vraiment…

Bon ! 'fo que je trouve un moyen à ma sauce, 'fo que je trouve un moyen à ma sauce, 'fo que je trouve un moyen à ma sauce, 'fo que je trouve…

Voir le messageUrban angel, le 06 November 2012 - 14:53 PM, dit :

Le but de mon projet avait 3 buts :
- Re-coder, car ça faisait des lustres que j'en avait envie.

hi hi hi, en voilà une motiv' que je comprends bien ;)
Le savoir est le seul bien qui s'accroit quand on le partage
une tartine de tutos

#45 Urban angel

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 50 messages

Posté 20 December 2012 - 23:53 PM

Bon, ça marche nikel tout ça, je viens de finir une passe d'optimisation en masse,
mais je bloque, le DRAG rame a mort sur IOS, mais alors un truc de dingue, on passe de 30fps a 2 quand on drag :/

car il fonctionne super rapidement sur Mac/PC et meme sur l'émulateur, mais sur IOS, rien a faire...

Juste le drag (dans le fichier joint) est complètement lent, du genre 1 frame par seconde...
j'ai remplacé par du Touch event, mais cela ne vient pas de là... je boute en touche pour le coup :/

ça doit être tellement évidement, mais là je vois pas,
des expert IOS dans le coin?

PS : Mais oui je vais vous faire voir :) vous inquiétez pas !

Fichier(s) joint(s)





1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)