Débuter avec Crafty Entités

Dans le dernier tutoriel, vous avez appris les bases des entités et en quoi elles sont la pierre angulaire de votre jeu. Dans ce tutoriel, vous irez au-delà des bases et approfondirez votre connaissance des entités..

Entités et leurs composants

Chaque entité est composée de différents composants. Chacun de ces composants ajoute sa propre fonctionnalité à l'entité. Crafty propose de nombreux composants intégrés, mais vous pouvez également créer vos propres composants personnalisés à l'aide de Crafty.c ().

Vous avez appris quelques composants de base comme 2D, Toile, Couleur, et Quatre chemins dans le premier tutoriel. Commençons par créer une autre entité utilisant ces composants:

var playerBox = Crafty.e ("2D, toile, couleur, à quatre") .attr (x: 50, y: 50, w: 50, h: 50). couleur ("noir"). à quatre (200) ;

Lorsque vous avez beaucoup d'entités avec différents composants, il peut s'avérer nécessaire de savoir si une entité donnée est associée à un composant spécifique. Ceci peut être accompli en utilisant le .a() méthode.

De même, vous pouvez ajouter des composants à une entité en utilisant .addComponent (). Pour ajouter plusieurs composants à la fois, vous pouvez les transmettre sous forme de chaîne avec différents composants séparés par des virgules ou transmettre chaque composant sous forme d'argument différent. Rien ne se passera si l'entité a déjà le composant que vous essayez d'ajouter.. 

playerBox.addComponent ("Jumper, Gravity, Collision"); playerBox.addComponent ("Jumper", "Gravity", "Collision");

Vous pouvez également supprimer des composants d'une entité à l'aide de .removeComponent (composant de chaîne [, soft]). Cette méthode prend deux arguments. Le premier est le composant que vous souhaitez supprimer, et le second argument détermine si l'élément doit être supprimé de manière souple ou non. Enlèvement doux ne causera que .a() revenir faux lorsque demandé pour ce composant spécifique. Un retrait dur supprimera toutes les propriétés et méthodes associées à ce composant. 

Par défaut, tous les composants sont supprimés. Vous pouvez définir le deuxième argument sur faux enlever dur un composant. 

Définition de valeurs pour différents attributs

Vous aurez probablement besoin de définir différentes valeurs pour des attributs spécifiques de toutes les entités de votre jeu. Par exemple, une entité qui représente la nourriture du joueur principal dans le jeu devrait être différente de celle qui représente le joueur lui-même. De la même manière, une mise sous tension sera différente des entités alimentaires. Crafty vous permet de définir les valeurs de différentes entités d’un jeu séparément ou en même temps en utilisant .attr ().

L'entité principale est actuellement stockée dans le playerBox variable. Vous pouvez donc définir directement la valeur de différentes propriétés à l'aide du code suivant:

playerBox.x = 50; playerBox.y = 50; playerBox.z = 2; playerBox.attr (x: 50, y: 50, z: 2)

le z propriété définit le z-index de différentes entités. Une entité avec plus z la valeur sera dessinée sur une autre avec une valeur inférieure. Gardez à l'esprit que seuls les entiers sont autorisés en tant que valeurs z-index valides.

Créons une entité alimentaire avec une taille plus petite, une position différente et une rotation qui lui est appliquée. La rotation est spécifiée en degrés et l'utilisation d'une valeur négative fait pivoter l'entité dans le sens inverse des aiguilles d'une montre..

var foodBox = Crafty.e ("2D, Toile, Couleur, Nourriture") .attr (x: 150, y: 250, l: 10, h: 10). couleur ("rouge"); foodBox.attr (z: 1, rotation: 45);

Comme vous pouvez le voir dans la démo ci-dessous, il est maintenant facile de distinguer le joueur de la nourriture et celui du joueur principal. Si vous essayez de déplacer le joueur principal au-dessus de la nourriture, vous verrez que la nourriture est maintenant dessinée sous le joueur principal en raison d'un indice z inférieur..

