Ajouter des pièces

Disperser des collectibles dans ton niveau est un bon moyen de stimuler le joueur, mais aussi de le guider dans sa progression. Une pièce bien placée peut aussi être un signal pour le joueur, comme un indice vers un passage secret, un repère pour effectuer un saut, etc. Le hack qui suit va aussi te permettre d'afficher le décompte des pièces obtenues et de celles restantes, pour inciter ton joueur à les collecter toutes.

Importer une image et un effet sonore

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).

Ensuite, il te faudra un effet sonore. Tu peux aussi le réaliser toi-même, ou utiliser celui-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 ton effet sonore dans : assets/sounds/. Puis, ajoute ces deux lignes 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( "coin"   , "assets/sprites/coin.png"   ) ;


// chargement des sons du jeu
loadSound( "hit"    , "assets/sounds/hit.mp3"    ) ;
loadSound( "portal" , "assets/sounds/portal.mp3" ) ;

loadSound( "score"  , "assets/sounds/score.mp3"  ) ;

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 $. 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")
  ],
  
  // pièces
  "$": () => [
    sprite("coin"), 
    area(), 
    origin("bot"), 
    pos(0, -12), 
    "coin",
  ],
} ;

Placer les pièces

Tu vas maintenant pouvoir disperser des pièces dans ton niveau. Toujours dans le script level.js, trouve le tableau LEVELS et place des caractères $ là où tu le souhaites.

// plan du niveau
const LEVELS = [
  
  [
    "                      " ,
    "                      " ,
    "                      " ,
    "    $   $   $   $     " ,
    "      $   $   $       " ,
    "    $   $   $   $   @ " ,
    "====  $   $   $  =====" ,
    "   ===============    " ,
  ],
  
];

Tes pièces sont maintenant apparentes dans ton niveau. Il te reste encore quelques opérations à faire pour pouvoir les ramasser.

Créer un nouveau composant

Pour que ton joueur puisse collecter les pièces, il nous faut créer un nouveau composant. Rends-toi dans le script component.js et ajoutes-y cette fonction.

// composant permettant de collecter les pièces
function collectCoin( x = 12 , y = 12 ){
  
  let total = 0 ;
  let collected = 0 ;
  let pitch = 0 ;
  
  const label = add([
    text(''),
    pos( x , y ),
    layer("ui"),
    fixed(),
  ]);
  
  return {
    
    add(){
      this.onCollide("coin", (c) => {

        collected++;
        destroy(c);
        label.text = collected+"/"+total;
        play("score", { detune: pitch,});
        pitch += 100;

      });  
    },
    
    load() {
      every("coin", (e) => {
        total++;
      });
    },   
    
    update(){
      pitch = Math.max(0, pitch - dt() * 100);
    },
    
  }
}

Ajouter le nouveau composant

Pour finir, nous devons maintenant ajouter ce nouveau composant au joueur. Dans le script game.js, à l'intérieur de la scène game, trouve la variable player et ajoutes-y cette ligne.

// définition du joueur
const player = add([
  pos(0,0) ,
  area() ,
  body() ,
  controller() ,
  sprite( "bean" ) ,
  origin( "center" ) ,

  collectCoin(),

  "player",
]);