Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. 2D Games
Code

Crafty au-delà des bases: Evènements de souris et tactiles

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called Crafty Beyond the Basics.
Crafty Beyond the Basics: Sprites

French (Français) translation by fredpiK (you can also view the original English article)

Dans la dernière série sur Crafty, vous avez appris les différentes façons de déplacer les élèments en utilisant le clavier. Même si un clavier peut suffire dans une grande variété de jeux, certaines situations requièrent le contrôle des évènements de souris pour rendre le jeu encore plus plaisant. Par exemple, supposons un jeu où des ballons apparaissent de manière aléatoire sur l'écran. Si l'utilisateur doit cliquer sur les ballons pour marquer des points, alors vous avez besoin d'un composant Mouse.

De la même manière, si vous developpez des jeux pour mobiles, le composant Keyboard ne vous sera d'aucune utilité. Dans ce cas, vous devrez compter sur le composant Touch pour créer vos jeux. Dans ce tutoriel, vous allez apprendre les deux composants Mouse et Touch de Crafty.

Le composant Mouse

Le composant Mouse est utilisé pour ajouter des événements de souris basiques aux entités. Voici une liste de tous les événements inclus dans ce composant :

  • MouseOver : Cet événement est déclenché lorsque la souris passe à l’intérieur d’une entité.
  • MouseOut : Cet événement est déclenché lorsque la souris quitte une entité.
  • MouseDown : Cet événement est déclenché lorsque vous appuyez sur le bouton de la souris sur une entité.
  • MouseUp : Cet événement est déclenché lorsque le bouton de la souris est relâché à l’intérieur d’une entité.
  • Click : Cet événement est déclenché lorsque l’utilisateur clique sur le bouton de la souris à l’intérieur d’une entité.
  • DoubleClick : Cet événement est déclenché lorsque le bouton de la souris est cliqué deux fois sur une entité.
  • MouseMove : Cet événement est déclenché lorsque la souris se déplace à l’intérieur d’une entité.

N’oubliez pas que les événements de souris seront déclenchés par une entité uniquement si vous leur avez ajouté le composant Mouse. Un code qui lie l’événement MouseMove à une boîte est démontré ci-dessous :

Une fois que la zone a été liée à l’événement MouseMove, chaque mouvement de la souris sur la boîte la fait tourner de 1 degré. La méthode .origin() est utilisée pour définir le centre de rotation de notre boîte. Elle peut également prendre d’autres valeurs telles que "top left", "bottom right", etc..

Essayez de déplacer le curseur dans et hors de la boîte dans la démo. Maintenez le bouton de la souris à l’intérieur de la boîte pour déclencher l’événement MouseDown et changer la couleur de la boîte en rouge.

Un objet MouseEvent est également passé comme paramètre à la fonction de rappel (callback) de tous ces événements de souris. Il contient toutes les données associées à cet événement de souris spécifique.

Vous pouvez également savoir quel bouton de la souris a été cliqué par l’utilisateur en utilisant la propriété mouseButton. Par exemple, un clic gauche peut être détecté à l’aide de Crafty.mouseButtons.LEFT. De même, un clic du bouton du milieu peut être détecté à l’aide de Crafty.mouseButtons.MIDDLE.

Composant MouseDrag

Le composant MouseDrag fournit une entité avec les différents événements de glisser-déposer (drag-and-drop). Toutefois, l’ajout de ces événements n'a pas de sens si l’entité elle-même ne peut pas être glissée et déposée. Vous pouvez ajouter des capacités de drag-and-drop à une entité en utilisant le composant Draggable. Ce composant surveille les événements du composant MouseDrag et déplace l’entité correspondante en conséquence. Le composant MouseDrag est automatiquement ajouté à toute entité avec le composant Draggable.

Le composant Draggable possède trois méthodes : .enableDrag(), .disableDrag() et .dragDirection(). Les deux premières méthodes activent et désactivent respectivement le glisser sur une entité. La troisième méthode est utilisée pour définir la direction du glissement.

Par défaut, l’entité se déplacera dans la même direction que le curseur. Toutefois, vous pouvez limiter le mouvement de l’entité à la verticale à l’aide de this.dragDirection ({x : 0, y : 1}). De même, vous pouvez forcer une entité à se déplacer horizontalement à l’aide de this.dragDirection ({x : 1, y:0}).

Vous pouvez également spécifier la direction directement en degrés. Par exemple, pour déplacer un élément suivant un angle de 45 degrés, vous pouvez simplement utiliser this.dragDirection(45) au lieu de this.dragDirection ({x : 1, y : 1}).

En plus de glisser / déposer les éléments, il est également nécessaire de savoir quand le glisser a commencé et s'est arrêté. Cela est possible en utilisant les événements StartDrag et StopDrag. Il y a également un événement Dragging qui est déclenché lorsqu'une entité est déplacée.

Voici le code pour faire glisser le cadre rouge dans la démo ci-dessous :

Après avoir réglé la largeur, la hauteur et la position de la boîte, j’ai utilisé .dragDirection(0) pour restreindre les mouvements de notre boîte dans le sens horizontal. J’ai également utilisé la méthode .bind() pour lier l’entité aux méthodes de Dragging et StopDrag.

Le changement de la couleur au noir indique à l’utilisateur que l’entité est en train d'être déplacée. Vous pourriez également utiliser l’événement StartDrag au lieu de Dragging parce que la couleur de l’entité ne doit être changé qu'une fois. L’événement Dragging est plus approprié lorsque vous devez continuellement changer ou surveiller une propriété de l’entité à déplacer. Par exemple, vous pouvez utiliser le code suivant pour désactiver le glisser sur la boîte lorsqu’elle a atteint l’endroit désiré.

Le composant Touch

Si vous avez besoin d’accéder aux événements tactiles pour une entité, vous pouvez utiliser le composant Touch. Ce composant vous donne accès à quatre différents événements :

  • TouchStart : Cet événement se déclenche lorsqu’on appuie sur une entité.
  • TouchMove : Cet événement est déclenché lorsqu’un doigt est deplacé sur une entité.
  • TouchCancel : Cet événement est déclenché lorsque quelque chose interrompt l’événement tactile.
  • TouchEnd : Cet événement est déclenché lorsqu’un doigt est relevé sur une entité, ou qu'il quitte cette entité.

Les trois premiers événements ont accès à l’objet TouchEvent qui contient toutes les informations sur le contact.

Certains jeux ou projets peuvent nécessiter que vous détectiez les touches multiples. Ceci peut être réalisé en activant le multi-touch à l’aide de Crafty.multitouch(true). En passant le paramètre true ou false à la méthode, vous activez ou désactivez le multi-touch .

Avant d’utiliser le composant Touch dans vos projets, vous devez savoir qu’il est actuellement incompatible avec le composant Draggable.

Conclusion

À l’issue de ce tutoriel, vous devriez être capable de gérer correctement les différents événements de souris ou créer facilement des jeux basés sur le glisser-déposer. N’oubliez pas que dans ce tutoriel, j’ai utilisé Crafty version 0.7.1 et les démos peuvent ne pas fonctionner avec d’autres versions de la bibliothèque.

Dans le prochain tutoriel, vous apprendrez à utiliser les feuilles de sprite pour animer les différents personnages d'un jeu dans Crafty.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.