Forums Développement Multimédia

Aller au contenu

Drag And Drop

Drag and Drop CODE

18 réponses à ce sujet

#1 pbonnefo

    Ceinture Jaune

  • Members
  • PipPip
  • 17 messages

Posté 15 October 2012 - 16:21 PM

Bonjour,
je souhaite réaliser un petit jeu en as3 type drag and drop.
une quinzaine d'objets doivent être répartis dans 5 conteneurs (une seule solution pour chaque objet).

où pourrais-je trouver un fla qui ressemble à ça et que je pourrais adapter à ma situation ?

merci d'avance

#2 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7017 messages

Posté 15 October 2012 - 16:28 PM

Bonjour,

Je déplace ta demande dans la section réservée aux jeux vidéos.
Sinon dis nous en plus sur ce que tu veux faire, trouver un FLA qui correspond à tes besoins n'est pas forcément la bonne solution, l'idéal serait que tu nous dise ce que tu veux faire, que tu nous montre ce que tu as déjà fait et que nous t'aidions à écrire le code qui répond à tes besoin, ce serait ainsi profitable à tout le monde.

#3 pbonnefo

    Ceinture Jaune

  • Members
  • PipPip
  • 17 messages

Posté 15 October 2012 - 16:38 PM

Avec plaisir.

je réalise un site en 3D avec une petite section jeu "drag and drop" pour des scolaires.
L'idée est de placer le bon déchet dans la bonne poubelle (conteneur à verre, poubelle jaune, noire...).

j'ai trouvé des bouts de codes mais en as2 et l'ensemble de ma composition est en as3.
Dans mon fla, le "jeu" se situe à Séquense 1 > PlanSerreJeu > PageJeu > Jeu.

Fichier(s) joint(s)



#4 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7017 messages

Posté 15 October 2012 - 17:23 PM

Re,

Dépiauter les projets des autres n'est pas ma tasse de thé ;-)
Je préfères les aiguiller vers les solutions adéquates ou les aider au fil de leur progression.

Autrement dit, quel est ton problème exactement ? Sur quel point tu n'arrive plus à avancer ?

Pour la gestion du drag & drop c'est plutôt simple, il existe plein de tutos du genre :

http://forums.mediab...e/drag_drop_as3
http://www.bases-as3...r-drag-and-drop

Ça se fait en quelques lignes de code, d'où le fait que je ne vois pas trop pourquoi chercher un code tout prêt à adapter ;-)

#5 pbonnefo

    Ceinture Jaune

  • Members
  • PipPip
  • 17 messages

Posté 15 October 2012 - 17:28 PM

merci pour ces liens, je vais les étudier attentivement.

