Déplacer le héros

Maintenant que notre héros est visible, il est temps de le faire se déplacer !

Un peu de mathématiques…

Pour déplacer un élément dans un jeu, on a toujours besoin de deux choses :

une direction
une vitesse

Dans les jeux vidéo, on utilise des vecteurs pour représenter ces informations.

👉 Un vecteur indique :

dans quelle direction aller
à quelle vitesse

Kaplay fournit déjà des vecteurs de direction prêts à l’emploi :

LEFT
RIGHT
UP
DOWN

Il ne reste donc plus qu’à :

choisir quand les utiliser
décider à quelle vitesse le héros se déplace

Déplacements avec le clavier

👉 Objectif : appuyer sur une touche → le héros se déplace dans la bonne direction

Comment peut-on exécuter du code lorsqu’une touche du clavier est pressée ?

Quels événements clavier Kaplay met-il à disposition ?

Pour déplacer un objet, quelles capacités doit-il avoir ?

Animations

Un personnage qui se déplace sans bouger visuellement, ce n’est pas très crédible. On va donc ajouter des animations.

👉 Objectif : le héros s’anime quand il se déplace, et s’arrête quand il ne bouge plus

Charger les animations

Les textures fournies contiennent plusieurs images du héros.

Nous allons modifier le chargement des textures de notre héros de la manière suivante:

assets.js

hero: {
  x: "La coordonnée horizontale de la texture (en haut à gauche)"
  y: "La coordonnée verticale de la texture (en haut à gauche)"
  width: 144, // Largeur de toutes les sections qui représentent le héros.
  height: "Hauteur de la texture",
  sliceX: "Nombre d'images verticales"
  anims: {
    <nom-animation>: {
      from: "indice de l'image de départ de l'animation"
      to: "indice de l'image de fin de l'animation",
      speed: "vitesse de lecture",
      loop: "est-ce que l'animation doit être jouée en boucle ? (true/false)",
    },
  },
},

De quelles animations avons nous besoin ?

Attacher les animations aux déplacements

Comment savoir si le héros est en train de se déplacer ?

Il est possbile de contrôler l'exécution d'une animation d'un objet à deux moments.

À la création de l'objet.
Pendant l'execution du jeu via object.play("<nom-animation>") et object.stop()

🎉 Génial ! Tu arrives à faire bouger ton personnage ! Et en plus il est animé ?!