Ajouter une plateforme en mouvement

Les plateformes en mouvement permettent de corser l'expérience du joueur en ajoutant un paramètre de timing dans les sauts qu'il doit exécuter, et rendent ainsi ton jeu plus dynamique et stimulant. En fonction de leurs positionnements dans le jeu ces plateformes peuvent créer une grande variété de challenge pour le joueur, attention cependant à ne pas leur faire effectuer de chemins trop long, pour que leurs déplacements restent lisibles pour le joueur.

Déclarer des symboles

Pour commencer, nous allons déterminer quels symboles correspondent aux plateformes en mouvement. Dans cet exemple, nous avons choisi < pour les plateformes commençant leur mouvement vers la gauche, et > pour les plateformes commençant leur mouvement vers la droite. Le caractère x correspond quant à lui à un objet invisible qui permet de limiter le mouvement des plateformes, celles-ci changeront de direction lorsqu'elles rentreront en contact avec l'un d'entre eux. Rends-toi dans le script level.js, puis trouve la variable LEVEL_CONFIG et ajoutes-y ces quelques lignes, comme suit.

// défini ce à quoi correspond chaque symbole dans le niveau
const LEVEL_CONFIG = {
  
  // taille en pixel de chaque case
  width: 64,
  height: 64,

  // sol
  "=": () => [
    sprite("grass"), 
    area(), 
    solid(), 
    origin("bot")
  ],
  
// plateforme en mouvement <-
  "<": () => [
    rect(128, 64,{radius:10} ),
    color(200, 200, 255),
    outline(4),
    area(), 
    solid(), 
    origin("bot"),
    "platfrom",
  ],
  
  // plateforme en mouvement ->
  ">": () => [
    rect(128, 64,{radius:10}),
    color(200, 200, 255),
    outline(4),
    area(), 
    solid(), 
    origin("bot"),
    "platfrom",
  ],

  // plateforme en mouvement
  "x": () => [
    rect(64, 64),
    opacity(0),
    area(), 
    origin("bot"),
    "stopper"
  ],
} ;

Placer les plateformes

Maintenant nous allons pouvoir placer les plateformes dans notre niveau. Toujours dans le script level.js, trouve le tableau LEVELS et ajoutes-y les caractères <, > et x ou tu le souhaites. Pour que tes plateformes fonctionnent correctement, elles doivent être placées entre deux symboles x, avec suffisamment d'espace pour permettre leurs déplacements. Un même symbole x peut être utilisé pour plusieurs plateformes mouvantes.

// plan du niveau
const LEVELS = [
  
  [
    " #                   @ " ,
    "==== x  <  x  >  x ====" ,
  ],
  
];

Tes nouvelles plateformes sont maintenant visibles dans ton niveau. Tu peux déjà sauter dessus, mais il nous reste quelques opérations à effectuer avant que celles-ci ne puissent bouger.

Créer un nouveau composant

Pour déterminer le comportement des plateformes il va nous falloir créer un nouveau composant. Rends-toi dans le script component.js, et ajoute cette nouvelle fonction.

// composant permettant aux plateformes de se déplacer
function movingPlateform( direction = 1 , speed = 100 ) {
  
  return {
    
    id: "patrol",
    require: [ "pos", "area", ],
    
    add(){
      this.onCollide("stopper", () => {
        direction = -direction;
      });
    },
    
    update() {
      this.pos.x += ( speed * direction * dt() ) ;
    },
    
  }
  
}

Ajouter le nouveau composant au personnage

Maintenant, il ne nous reste plus qu'à ajouter notre nouveau composant aux plateformes. Retourne dans le script level.js, et retrouve dans la variable LEVEL_CONFIG le passage où sont déclarées nos plateformes, puis ajoutes-y ces lignes, comme suit.

 // plateforme en mouvement <-
  "<": () => [
    rect(128, 64,{radius:10}),
    color(200, 200, 255),
    outline(4),
    area(), 
    solid(), 
    origin("bot"),

    movingPlateform(-1),

    "platfrom"
  ],
  
  // plateforme en mouvement ->
  ">": () => [
    rect(128, 64,{radius:10}),
    color(200, 200, 255),
    outline(4),
    area(), 
    solid(), 
    origin("bot"),

    movingPlateform(1),

    "platfrom"
  ],