Share
Dans la dernière série Crafty, vous avez découvert différentes manières de déplacer des éléments à l’aide du clavier. Bien qu'un clavier puisse vous aider à créer une variété de jeux, certaines situations vous obligent à contrôler différents événements de souris pour rendre le jeu plus agréable. Par exemple, considérons un jeu dans lequel des ballons apparaissent à des endroits aléatoires sur l'écran. Si l'utilisateur doit cliquer sur les bulles pour marquer des points, vous aurez certainement besoin d'un composant Souris..
De même, le Clavier composant ne sera d'aucune utilité lorsque vous développez des jeux pour appareils mobiles. Dans ce cas, vous devrez utiliser le composant Touch pour créer vos jeux. Dans ce tutoriel, vous apprendrez à la fois les composants Mouse et Touch dans Crafty..
le Souris composant est utilisé pour ajouter des événements de base de la souris aux entités. Voici une liste de tous les événements inclus dans ce composant:
N'oubliez pas que les événements de souris ne seront déclenchés sur une entité que si vous avez ajouté le paramètre Souris composant à eux. Voici un code qui lie le MouseMove événement à la boîte dans la démo ci-dessous:
Accentsconagua
var Box = Crafty.e ("2D, toile, couleur, souris") .attr (x: 200, y: 100, w: 200, h: 200). couleur ("noir") .origin ("centre ") .bind ('MouseMove', function () this.rotation + = 1;);Après que la boîte a été liée à la MouseMove événement, chaque mouvement de la souris sur la boîte la fera pivoter de 1 degré. le .origine() Cette méthode a été utilisée pour définir le point de rotation de notre boîte au centre. Cela peut aussi prendre d’autres valeurs comme "en haut à gauche", "en bas à droite", etc.
Essayez de déplacer le curseur dans et hors de la boîte dans la démo. Maintenez le bouton de la souris enfoncé dans la boîte pour déclencher le Souris vers le bas événement et changer la couleur de la boîte en rouge.
UNE MouseEvent object est également passé en tant que paramètre à la fonction de rappel de tous ces événements de souris. Il contient toutes les données liées à cet événement de souris spécifique..
Vous pouvez également vérifier quel bouton de la souris a été cliqué par l'utilisateur à l'aide du bouton bouton de la souris propriété. Par exemple, un clic gauche peut être détecté en utilisant Crafty.mouseButtons.LEFT. De même, un clic du bouton central peut être détecté à l'aide de Crafty.mouseButtons.MIDDLE.
le MouseDrag composant fournit une entité avec différents événements de souris par glisser-déposer. Cependant, l'ajout de ces événements n'aura aucun sens si l'entité elle-même ne peut pas être glissée et déposée. Vous pouvez ajouter des capacités de glisser-déposer à une entité en utilisant le Glissable composant. Ce composant écoute les événements de la MouseDrag composant et déplace l'entité donnée en conséquence. le MouseDrag composant est automatiquement ajouté à toute entité avec le Glissable composant.
le Glissable composant a trois méthodes: .enableDrag (), .disableDrag (), et .dragDirection (). Les deux premières méthodes activent et désactivent le glissement sur une entité, respectivement. La troisième méthode est utilisée pour définir le sens du glissement.
Par défaut, l'entité se déplacera dans la direction du déplacement du curseur. Cependant, vous pouvez limiter le mouvement de l'entité à une direction verticale en utilisant this.dragDirection (x: 0, y: 1). De même, vous pouvez forcer une entité à se déplacer uniquement dans une direction horizontale en utilisant 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 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 des éléments, il est également nécessaire de savoir quand la traînée a commencé et s'est arrêtée. Ceci peut être accompli en utilisant StartDrag et StopDrag événements. Il y a aussi Glisser événement qui est déclenché pendant le glissement d'une entité.
Voici le code pour faire glisser la boîte rouge dans la démo ci-dessous:
var hBox = Crafty.e ("2D, toile, couleur, déplaçable") .attr (x: 50, y: 50, w: 50, h: 50) .color ("rouge") .dragDirection (0) .bind ('Glisser', fonction (evt) this.color ("noir");) .bind ('StopDrag', fonction (evt) this.color ("rouge"););Après avoir défini la largeur, la hauteur et la position de la boîte, j’ai utilisé .dragDirection (0) restreindre le mouvement de notre boîte dans la direction horizontale. J'ai aussi utilisé le .lier() méthode pour lier l'entité à la Glisser et StopDrag méthode.
Le passage de la couleur au noir indique à l'utilisateur que l'entité est en train de glisser. Vous pouvez aussi utiliser le StartDrag événement au lieu de Glisser parce que la couleur de l'entité n'a besoin d'être changée qu'une seule fois. le Glisser L'événement est plus approprié lorsque vous devez modifier ou surveiller en permanence une propriété de l'entité glissée. Par exemple, vous pouvez utiliser le code suivant pour désactiver le glissement sur la boîte une fois qu'elle a atteint l'emplacement souhaité..
hBox.bind ('Glisser', fonction (evt) this.color ("noir"); if (this.x> 300) this.disableDrag (););Si vous devez accéder à des événements tactiles pour une entité, vous pouvez utiliser le Toucher composant. Ce composant vous donne accès à quatre événements différents:
Les trois premiers événements ont accès à la TouchEvent objet, qui contient toutes les informations sur le toucher.
Certains jeux ou projets peuvent nécessiter la détection de multiples contacts. Ceci peut être réalisé en activant le multi-touch en utilisant Crafty.multitouch (true). Passer cette méthode vrai ou faux allume et éteint le multi-touch.
Avant d'utiliser le Toucher composant de vos projets, sachez qu’il est actuellement incompatible avec le Glissable composant.
Après avoir terminé ce didacticiel, vous devriez maintenant être en mesure de gérer correctement différents événements de souris ou de créer facilement des jeux basés sur le glisser-déposer. N'oubliez pas que j'ai utilisé la version 0.7.1 de Crafty dans ce tutoriel et que les démos risquent de ne pas fonctionner avec d'autres versions de la bibliothèque..
Dans le prochain tutoriel, vous apprendrez à utiliser des feuilles de sprite pour animer différents personnages de jeu dans Crafty..
