Les personnages en mouvements peuvent te permettre d'apporter un peu de vie a tes niveaux, en simulant un écosystème propre au jeu. Ces personnages peuvent aussi bien être des interlocuteurs que ton personnage peut rencontrer, des adversaires qu'il doit éviter, ou simplement des personnages neutres qu'il peut mettre à profit dans ses déplacements.

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( "goldfly" , "assets/sprites/goldfly.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 les caractères q et p. 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 volant <-
  "q": () => [
    sprite("goldfly"),
    area(),
    origin("bot"),
    solid(),
  ],
  
  // personnage volant ->
  "p": () => [
    sprite("goldfly"),
    area(),
    origin("bot"), 
    solid(),
  ],
} ;

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 q et p là où tu le souhaites.

// plan du niveau
const LEVELS = [
  
  [
    "                 @ " ,
    "                ===" ,
    "                   " ,
    "   p               " ,
    "                   " ,
    "               q   " ,
    "                   " ,
    "   p               " ,
    "                   " ,
    "               q   " ,
    " #                 " ,
    "===================" ,
  ],
  
];

Tes personnages sont maintenant apparents dans ton niveau, mais ils ne se déplacent pas encore.

Créer un nouveau composant

Pour que tes personnages puisent se déplacer, il va nous falloir créer un nouveau composant. Rends-toi dans le script component.js et ajoutes-y cette fonction.

// composant permettant au personnage de se déplacer
function fly(dir = 1, dist = 500 , speed = 200 ) {
  
  let x ;
  
  return {
    
    id: "patrol",
    require: [ "pos", "area" ],
    
    load() {

      const frequence = 3 ;
      const gridSize = LEVEL_CONFIG.width ;
      
      let v = ( this.pos.y / gridSize % frequence ) + 1 ;

      if ( dir == 1) this.flipX(true);

      x = this.pos.x ;
      this.pos.x += Math.max( dist / v , 0 ) * dir ;

    },
    
    update() {

      const endAnim = 40 ;

      let d = ( this.pos.x - x ) * dir ;
      let op = 1 - ( d - ( dist - endAnim ) ) / endAnim ;

      if( d > dist ) this.pos.x = x ;
    
      this.pos.x += ( speed * dir ) *dt();
      this.opacity = Math.max( Math.min( op , 1 ) , 0 ) ;

    },
  }
}

Ajouter le nouveau composant au personnage

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

// personnage volant <-
"q": () => [
  sprite("goldfly"),
  area(),
  origin("bot"),

  fly(-1),

],
  
// personnage volant ->
"p": () => [
  sprite("goldfly"),
  area(),
  origin("bot"), 

  fly(1),

],

Facultatif : Rendre le personnage dangereux

Si tu veux que ton personnage soit offensif, il suffit de lui ajouter le label "danger". Profitons-en pour lui retirer le composant solid() qui ne nous sert plus, ton personnage pourra ainsi passer à travers d'autres objets. Reste dans le script level.js, dans la variable LEVEL_CONFIG là où sont déclarés nos personnages, et ajoute cette simple ligne.

// personnage volant <-
"q": () => [
  sprite("goldfly"),
  area(),
  origin("bot"),
  fly(-1),

  solid(),

  "danger",
    
],
      
// personnage volant ->
"p": () => [
  sprite("goldfly"),
  area(),
  origin("bot"), 
  fly(1),

  solid(),

  "danger",
    
],