Les checkpoints sont un excellent moyen de s'assurer que le joueur progresse quand la difficulté du jeu augmente. S'ils sont bien placés, les checkpoints permettent au joueur de se concentrer sur un obstacle et de le surmonter, tout en réduisant sa frustration en cas d'échec. Bien espacer les checkpoints permet en revanche d'entretenir une tension dans le jeu en incitant le joueur à être prudent et à mesurer les risques qu'il prend.

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 les ressources 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( "heart"  , "assets/sprites/heart.png"  ) ;


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

loadSound( "signal" , "assets/sounds/signal.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" ),
  ],
  
  // checkpoint
  "?": () => [
    sprite( "heart" ), 
    area(), 
    origin( "bot" ), 
    pos(0, -12), 
    "checkPoint",
  ],
} ;

Placer les checkpoints

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

// plan du niveau
const LEVELS = [

  [
    "= #       ?          =" ,
    "====    =====     ====" ,
  ],
  
];

Tes checkpoints sont maintenant apparents dans ton niveau. Tu peux les voir, mais ils ne fonctionnent pas encore.

Créer un nouveau composant

Pour que tes checkpoints puissent sauver la progression de ton joueur, il va nous falloir créer un nouveau composant. Rends-toi dans le script component.js et ajoutes-y cette fonction.

// composant permettant au joueur d'utiliser les checkpoints
function checkPoint(){
  
  let lastCheckPoint ;
  
  return {
      
    add() {
        
      this.onCollide("checkPoint", (c) => {
        if (lastCheckPoint!=c.pos){
            
          lastCheckPoint = c.pos ;
          play( "signal" ) ;
            
        }
      });
    
    },
      
    load() {
      lastCheckPoint = this.pos ;
    },  
       
    goToCheckpoint() {
      this.pos = lastCheckPoint ;
    },   
      
  }
}

Ajouter le nouveau composant

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([
  sprite( "bean" ),
  pos(0, 0),
  area(),
  body(),
  startingPosition(),
  origin( "center" ),

  checkPoint(),

  "player",
]);

Modifier le controlleur du joueur

Il nous reste un dernier réglage à changer pour que tes checkpoints soient opérationnels. Pour l'instant, lorsque le joueur perd, il est directement amené sur la scène loose. Nous voudrions plutôt qu'il reste sur la même scène et qu'il soit téléporté au dernier checkpoint. Pour ce faire, reste dans le script player.js à l'intérieur de la fonction controller(), trouve la fonction lose() et effectue cette modification.

lose() {

  go( "lose" ) ;
    
  this.goToCheckpoint() ;
    
},

Il est toujours préférable d'accompagner un effet sonore d'une animation. Cela permet d'envoyer un signal en plus aux joueurs ayant désactivé le son ou ayant peu d'audition. Pour les autres, l'effet sera d'autant plus satisfaisant.

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 permettant à un objet de se balancer
function swing( on = true , speed = 1 , amp = 8 ) {
  
  const random = rand(1000);
  
  return {

    require: [ "rotate" ],

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

    swingAnim(b) {
      on = b ;
    },

  }
}

Modifier le composant

Toujours dans le script component.js, retrouve la fonction checkPoint() que tu as ajouté tout à l'heure, puis ajoutes-y cette ligne, comme suit.

// composant permettant au joueur d'utiliser les checkpoints
function checkPoint(){
  
  let lastCheckPoint ;
  
  return {
      
    load() {
      lastCheckPoint = this.pos ;
    },  
      
    pointChecked(c) {
      if (lastCheckPoint!=c.pos){
        lastCheckPoint = c.pos ;
        play( "signal" ) ;

        c.swingAnim( true ) ;

      }
    },   
      
    goToCheckpoint() {
      this.pos = lastCheckPoint ;
    },   
      
  }
}

Ajouter le composant

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

// checkpoint
"?": () => [
  sprite("heart"), 
  area(), 
  origin("bot"), 
  pos(0, -12), 

  rotate(),
  swing( false , 2 , 10 ),
  "checkPoint",
],