Ajouter des personnages qui parlent

Les personnages qui parlent permettent de donner une voix à ton jeu. Cela peut permettre de donner une indication au joueur, une direction ou un indice, ou simplement de donner du caractère à un personnage.

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( "jacob", "assets/sprites/jacob.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 G. 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")
  ],
  
// personnage qui parle
  "J": () => [
    sprite("jacob"), 
    area(), 
    origin("bot"), 
    "talk",
  ],
};

Placer le personnage

Tu vas maintenant pouvoir choisir l'emplacement de tes personnages dans ton niveau. Toujours dans le script level.js, trouve le tableau LEVELS et place des caractères G là où tu le souhaites.

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

Ton personnage est maintenant apparent dans ton niveau, mais il ne parle pas encore.

Créer de nouveaux composants

Pour que ton personnage puisse parler, il va nous falloir créer de nouveaux composants. Rends-toi dans le script component.js et ajoutes-y ces deux fonctions.

// fonction permettant au personnage de parler
function speakSurface(txt = "hello !") {
  
  return {
    
    sentence:txt,
    
    require: [ "pos", "area", ],
    
    load() {
      
      const epw = 20 , mrgw = 10 , mrgh = 20 ;
      const x = this.pos.x , y = this.pos.y ;
      const h = this.height , w = this.width ;
      
      let m = [];
        
      for ( let i = 0 ; i < 4 ; i ++ ){
        
        m[i]=add([
          rect(epw,epw),
          opacity(0),
          area(),
          pos(this.pos.x,this.pos.y),
          origin("bot"),
          "talkExit",      
        ]);
        
      }
      
      m[0].height = h ;
      m[1].height = h ;
      m[2].width = w * 2 + epw + mrgw ;
      m[3].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 ;
        
    },
  }
}

// fonction permettant au joueur d'écouter
function hear( x = width() / 2 , y = height() -12 ) {
  
  let speakOn = false ;
  
  const label = add([
    text( '' , { width : width() } ) ,
    pos( x , y ),
    layer("ui"),
    fixed(),
    origin('bot'),
  ]);
  
  return {
    
    require: [ "pos" , "area" , "body" ],
    
    add() {

      this.onCollide("talkExit", (p) => {
        label.text = "" ;
      });

      this.onCollide("talk" , (p) => {
        label.text = p.sentence ;
      });
      
    },
  }
}

Ajouter le nouveau composant au personnage

Maintenant, il nous faut ajouter notre nouveau composant au personnage. Retourne dans le script level.js, et retrouve dans la variable LEVEL_CONFIG le passage où est déclaré ton personnage, puis ajoutes-y cette ligne, comme suit.

// personnage qui parle
"J": () => [
  sprite("jacob"), 
  area(), 
  origin("bot"), 
  
  speakSurface(),

  "talk",
],

Choisir la réplique du personnage

Il nous faut aussi choisir ce que va dire ton personnage. Toujours dans le script level.js, là où est déclaré ton personnage, ajoute ton texte entre guillemets, comme suit.

// personnage qui parle
  "J": () => [
    sprite("jacob"), 
    area(), 
    origin("bot"), 
    speakSurface( "écrit ta réplique ici" ),
    "talk",
  ],

Ajouter le nouveau composant au joueur

Ensuite, il nous reste à ajouter notre nouveau composant au joueur. Dans le script game.js, et retrouve dans la variable player, puis ajoutes-y cette ligne, comme suit.

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

  hear(),

  "player" ,
] ) ;