Share
Dans le dernier tutoriel, vous avez découvert les entités de Crafty et comment les manipuler à l'aide de différentes méthodes. Dans ce tutoriel, vous apprendrez différents composants qui vous permettront de déplacer différentes entités à l’aide du clavier..
Crafty a trois composants différents pour déplacer des éléments. Ceux-ci sont Twoway, Quatre chemins, et Multiway. Ce tutoriel va vous présenter tous ces composants. En fin de compte, vous en apprendrez plus sur les Clavier composant et diverses méthodes qui lui sont associées.
le Twoway composant permet à une entité de se déplacer à gauche ou à droite à l’aide des touches de direction ou de A et D. Elle permet également à l’entité de sauter à l’aide de la flèche vers le haut ou de la touche W. Vous devrez ajouter un La gravité composant à vos entités pour les faire sauter.
le .twoway () La méthode accepte deux arguments. Le premier détermine la vitesse de l'entité dans la direction horizontale, tandis que le second argument détermine la vitesse de saut de l'entité. Si vous omettez le deuxième argument, la valeur de la vitesse de saut sera égale à deux fois la vitesse dans le sens horizontal.
le Quatre chemins Ce composant permettra à une entité de se déplacer dans quatre directions différentes en utilisant soit les touches fléchées, soit les touches W, A, S, D. .quatre chemins() La méthode n'accepte qu'un seul argument, ce qui déterminera la vitesse de l'entité donnée dans toutes les directions..
Un inconvénient majeur de la Quatre chemins composant est qu'il ne vous permet pas de définir des vitesses différentes pour les directions horizontale et verticale.
D'autre part, le Multiway composant vous permet de définir la vitesse dans chaque axe individuellement. Il vous permet également d’affecter différentes clés pour déplacer l’entité dans différentes directions. Le premier argument de la .multiway () méthode est la vitesse de notre entité. Le second argument est un objet pour déterminer quelle clé déplacera l'entité dans quelle direction.
Les directions sont spécifiées en degrés. 180 est à gauche, 0 à droite, -90 en haut et 90 en bas. Voici quelques exemples:
blackBox.multiway (x: 150, y: 75, W: -90, S: 90, D: 0, A: 180); orangeBox.multiway (150, I: -90, K: 90, L: 0, J: 180); purpleBox.multiway (150, Y: -45, G: -135, B: 135, H: 45);
Le code ci-dessus définit la vitesse de la boîte noire égale à 150 dans le sens horizontal et à 75 dans le sens vertical. La boîte orange se déplace à une vitesse de 150 dans toutes les directions, mais différentes touches lui ont été attribuées. La boîte violette ne se déplace pas strictement horizontalement ou verticalement mais à un angle de 45 degrés. La vitesse ici est en pixels par seconde.
En gros, vous pouvez assigner n'importe quelle touche à n'importe quelle direction en utilisant le bouton Multiway composant. Cela peut être très utile lorsque vous souhaitez déplacer plusieurs entités indépendamment.
Ce composant a aussi un .la vitesse() Cette méthode peut être utilisée pour modifier la vitesse d’une entité ultérieurement. Vous pouvez également désactiver les touches de contrôle à tout moment en utilisant le bouton .disableControl () méthode.
Les trois composants des sections précédentes vous permettent de déplacer une entité à l'aide de clés différentes. Cependant, vous voudrez peut-être plus de contrôle sur ce qui se passe lorsque vous appuyez sur une touche. Par exemple, vous voudrez peut-être agrandir le lecteur une fois qu'une touche spécifique est enfoncée ou rendre le lecteur plus puissant une fois qu'une autre touche est enfoncée. Ceci peut être réalisé en utilisant le Clavier composant.
Ce composant vous donne également accès à la .isDown (String keyName / KeyCode) méthode, qui renverra true ou false selon que la touche enfoncée a la valeur donnée KeyName ou Code clé.
Crafty a également deux événements de clavier différents, Touche Bas et KeyUp. Vous pouvez lier ces événements à n’importe quelle entité de votre jeu sans utiliser le Clavier composant. le Touche Bas événement est déclenché chaque fois que le DOM touche Bas événement se produit. De même, le KeyUp événement est déclenché chaque fois que le DOM keyup événement se produit.
Accentsconagua
blackBox.bind ('KeyDown', function () if (this.isDown ('L')) this.w + = 5;); orangeBox.bind ('KeyDown', fonction (e) if (e.key == Crafty.keys.K) this.h + = 5;);Dans le code ci-dessus, le boîte noire déjà eu le Clavier composant. Cela nous a permis d'utiliser le .est éteint() méthode pour déterminer la touche appuyée.
Essayez d’appuyer sur L et K dans la démo suivante pour augmenter la largeur et la hauteur des deux cases, respectivement..
Il est très facile d'ajouter du texte à votre jeu en utilisant Crafty. Tout d'abord, vous devez créer une entité avec le Texte composant. Ensuite, vous pouvez ajouter du texte à votre entité à l'aide de la touche .texte() méthode, qui accepte une chaîne en tant que paramètre.
L’emplacement du texte peut être contrôlé à l’aide de la touche .attr () méthode pour définir la valeur de X et y coordonnées. De même, la couleur du texte peut être spécifiée à l’aide de la touche .textColor () méthode. Quelques autres propriétés comme le Taille, poids, et famille de la police peut être défini en utilisant le .textFont () méthode. Voici un exemple:
var playerName = Crafty.e ('2D, DOM, Texte') .attr (x: 10, y: 10); playerName.text ('ZombieHunter'); playerName.textColor ('rouge'); Comme je l'ai mentionné plus tôt, le .texte() Cette méthode nécessite que vous fournissiez une chaîne en tant que paramètre. Cela signifie que si le score du jeu est un nombre, vous devrez le convertir en chaîne pour le .texte() méthode pour le rendre.
La plupart des propriétés et méthodes 2D fonctionneront sans problème avec le Texte composant. Par exemple, vous pouvez le faire pivoter et le déplacer facilement. Cependant, il y a deux choses que vous devez garder à l'esprit. Le style du texte fonctionne mieux lorsqu'il est rendu à l'aide du DOM. Lors du rendu sur Canvas, la largeur et la hauteur de l'entité de texte seront définies automatiquement.
En utilisant les connaissances de ce tutoriel et du dernier, vous devriez maintenant être en mesure de déplacer différentes entités à l’aide du clavier. Vous pouvez également modifier l’apparence du joueur principal et d’autres entités en fonction des différentes touches enfoncées..
Si vous avez des questions sur ce tutoriel, faites-le moi savoir dans les commentaires..
