Share
Jusqu'à présent dans cette série, vous avez appris à manipuler différentes entités et à utiliser le clavier pour les déplacer. Dans cette partie, vous apprendrez à utiliser la boucle du jeu dans Crafty pour rechercher en permanence divers événements et animer différentes entités..
La boucle de jeu dans Crafty est implémentée dans Crafty.timer.step, qui utilise des événements globaux pour communiquer avec le reste des moteurs. La boucle est gérée par requestAnimationFrame lorsqu'elle est disponible. Chaque boucle consiste en un ou plusieurs appels au EnterFrame événement et un seul appel à RenderScene ce qui a pour effet de redessiner chaque couche.
La valeur finale de toutes les propriétés et variables est résolue avant le rendu d'une scène. Par exemple, si vous déplacez votre lecteur de 5 px vers la droite dix fois dans un seul EnterFrame événement, il sera tiré directement 50 px vers la droite en sautant tous les dessins intermédiaires.
Tout ce qui doit évoluer dans votre jeu au fil du temps est finalement lié à la EnterFrame un événement. Vous pouvez utiliser le .lier() méthode pour lier différentes entités à cet événement. Les fonctions liées à cet événement reçoivent également un objet avec des propriétés telles que dt qui détermine le nombre de millisecondes écoulées depuis le dernier EnterFrame un événement.
Vous pouvez utiliser le dt propriété de fournir une expérience de jeu fluide en déterminant dans quelle mesure l'état du jeu doit progresser.
le RenderScene événement est utilisé pour s'assurer que tout ce qui est visible à l'écran correspond à l'état actuel du jeu au dernier EnterFrame un événement. Normalement, vous n’avez pas besoin de lier vous-même cet événement, sauf si vous décidez d’implémenter votre propre calque de rendu personnalisé..
Vous pouvez utiliser le Tween composant lorsque vous souhaitez simplement animer les propriétés 2D d’une entité sur une période donnée. Vous pouvez animer le X, y, w, h, rotation, et alpha propriétés utilisant ce composant. Animons la valeur x et la hauteur des boîtes orange et noires que vous avez créées dans les deux derniers tutoriels..
Voici le code dont vous avez besoin:
blackBox.tween (x: 500, 3000); orangeBox.tween (x: 50, h: 100, rotation: 360, 3000);
Vous avez probablement remarqué que la boîte orange ne tourne pas autour de son centre mais dans son coin supérieur gauche. Vous pouvez changer le centre de rotation en utilisant le bouton .origine() méthode. Il peut accepter deux arguments entiers, qui déterminent le décalage de pixel d'origine dans les axes x et y..
Il accepte également une valeur de chaîne comme argument. La valeur de chaîne peut être une combinaison de centre, haut, bas, milieu, gauche et droite. Par exemple, .origine ("centre") fera tourner l'entité autour de son centre, et .origine ("en bas à droite") fera pivoter l'entité dans le coin inférieur droit.
Vous pouvez mettre en pause ou reprendre tous les tweens associés à une entité donnée à l'aide de la touche .pauseTweens () et .resumeTweens () méthodes. De même, vous pouvez également utiliser .cancelTween () annuler une interpolation spécifique.
le Crafty.timer objet gère tous les ticks du jeu dans Crafty. Vous pouvez utiliser le .FPS () méthode avec cet objet pour obtenir le taux de trame cible. Gardez à l'esprit que ce n'est pas le taux de trame réel.
Vous pouvez également utiliser le .simulateFrames (Nombre d'images [, Nombre timestep]) méthode pour faire avancer l’état du jeu d’un nombre donné d’images. le timestep est la durée pour passer chaque image. S'il n'est pas spécifié, une valeur par défaut de 20 ms est utilisée.
Une autre méthode utile est .étape(), qui fera avancer le jeu en effectuant une étape. Une seule étape peut consister en une ou plusieurs images suivies d'un rendu. Le nombre d'images dépendra de la minuterie steptype. Cette méthode déclenche divers événements tels que EnterFrame et ExitFrame pour chaque image et PreRender, RenderScene, et PostRender événements pour chaque rendu.
Il existe trois modes de steptype: fixé, variable, et semi-fixe. Dans fixé mode, chaque image de Crafty reçoit la même valeur que dt. Cependant, cela steptype peut déclencher plusieurs images avant chaque rendu pour atteindre la vitesse de jeu cible.
Vous pouvez également déclencher une image avant chaque rendu en utilisant le bouton variable mode. Dans ce cas, la valeur de dt est égal au temps écoulé depuis la dernière image.
Finalement, le semi-fixe le mode déclenche plusieurs images par rendu, et le temps écoulé depuis la dernière image est également divisé entre elles.
Si vous avez lu tous les tutoriels de cette série, vous devriez déjà avoir acquis suffisamment de connaissances pour créer un jeu très basique. Dans cette section, vous apprendrez à mettre tout ce que vous avez appris à utiliser et à créer un jeu dans lequel le joueur principal doit manger un morceau de nourriture..
La nourriture sera un carré rouge en rotation. Dès que la nourriture entre en contact avec le lecteur, elle disparaît de l'ancien emplacement et apparaît dans un nouvel emplacement aléatoire. Le joueur peut être déplacé en utilisant A, W, S, D ou les touches fléchées.
Une autre chose à prendre en compte est la position du joueur. Il est censé rester avec les limites de la phase de jeu.
Écrivons d'abord le code de la nourriture:
Accentsconagua
var foodBox = Crafty.e ("2D, toile, couleur, aliment") .attr (x: 150, y: 250, l: 15, h: 15). couleur ("rouge") .origin ("centre ") .bind (" EnterFrame ", function (eventData) this.rotation + = 4;);Par défaut, Crafty aurait utilisé le coin supérieur gauche de l'entité alimentaire pour la faire pivoter. Définir l'origine sur le centre permet de s'assurer que l'entité alimentaire tourne autour de son centre.
var playerBox = Crafty.e ("2D, toile, couleur, quadrilatère, collision") .attr (x: 50, y: 360, l: 50, h: 50). couleur ("noir") .fourway ( 200) .bind ("EnterFrame", fonction (eventData) if (this.x < 0) this.x = 0; if(this.y < 0) this.y = 0; if(this.x > (stageWidth - this.w)) this.x = stageWidth - this.w; if (this.y> (stageHeight - this.h)) this.y = stageHeight - this.h; );L'entité du joueur vérifie l'emplacement actuel du joueur dans chaque cadre et le réinitialise si le joueur tente de sortir de la phase de jeu..
Vous pouvez utiliser un Texte entité pour garder une trace du score. Le score est affiché dans le coin supérieur gauche. le gameScore variable stocke le nombre de fois où le joueur frappe l’entité alimentaire.
var scoreText = Crafty.e ('2D, DOM, Texte') .attr (x: 10, y: 10) .textFont (taille: '25px'); scoreText.text (gameScore.toString ());Maintenant, il vous suffit d'écrire le code pour déplacer les aliments à un autre endroit lorsqu'un hit est détecté. Le code suivant fera exactement cela.
playerBox.checkHits ("Food"). bind ("HitOn", fonction (hitData) foodBox.x = Math.random () * (stageWidth - foodBox.w); foodBox.y = Math.random () * (stageHeight - foodBox.h); gameScore + = 1; scoreText.text (gameScore.toString ()););N'oubliez pas que vous soustrayez la largeur et la hauteur de votre entité alimentaire de la largeur et de la hauteur de la scène. Cela garantit que la nourriture est toujours complètement à l'intérieur de la scène. Voici une démo du jeu:
Avec l’aide de Crafty, vous avez créé un jeu très basique en écrivant quelques lignes de code. Pour le moment, le jeu manque de quelques fonctionnalités qui pourraient le rendre plus intéressant. Tout d'abord, il n'y a pas de sons. Deuxièmement, le joueur n’a aucun moyen de sortir et le niveau de difficulté reste le même tout au long de la partie. Vous apprendrez le son, les images-objets, les événements relatifs à la souris et d'autres fonctionnalités de la bibliothèque dans la prochaine série.
Si vous avez des problèmes ou des doutes en parcourant tous les exemples de la série, faites-le moi savoir dans les commentaires..
