Mise en route de Crafty: The Game Loop

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

Jusqu'à ce point de cette série, vous avez appris à manipuler des entités différentes et à utiliser le clavier pour les déplacer. Dans cette partie, vous apprendrez à utiliser la boucle de jeu dans Crafty pour vérifier en permanence différents é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 pilotée par requestAnimationFrame lorsqu'elle est disponible. Chaque boucle se compose d'un ou plusieurs appels à l'événement EnterFrame et un seul appel à RenderScene qui entraîne le redessinage de chaque couche.

La valeur finale de toutes les propriétés et variables est résolue avant qu'une scène ne soit rendue. Par exemple, si vous déplacez votre lecteur 5 px à droite dix fois à l'intérieur d'un seul événement EnterFrame, il sera directement dessiné 50 px vers la droite en sautant tous les dessins intermédiaires.

EnterFrame et RenderScene

Tout dans votre jeu qui doit changer au fil du temps est finalement lié à l'événement EnterFrame. Vous pouvez utiliser la méthode .bind() pour lier des entités différentes à 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 qui se sont écoulées depuis le dernier événement EnterFrame.

Vous pouvez utiliser la propriété dt pour fournir une expérience de jeu en douceur en déterminant dans quelle mesure l'état du jeu doit avancer.

L'événement RenderScene est utilisé pour vous assurer que tout ce qui est visible sur l'écran correspond à l'état actuel du jeu lors du dernier événement EnterFrame. Normalement, vous n'aurez pas besoin de lier cet événement vous-même si vous décidez d'implémenter votre propre couche de rendu personnalisée.

Utilisation de Tween pour animer des propriétés 2D

Vous pouvez utiliser le composant Tween lorsque vous souhaitez simplement animer les propriétés 2D d'une entité sur une période de temps spécifique. Vous pouvez animer les propriétés x, y, w, h, rotation et alpha en utilisant ce composant. Animons la valeur x et la hauteur des cases orange et noire 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 son coin supérieur gauche. Vous pouvez changer le centre de rotation en utilisant la méthode .origin(). Il peut accepter deux arguments entiers, qui déterminent le décalage d'origine des pixels dans les axes x et y.

Il accepte également une valeur de chaîne comme argument. La valeur de la chaîne peut être une combinaison de centre, haut, bas, milieu, gauche et droite. Par exemple, .origin("center") fera tourner l'entité autour de son centre, et .origin("bottom right") fera tourner l'entité autour du coin inférieur droit.

Vous pouvez mettre en pause ou reprendre tous les interpolations associées à une entité donnée en utilisant les méthodes .pauseTweens() et .resumeTweens(). De même, vous pouvez également utiliser .cancelTween() pour annuler une interpolation spécifique.

Comprendre le Crafty Timer

L'objet Crafty.timer gère toutes les tiques du jeu dans Crafty. Vous pouvez utiliser la méthode .FPS() avec cet objet pour obtenir le taux d'images cible. Gardez à l'esprit que ce n'est pas le taux d'images réel.

Vous pouvez également utiliser la méthode .simulateFrames(Number frames [, Number timestep]) pour faire avancer l'état du jeu par un nombre donné de trames. Le timestep est la durée pour passer chaque image. Si elle n'est pas spécifiée, une valeur par défaut de 20ms est utilisée.

Une autre méthode utile est .step(), qui fera progresser le jeu en effectuant une étape. Une seule étape peut consister en une ou plusieurs trames suivies d'un rendu. Le nombre de trames dépend du steptype de la minuterie. Cette méthode déclenche une variété d'événements comme EnterFrame et ExitFrame pour chaque trame et les événements PreRender, RenderScene et PostRender pour chaque rendu.

Il existe trois modes différents de steptype: fixed, variable et semifixed. En mode fixed, chaque image de Crafty reçoit la même valeur de dt. Toutefois, ce steptype peut déclencher plusieurs trames avant chaque rendu pour atteindre la vitesse de jeu cible.

Vous pouvez également déclencher une seule image avant chaque rendu en utilisant le mode variable. Dans ce cas, la valeur de dt est égale au temps réel écoulé depuis la dernière image.

Enfin, le mode semifixed déclenche plusieurs trames par rendu et le temps depuis la dernière trame est réparti également entre eux.

Créer un jeu très simple

Si vous avez lu tous les tutoriels de cette série, vous devriez avoir acquis assez de connaissances à ce jour pour créer un jeu très simple. Dans cette section, vous apprendrez comment mettre tout ce que vous avez appris à utiliser et créer un jeu où le joueur principal doit manger un morceau de nourriture.

La nourriture sera un carré rouge tournant. Dès que la nourriture entre en contact avec le joueur, il disparaît de l'ancien emplacement et fraie dans un nouvel emplacement aléatoire. Le lecteur peut être déplacé en utilisant A, W, S, D ou les touches fléchées.

Une autre chose que vous devez prendre en charge est la position du joueur. Il est censé rester avec les limites de la phase de jeu.

Écrivons le code pour la nourriture d'abord:

var foodBox = Crafty.e("2D, Canvas, Color, Food")
  .attr({x: 150, y: 250, w: 15, h: 15})
  .color("red")
  .origin("center")
  .bind("EnterFrame", function(eventData) {
    this.rotation += 4;
  });

Par défaut, Crafty aurait utilisé le coin supérieur gauche de l'entité alimentaire pour le faire pivoter. En réglant l'origine au centre, l'entité alimentaire tourne autour de son centre.

var playerBox = Crafty.e("2D, Canvas, Color, Fourway, Collision")
  .attr({x: 50, y: 360, w: 50, h: 50})
  .color("black")
  .fourway(200)
  .bind("EnterFrame", function(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é joueur vérifie l'emplacement actuel du joueur dans chaque image et réinitialise l'emplacement si le joueur tente de sortir de la partie de jeu.

Vous pouvez utiliser une entité Text pour suivre la partition. Le score est affiché dans le coin supérieur gauche. La variable gameScore enregistre le nombre de fois où le joueur touche l'entité alimentaire.

var scoreText = Crafty.e('2D, DOM, Text')
  .attr({ x: 10, y: 10 })
  .textFont({ size: '25px' });

scoreText.text(gameScore.toString());

Maintenant, il vous suffit d'écrire le code pour déplacer la nourriture à un endroit différent quand un coup est détecté. Le code suivant fera exactement cela.

playerBox.checkHits("Food").bind("HitOn", function(hitData) {
  foodBox.x = Math.random() * (stageWidth - foodBox.w);
  foodBox.y = Math.random() * (stageHeight - foodBox.h);
  gameScore += 1;
  scoreText.text(gameScore.toString());
});

Vous devez garder à l'esprit que vous soustraire la largeur et la hauteur de votre entité alimentaire de la largeur de la scène et la hauteur, respectivement. Cela permet de s'assurer que la nourriture est toujours complètement à l'intérieur de la scène. Voici une démo du jeu:

Dernières pensées

Avec l'aide de Crafty, vous avez créé un jeu très simple en écrivant quelques lignes de code. À l'heure actuelle, le jeu manque quelques fonctionnalités qui pourraient le rendre plus intéressant. D'abord, il n'y a pas de sons. Deuxièmement, il n'y a aucun moyen pour le joueur de sortir, et le niveau de difficulté reste aussi le même tout au long du jeu. Vous apprendrez à connaître les sons, les sprites, les événements de souris et d'autres fonctions de la bibliothèque dans la série suivante.

Si vous aviez des problèmes ou des doutes tout en passant par tous les exemples de la série, laissez-moi savoir dans les commentaires.