en fait mon problème est de deux ordres:
- je ne sais pas si je peux (et comment) afilier plusieurs clips à la même cible
- je ne sais pas si je peux donner la surface entière de la cible comme point à atteindre et non un x et un y (comme j'ai souvent trouvé sur internet)

#6 pbonnefo

    Ceinture Jaune

  • Members
  • PipPip
  • 17 messages

Posté 15 October 2012 - 17:32 PM

Je voudrais également lancer trois types de réponses, genre :
1- Vrai
2- Faux
3- Bravo tu as gagné

avec à chaque fois une petite anim du genre "lapin qui sort du chapeau.

quelle est la commande dans le code pour lancer une anim' après une manip' de l'utilisateur ?

#7 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7017 messages

Posté 15 October 2012 - 17:46 PM

Citation

je ne sais pas si je peux (et comment) afilier plusieurs clips à la même cible

Pas besoin, tu sais quel clip tu as en cours de "drag".
Tu le pose à un endroit, tu regarde si cet endroit est occupé par une cible.
Si c'est le cas tu connais la référence de la cible et la référence du clip, il ne te reste plus qu'à compter les points (bonne cible avec le bon clip ou pas).

Citation

je ne sais pas si je peux donner la surface entière de la cible comme point à atteindre et non un x et un y (comme j'ai souvent trouvé sur internet)

Si tu travaille avec des objets (les clips en sont) un simple "hitTestObject" suffit pour la collision (pour une fois).
Si tu veux affiner tu passera par ta propre détection de surfaces (très simple) entre deux rectangles.
Si tu travaille avec des grilles, c'est encore plus simple, tu regarde juste ce qui se trouve dans la case où se situe le centre de ton clip.

Citation

quelle est la commande dans le code pour lancer une anim' après une manip' de l'utilisateur ?

Quel est ton niveau en programmation ?
Si on te donne des réponses que tu ne comprend pas cela ne t'aidera pas...

#8 pbonnefo

    Ceinture Jaune

  • Members
  • PipPip
  • 17 messages

Posté 15 October 2012 - 17:54 PM

Mon niveau en as3 est à peu près à 2 sur l'échelle de Richter du code qui en compte 100. ;-)

#9 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7017 messages

Posté 15 October 2012 - 18:20 PM

Ok, bon donc déjà l'échelle de Richter ne compte que 10 niveaux ;-) à 100 tu dois être aux environs d'une secousse de supernova.... bref.

Je viens d'aller voir ton FLA par curiosité, donc effectivement tu débute.

Avant de te lancer dans des structures un peu compliqués, et là ça va être le cas si tu mélange jeux et site et 3D (en vidéo) et timeline ..., je te recommande de te concentrer sur le jeu lui même, tu l'isole dans un projet à part et tu le travaille, quand tu aura bien compris comment ça marche tu reviendra sur l'interface de ton site et je pense que tu va la modifier en conséquence, ou y intégrer ton jeu ;-)

Je vais essayer de monter vite fais un exemple, je reviens.

#10 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7017 messages

Posté 15 October 2012 - 19:30 PM

Tient voilà une base de départ et son code :

var fond:FondJeu = new FondJeu();
var objets:Objets = new Objets();
var poubelles:Poubelles = new Poubelles();

addChild(fond);
addChild(poubelles);
addChild(objets);

objets.addEventListener(MouseEvent.MOUSE_DOWN, attrape);
stage.addEventListener(MouseEvent.MOUSE_UP, lache);

function attrape(e:MouseEvent):void {
        e.target.startDrag();
        trace("Objet pris : "+e.target.name);
}

function lache(e:MouseEvent):void {
        stopDrag();
        validation(e.target)
}

function validation(ob:Object):void{
        var trash:Object;
        for (var i:int=0; i<poubelles.numChildren;i++){
                trash = poubelles.getChildAt(i);
                if(ob.hitTestObject(trash) && ob!=fond){
                        objets.removeChild(MovieClip(ob));
                        trace("Poubelle : "+trash.name);
                }
        }
}

Avec ça tu crée des objets dynamiques pour le fond, les objets et les poubelles.
Tu peux faire un drag des objets et un drop sur les poubelles.
Cela t'affiche (panneau de sortie de Flash) le nom de l'objet que tu drag et le nom de la poubelle sur laquelle tu l'as déposé.

Prochaine étape, créer des tableaux de comparaison pour savoir ce que chaque poubelle peut contenir et valider ou non l'action.
Etape suivante, quand toutes les poubelles sont pleines, vérifier le nombres d'objets dans la bonne poubelle puis valider le résultat.

Bon courage.

Fichier(s) joint(s)



#11 pbonnefo

    Ceinture Jaune

  • Members
  • PipPip
  • 17 messages

Posté 15 October 2012 - 21:36 PM

Merci beaucoup pour le coup de main,
je vais dépioter tout ça,
ça va déjà m'occuper un moment.

thanks :smile:

#12 pbonnefo

    Ceinture Jaune

  • Members
  • PipPip
  • 17 messages

Posté 05 November 2012 - 17:34 PM

Bonjour,

j'ai pas mal avancé sur mon jeu drag and drop, cependant je n'arrive pas à trouer de solution pour rendre mes cibles disponibles pour plusieurs objets (jeu de tri).

un conseil ?

merci

Fichier(s) joint(s)



#13 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 06 November 2012 - 20:39 PM

hello !

Spi te propose une solution en parcourant les enfants d'un clip contenant autant de cibles que tu le souhaites.

Maintenant tu ne veux plus parcourir toutes les cibles mais seulement certaines .
L'idée pourrait être d'en faire une caractéristique (propriété) de chacun des clips déplaçables.
Tu références ("stockes") les cibles possibles dans un tableau (la propriété)
Et au lieu de parcourir toutes les cibles présentes, tu parcoures les cibles possibles.

j'ai repris la structure de Spi :


// la propriété cible de chaque clip référence les cibles possibles ds un tableau
objets.tasse.cible = [plateau,sol];
objets.zebre.cible = [sol];
objets.dossier.cible = [plateau,casier];

plateau.mouseEnabled = false;
casier.mouseEnabled = false;
sol.mouseEnabled = false;

objets.addEventListener(MouseEvent.MOUSE_DOWN, attrape);
stage.addEventListener(MouseEvent.MOUSE_UP, lache,true);

function attrape(e:MouseEvent):void {
        e.target.startDrag();
        e.target.xDep = e.target.x;
        e.target.yDep = e.target.y;
        trace("Objet pris : "+e.target.name);
}

function lache(e:MouseEvent):void {
        stopDrag();
        validation(MovieClip(e.target));

}

function validation(ob:MovieClip):void {
        var max:int = ob.cible.length;
        for (var i:int=0; i<max; i++) {
// on regarde parmi les cibles possible
                if (ob.hitTestObject(ob.cible[i])) {
                        trace("touche "+ob.cible[i].name);
                        return;// rien à faire l'objet est sur une cible
                }
        }
        //replacer l'objet
        ob.x = ob.xDep;
        ob.y = ob.yDep;
}

La seule chose un peu bizarre pour toi peut-être c'est le true ici
stage.addEventListener(MouseEvent.MOUSE_UP, lache,true);

• un clic sur la scène, tout bête, déclenche une erreur : on passe la scène à validation
donc je décide de n'écouter que les événements diffusés par ses enfants en passant ce troisième paramètre à true
(c'est expliqué ici en tuto, ici en vidéo)

• l'autre souci c'est si on clique sur le clip sol ou plateau… pareil : c'est sol ou plateau qu'on passe à validation.
La solution ici, c'est de les rendre "insensibles" à la souris :

plateau.mouseEnabled = false;
casier.mouseEnabled = false;
sol.mouseEnabled = false;

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

#14 pbonnefo

    Ceinture Jaune

  • Members
  • PipPip
  • 17 messages

Posté 15 November 2012 - 10:10 AM

Bonjour Community,

J'avoue comprendre à la lecture de ton post ton procédé, mais dès qu'il s'agit de le plaquer sur mon fla, c'est une autre paire de manche.
Peux-tu m'aider s'il te plait ?

d'avance merci

Fichier(s) joint(s)



#15 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 15 November 2012 - 10:17 AM

Avec plaisir si tu me dis ce que tu as essayé ce que tu attendais et ce que ça n'a pas donné :)
pose ici les morceaux de code qui te résistent en utilisant les balises de code (chevrons ds la barre d'outil)

Je n'ouvre les sources d'autrui que par extraordinaire ;)
Le savoir est le seul bien qui s'accroit quand on le partage
une tartine de tutos

#16 pbonnefo

    Ceinture Jaune

  • Members
  • PipPip
  • 17 messages

Posté 15 November 2012 - 10:50 AM

En fait j'ai l'impression qu'il manque du code au début pour indiquer qu'il y a une bibliothèque à considérer. Voilà comment je l'ai adapté:



// la propriété cible de chaque clip référence les cibles possibles ds un tableau
objets.Bouteille.cible = [Container];
objets.Bocal.cible = [Container];
objets.Yaourt.cible = [Jaune];
objets.Blister.cible = [Jaune];
objets.Canette.cible = [Jaune];
objets.Conserve.cible = [Jaune];
objets.Aerosol.cible = [Jaune];
objets.BouteilleEau.cible = [Jaune];
objets.Epluchures.cible = [Compost];
objets.Filtre.cible = [Compost];
objets.Trognon.cible = [Compost];
objets.Feuille.cible = [Compost];
objets.Feutre.cible = [Noire];
objets.Chips.cible = [Noire];
objets.Arrosoir.cible = [Decheterie];
objets.Sac.cible = [Decheterie];
objets.SecheCheveux.cible = [Decheterie];
objets.Frigo.cible = [Decheterie];
Container.mouseEnabled = false;
Jaune.mouseEnabled = false;
Noire.mouseEnabled = false;
Compost.mouseEnabled = false;
Decheterie.mouseEnabled = false;
objets.addEventListener(MouseEvent.MOUSE_DOWN, attrape);
stage.addEventListener(MouseEvent.MOUSE_UP, lache,true);
function attrape(e:MouseEvent):void {
            e.target.startDrag();
            e.target.xDep = e.target.x;
            e.target.yDep = e.target.y;
}
function lache(e:MouseEvent):void {
            stopDrag();
            validation(MovieClip(e.target));
}
function validation(ob:MovieClip):void {
            var max:int = ob.cible.length;
            for (var i:int=0; i<max; i++) {
  }
 
// on regarde parmi les cibles possible
                            if (ob.hitTestObject(ob.cible[i])) {
                                       
                                            return;// rien à faire l'objet est sur une cible
                            }
            }
            //replacer l'objet
            ob.x = ob.xDep;
            ob.y = ob.yDep;


 


J'ai ensuite un bon paquet de message d'erreur m'informant d'accès à la propriété non déféni.

#17 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 15 November 2012 - 18:19 PM

ah oui… si tu n'as qu'une cible par "clip", pas besoin de tableau.

objets.Bouteille.cible = Container;

serait amplement suffisant


function lache(e:MouseEvent):void {
stopDrag();
validation(MovieClip(e.target));
}

on est d'accord que tu passes à la fonction validation un clip, celui qui a diffusé le "UP", dit autrement : celui que tu viens de lâcher. Il suffit de vérifier s'il se superpose à sa cible :

function validation(leClip:MovieClip):void {
if (leClip.hitTestObject(leClip.cible){
/// Et voilà suite du traitement


ce qui serait plus économe en dactylo et construction si chaque objet n'a qu'une cible, serait de :
• mettre dans un même conteneur tous les objets destinés à la même poubelle.
• associer une variable (poubelle par exemple) à chaque conteneur

• la même fonction de rappel (Mouse_Down) pour chacun des conteneurs. Elle valorise "à la volée" (dynamiquement) la variable cible du clip saisi

• la fonction de rappel lache est écoutée sur la scène, en phase de capture (pour avoir la paix si on clic ds le vide sur la scène ;)) elle vérifie si le clip laché est sur sa cible ou non.

Du coup, en construction tu n'as pas à nommer chacun de clips, seulement leurs conteneurs, et tu n'as que quelques lignes de code.



- Afficher le SWF -
Fichier joint  demoPoubelles.swf   1.52 Ko   15 téléchargement(s)



// trois contenants, pour les cercles, carrés et étoiles, une même fonction de rappel
contCercles.addEventListener(MouseEvent.MOUSE_DOWN,qdEnfonce);
contCarres.addEventListener(MouseEvent.MOUSE_DOWN,qdEnfonce);
contEtoiles.addEventListener(MouseEvent.MOUSE_DOWN,qdEnfonce);
// la poubelle associée à chaque contenant
contCarres.poubelle=poubCarre;
contCercles.poubelle=poubCercle;
contEtoiles.poubelle=poubEtoile;

stage.addEventListener(MouseEvent.MOUSE_UP, qdLache,true);

function qdEnfonce(me:MouseEvent) {
        trace("target : "+me.target.name);
        trace("currentTarget : "+me.currentTarget.name);
        me.target.startDrag();
        me.target.cible=me.currentTarget.poubelle;// la cible du clip est la poubelle du contenant
}

function qdLache(me:MouseEvent) {
        trace("lache target : "+me.target.name);
        trace("lache currentTarget : "+me.currentTarget.name);

        stopDrag();
        if (me.target.hitTestObject(me.target.cible)) {
                var conteneur:MovieClip=MovieClip(me.target.parent);
                conteneur.removeChild(MovieClip(me.target));
        }
}
 

sources CS3

et ça fait un zoli petit exo pour le tout dernier tuto sur ce thème justement. Hop ! Je te le fauche ;)

merci ! :)

Fichier(s) joint(s)


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

#18 pbonnefo

    Ceinture Jaune

  • Members
  • PipPip
  • 17 messages

Posté 19 November 2012 - 11:44 AM

Un GRAND merci à toi, j'y suis tout à fait arrivé avec ta méthode comme tu peux le voir sur mon swf joint.
j'ai ajouté une anim' en cas de bonne réponse ce qui pimente un peu le jeu.
comment pourrais-je animer les mauvaises réponses et la fin du jeu ?

J'avais envisagé d'adapter ce fragment de code que j'avais utilisé dans une première version, mais je ne suis pas sûr qu'il aille :

function test_match(target,obj) {
// Teste si les paires vont ensemble
if (dict[target] == obj)
{
  // Une paire va ensemble
  hits = hits+1;
  gotoAndPlay(2)


  // Rend l´objet transparent
  obj.alpha = 0;
  // Supprime l´écouteur d´événement. L´objet ne peut plus être bougé
  obj.removeEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
  obj.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
  // Vérifie si le jeu est fini
  if (hits == max)
  {
                  // Ici nous pouvons jouer une animation
   gotoAndPlay(61);
  }
}
else
{
  gotoAndPlay(32);
}
}
 

Fichier(s) joint(s)



#19 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 19 November 2012 - 14:38 PM

ah bah oui, j'aurais du te donner le lien vers le tuto qui héberge consigne et soluce ! Ici le chapitre qui t'intéresse. Tu verras qu'il s'agit d'une poignée de lignes ;)

Pas mal du tout la façon dont tu t'y es pris ! :)
Passer le clip en alpha =0 pour le perdre de vu et penser à ôter ses écouteurs, très bien comme début.
Tant qu'à le perdre de vue un visible= false aurait été plus revendicable, et le top du top eût été de le supprimer ;)

Je pense que tu as été très courageux et que tu as beaucoup plus bossé que nécessaire. Sans doute as tu nommé toutes les instances, (puisque tu leur associes un écouteur ; vu que tu le supprimes c'est ce que j'en déduis… ;) puis tu es passé par un Dictionary (et re que je dactylographie allègrement).

Il n'empêche ça le fait.

Seul bémol, pourquoi utiliser le scénario de l'animation plutôt que celui de l'instance à animer ?
Je veux dire :
if (hits == max){
    // Ici nous pouvons jouer une animation
   gotoAndPlay(61);// leChapeau.play() ça aurait été mieux
}


NB : je risque d'être moins là pendant un moment…
Le savoir est le seul bien qui s'accroit quand on le partage
une tartine de tutos



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

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