Liaison d'événements à des entités

Vous devrez peut-être réagir à de nombreux événements lors du développement d'un jeu. Par exemple, vous devrez lier l’entité du joueur à un Touche Bas événement si vous souhaitez que sa taille augmente lorsque vous appuyez sur une touche spécifique. Crafty vous permet de lier différentes entités à des événements spécifiques en utilisant le .lier() méthode. Voici un exemple:

playerBox.bind ('KeyDown', fonction (e) if (e.key == Crafty.keys.T) this.alpha = 0.5; if (e.key == Crafty.keys.O) ceci. alpha = 1;);

Dans la démo suivante, essayez de déplacer le lecteur sur la nourriture, puis appuyez sur les touches "T" et "O". Appuyez sur 'T' pour régler l'opacité du lecteur sur 0,5, et appuyez sur 'O' pour rétablir l'opacité à 1.

Associons maintenant un événement de collision à notre joueur afin qu’il grossisse à chaque fois qu’il touche de la nourriture. Nous devrons ajouter une composante de collision au joueur et utiliser le .checkHits () méthode. Cette méthode effectuera des contrôles de collision avec toutes les entités ayant au moins l'un des composants spécifiés lors de .checkHits () a été appelé. 

En cas de collision, un HitOn événement sera déclenché. Il contiendra également des informations pertinentes sur l'événement. UNE HitOff l'événement est également déclenché une fois la collision terminée.

playerBox.checkHits ("Alimentation") .bind ("HitOn", fonction (hitData) this.color ("vert"); this.w = this.w + 3; this.h = this.h + 3; )

La largeur et la hauteur du joueur augmentent chaque fois qu'un coup est touché. Nous pouvons utiliser cet événement pour beaucoup de choses, y compris changer la position de la nourriture ou augmenter le score dans le jeu. Vous pouvez également détruire l'entité alimentaire en utilisant le détruire() méthode une fois le hit a été détecté.

Faire une sélection

Dans la section précédente, nous devions simplement modifier les propriétés d'une seule entité. Cela pourrait être fait facilement en utilisant la variable assignée à chaque entité. Ce n'est pas pratique quand on a affaire à environ 20 entités différentes.

Si vous avez déjà utilisé jQuery, vous connaissez peut-être la façon dont il sélectionne les éléments. Par exemple, vous pouvez utiliser $ ("p") pour sélectionner tous les paragraphes. De même, vous pouvez sélectionner toutes les entités qui ont le même composant commun en utilisant Crafty ("composant"). 

Voici quelques exemples:

// Sélectionne toutes les entités ayant le composant Gravity Crafty ("Gravity"); // Sélectionne toutes les entités ayant un composant DOM ou Canvas Crafty ("Gravity, Jumper"); // Sélectionne toutes les entités qui ont les composants Gravity et Jumper Crafty ("Gravity Jumper");

Une fois que vous avez la sélection, vous pouvez obtenir le nombre d'éléments sélectionnés à l'aide de la propriété length. Vous pouvez également parcourir chacune de ces entités ou lier des événements à toutes en même temps. Le code suivant changera toutes les entités alimentaires dont X la valeur est supérieure à 300 à violet.

Crafty ("Nourriture"). Each (function () if (this.x> 300) this.color ("violet"););

Une fois que vous avez une sélection, vous pouvez utiliser obtenir() pour obtenir un tableau de toutes les entités de la sélection. Vous pouvez également accéder à l'entité à un index spécifique en utilisant get (index).

Dernières pensées

Dans ce didacticiel, vous avez appris à ajouter ou supprimer des composants d’une entité. Vous avez également appris à sélectionner des entités avec un ou plusieurs composants donnés et à manipuler leurs attributs et propriétés un par un. Toutes ces choses seront très utiles lorsque nous voulons manipuler différentes entités sur notre écran en fonction de divers événements..

Si vous avez des questions sur le didacticiel, faites-le moi savoir dans les commentaires..