Ajouter des éléments de décor

pour Issa (Rosny-sous-bois)

Les éléments de décor n'ont pas d'impact direct sur le gameplay, mais ils permettent néanmoins de donner à tes niveaux un peu de caractère et renforcer l'immersion du joueur.

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

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( "lamp"   , "assets/sprites/lamp.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 i et I, le premier pour les décors en arrière-plan, le second pour les décors en premier plan. 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")
  ],
  
  // lampe arrière plan
  "i": () => [
    sprite("lamp"), 
    area(), 
    origin("bot"), 
    scale(0.9),
  ],

  // lampe premier plan
  "I": () => [
    sprite("lamp"), 
    area(), 
    origin("bot"), 
    layer("foreground"),
  ],
} ;

Placer les élémement de décor

Tu vas maintenant pouvoir choisir l'emplacement de tes décors dans ton niveau. Toujours dans le script level.js, trouve le tableau LEVELS et places des caractères i et I là où tu le souhaites.

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

Tes décors sont maintenant apparents dans ton niveau.

BONUS : Ajouter une animation

Pour rendre ton jeu encore un peu plus immersif, tu peux ajouter une petite animation à tes décors. L'animation proposée ici permet de balancer légèrement l'image de gauche à droite.

Créer un composant pour une animation

Voici un composant pour une animation très simple, elle consiste à faire réduire la taille d'affichage d'un objet. Rends-toi dans le script component.js et ajoute la fonction suivante.

// composant qui permet à un objet de réctrécir
function swing( on = true , speed = 1 , amp = 8 ) {
  
  const random = rand(360);
  
  return {

    require: [ "rotate" ],

    update() {
      if ( on ) this.angle = wave(-amp/2,amp/2,time()*speed+random);
    },

    swingAnim(b) {
      on = b ;
    },

  }
}

Ajouter le composant

Dans le script level.js, trouve dans la variable LEVEL_CONFIG, le passage ou nous avons déclaré les décors, puis ajoutes-y le nouveau composant ainsi que rotate() qui est aussi nécessaire pour l'effet.

// lamp
"i": () => [
  sprite("lamp"), 
  area(), 
  origin("bot"), 
  layer("gameLayer1"),
  scale(1),

  rotate(),
  swing( true , 1 , 8 ),
],

// lamp
"I": () => [
  sprite("lamp"), 
  area(), 
  origin("bot"), 
  layer("gameLayer3"),
  scale(1.1),
  
  rotate(),
  swing( true , 1 , 8 ),
],