Créer un jeu glisser-déposer (Drag & Drop)

Le jeu de glisser-déposer est parfait pour engager vos utilisateurs et leur partager des contenus éducatifs. Comme dans un puzzle, les utilisateurs doivent faire glisser des objets et les positionner au bon endroit. Dans cet exemple, les utilisateurs doivent trouver les animaux qui vivent dans la forêt et les replacer dans leur environnement naturel.

[TRANSCRIPT EN FRANCAIS] 

 Dans cette vidéo, nous allons voir comment créer un jeu de glisser-déposer. Un jeu de glisser-déposer est parfait pour faire participer vos utilisateurs et partager des contenus éducatifs. Comme dans un puzzle, les utilisateurs doivent faire glisser des objets et les positionner au bon endroit.  Dans cet exemple, les utilisateurs doivent trouver les bons animaux qui vivent dans la forêt et les replacer dans leur environnement naturel.  

Tout d'abord, importons les images des animaux et de la forêt. Insérez les images dans votre écran et concevez l'interface utilisateur statique.

Maintenant, transformons les animaux en objets mobiles. Sélectionnez un animal, allez dans le menu Mise en page en haut et choisissez Ajouter Drag & Drop. Il s'agit d'un raccourci : au lieu d'ajouter un composant Drag & Drop et de copier-coller le contenu à l'intérieur, vous pouvez transformer automatiquement n'importe quel objet en un Drag & Drop.

Renommez ce composant avec le nom de l'animal et dans les propriétés, activez l'option Déplacement. 

Faites de même avec les autres animaux : transformez les images statiques en composant Drag & Drop et rendez-les déplaçables en activant l'option Déplacement.

Vous pouvez maintenant déplacer les animaux mais, comme vous pouvez le constater, ils reviennent automatiquement à leur position initiale. 

Créons la zone où ils peuvent être déposés. Pour ce faire, sélectionnez l'image de la forêt et faites la même chose : dans le menu supérieur, choisissez Ajouter un Drag & Drop. Dans les propriétés, choisissez maintenant Zone de dépôt. Vous devez également sélectionner les objets mobiles qui peuvent y être déposés. Dans cet exemple, sélectionnez tous les animaux sauf le poisson. Nous aurions également pu accepter que le poisson déclenche automatiquement une pop-up pour informer qu'il s'agit d'une mauvaise réponse. 

Autre conseil : dans la liste des objets, assurez-vous que la Forêt est derrière les animaux en termes de position. Sinon, les animaux seront placés derrière la forêt. 

Voyons le résultat ! Super : les animaux peuvent être glissés et déposés au-dessus de l'image de la forêt. 

Cependant, les animaux peuvent être déposés n'importe où par l'utilisateur et cela peut sembler un peu désordonné. Nous aurions pu créer de nombreuses zones de dépôt mais cela aurait été déroutant pour l'utilisateur. Positionnons-les automatiquement au bon endroit pour que l'image globale soit belle.  

Pour cela, nous ferons disparaître automatiquement l'animal mobile après qu'il ait été déposé et nous utiliserons le Multi-état pour cacher ou afficher chaque animal à la bonne position.  

Créons un composant Multi-état par animal car chaque animal est indépendant et nous ne connaissons pas l'ordre dans lequel ils seront placés. 

Insérez un Multi-état au-dessus de la forêt et renommez-le avec le nom de l'animal. Dans le premier état, il n'y a rien car l'animal est caché. Créez un deuxième état et à l'intérieur ajoutez l'animal à afficher. 

Sortez du multi-état en utilisant le fil d'Ariane. Pour éviter toute erreur, vous pouvez le verrouiller une fois qu'il est terminé en utilisant l'icône de verrouillage dans la liste des objets. . 

Maintenant, créons l'action pour l'afficher une fois que le cerf mobile a été déposé. Sélectionnez la zone de dépôt de la forêt et cliquez sur Actions. Comme vous pouvez le voir, il y a 3 types d'événements déclencheurs par objet mobile : quand il est déposé, quand il entre et sort de la zone. Choisissez l'événement Dropping Deer et l'action Interagir avec un composant > Multi-state > Go to state 2 Visible.

Bravo, ça marche ! Cependant, l'objet glissable est toujours visible. Cachons-le une fois qu'il a été déposé. 

Pour ce faire, au lieu d'avoir une image statique, transformons-la en un composant multi-états qui affiche ou cache l'image. 

Allez dans le composant Drag & Drop. Sélectionnez l'image et choisissez le menu Mise en page > Ajouter Multi-état. Il s'agit d'un autre raccourci permettant de transformer automatiquement n'importe quel objet en un composant multi-états. Renommez-le et entrez dedans. Dans le premier état, il y a l'image de l'animal. Créez un second état dans lequel elle est cachée : vous pouvez soit supprimer l'image, soit la conserver avec une opacité de 0%.

Créez l'action qui la fera disparaître dès qu'elle sera déposée. Sélectionnez à nouveau la zone de dépôt de la forêt et choisissez le même événement : Dépôt Cerf. Ajoutez une autre action qui est Interagir avec un composant et allez à l'intérieur de l'objet glissable Cerf pour sélectionner le multi-état. Choisissez le deuxième état Hidden. 

Parfait ! Une fois que le cerf est lâché, il disparaît automatiquement et s'affiche correctement dans l'image. 

Faites de même avec les autres animaux. Transformez tous vos objets mobiles en multi-états composés de 2 états : l'état par défaut sera visible, et le second sera caché.

Préparez les Multi-états qui affichent les animaux au bon endroit dans la forêt. Vous pouvez simplement copier-coller l'autre composant. A l'intérieur c'est l'inverse : dans le premier état, l'animal est caché et dans le second il est affiché. Ajoutez toutes les actions liées à la zone de dépôt Forêt. 

Et voilà ! Une fois déposé, l'animal est automatiquement affiché au bon endroit. Tous les animaux peuvent être déposés dans la forêt, à l'exception des poissons qui ne vivent pas dans la forêt.

Si vous souhaitez mettre en évidence la forêt lorsqu'un animal est placé au-dessus d'elle, vous devez également transformer l'image de la forêt en un multi-état. Dans ce deuxième état, vous pouvez par exemple ajouter une bordure.

Utilisez l'événement Entre pour afficher cet état et ajoutez une autre action pour revenir à l'état initial lorsque l'animal est déposé. 

Si vous voulez réinitialiser le jeu, ajoutez un bouton et choisissez l'action Interagir avec un composant. Sélectionnez la zone de chute et choisissez l'action Supprimer tous les glissables. 

Cependant vous devez ajouter d'autres actions pour changer les états des multi-états pour afficher à nouveau l'animal et revenir à l'état initial de la forêt.