Ajouter une échelle

Les échelles sont un bon moyen de donner de la verticalité à ton jeu. Elles peuvent permettre au joueur d'atteindre une partie plus haute de ton jeu, ou de remonter là où il était après une chute. Tu peux aussi utiliser ce hack pour réaliser de grandes surfaces grimpables, et imaginer un level design qui les met à profit.

Importer une image

Pour commencer, il va te falloir une image. Réalises-en une si tu ne l'as pas déjà fait, ou utilise celle ci-dessous (click droit -> enregistrer-sous).

Charger l'image dans le programme

Importe ensuite ton image dans ton projet en la plaçant dans le bon dossier : assets/sprites/. Puis, ajoute cette ligne au début de ton script game.js, comme suit.

// chargement des images du jeu
loadSprite( "bean"   , "assets/sprites/bean.png"   ) ;
loadSprite( "grass"  , "assets/sprites/grass.png"  ) ;
loadSprite( "portal" , "assets/sprites/portal.png" ) ;

loadSprite( "ladder" , "assets/sprites/ladder.png" ) ;

Déclarer un symbole

Nous allons maintenant déclarer un nouveau type d'objet que tu vas pouvoir placer dans ton jeu. Dans cet exemple nous avons choisi le caractère H. Dans le script level.js, trouve la variable LEVEL_CONFIG et ajoutes-y le code ci-dessous, 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")
  ],
  
  // echelle
  "H": () => [
    sprite("ladder"), 
    area(), 
    origin("bot"), 
    "climbable",
  ],
} ;

Placer les échelles

Tu vas maintenant pouvoir choisir l'emplacement de tes échelles dans ton niveau. Toujours dans le script level.js, trouve le tableau LEVELS et places des caractères H là où tu le souhaites. Dans cet exemple, les échelles font deux cases de hauteur, c'est pourquoi elles ont été placées à une case d'intervalle verticalement. N'hésite pas à regarder l'exemple de jeu plus haut pour voir le résultat.

// plan du niveau
const LEVELS = [
  
  [
    "                     " ,
    "                     " ,
    "      =========      " ,
    "    H           H    " ,
    "                     " ,
    " #  H           H    " ,
    "=======       =======" ,
  ],
  
];

Tes échelles sont maintenant apparentes dans ton niveau. Tu peux les voir, mais elles ne sont pas encore utilisables.

Créer deux nouveaux composants

Pour que ton joueur puisse emprunter ces échelles, il va nous falloir créer deux nouveaux composants, un pour les échelles, un pour le joueur. Rends-toi dans le script component.js et ajoutes-y ces deux fonctions.

function climbSurface() {
  
  return {
    
    require: [ "pos", "area", ],
    
    add() {
      
      this.onCollide("climbableExit", (e) => {
        destroy(e);
      });
      
    },
    
    load() {
      
      const epw = 20 , mrgw = 10 , mrgh = 30 ;
      const x = this.pos.x , y = this.pos.y ;
      const h = this.height , w = this.width ;
      
      let m = [];
        
      for ( let i = 0 ; i < 5 ; i ++ ){
        
        m[i]=add([
          rect(epw,epw),
          opacity(0),
          area(),
          pos(this.pos.x,this.pos.y),
          origin("bot"),
          "climbableExit",      
        ]);
        
      }
      
      m[0].height = h ;
      m[1].height = h ;
      m[2].width = w * 2 + epw + mrgw ;
      m[3].width = w * 2 + epw + mrgw ;
      m[4].width = w * 2 + epw + mrgw ;
      m[0].pos.x = x - w - mrgw ;
      m[1].pos.x = x + w + mrgw ;
      m[2].pos.y = y + mrgh ;
      m[3].pos.y = y - h - mrgh / 2 ;
      m[4].pos.y = y - h - mrgh * 2 - epw ;
        
    },
  }
}

function climb(climbKey = "up") {

  const climbPower = 600 ;
  
  let onLadder = false ;
  
  return {
    
    require: [ "pos" , "area" , "body" ],
    
    add() {

      this.onCollide("climbableExit", (p) => {
        onLadder = false ;
      });

      this.onCollide("climbable" , (p) => {
        onLadder = true ;
      });
      
      this.onHeadbutt( (p) => {
        onLadder = false ;
      });
  
      onKeyDown(climbKey, () => {
        if (onLadder) this.jump(climbPower) ;
      });
      
    },
  }
}

Ajouter les nouveaux composants

Maintenant que les composants existent, il nous faut les ajouter aux échelles et au joueur. Dans le script level.js puis dans la variable LEVEL_CONFIG, retrouve le passage où nous avons déclaré l'échelle, puis ajoutes-y cette ligne.

  // echelle
  "H": () => [
    sprite("ladder"), 
    area(), 
    origin("bot"), 

    climbSurface(),

    "climbable",
  ],

Maintenant, dans le script game.js, rends-toi dans la scène game, trouve la variable player, puis ajoutes-y cette ligne.

const player = add([
    sprite("bean"),
    pos(0, 0),
    area(),
    body(),
    startingPosition(),
    origin("center"),

    climb(),

    "player",
  ]);