Utiliser une feuille de sprite

Les feuilles de sprite permettent d'affecter plusieurs images différentes à un seul objet. Dans ce cas de figure, cela va nous permettre d'afficher différemment le personnage du joueur en fonction des situations.

Importer une image

Pour commencer, il va te falloir une feuille de sprite. Réalises-en une si tu ne l'as pas déjà fait, ou utilise celle ci-dessous (click droit -> enregistrer-sous).

Importe ensuite ta feuille de sprite dans ton projet en les 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" ) ;

loadSpriteAtlas( "assets/sprites/sleepio.png" , {
  "sleepio": {
      x: 0,
      y: 0,
      width: 192,
      height: 54,
      sliceX: 3,
      anims: {
        asleep: { from: 0 , to: 0 },
        run:    { from: 1 , to: 1 },
        jump:   { from: 2 , to: 2 },
      },
  },
}) ;

Modifier le joueur

Ensuite, il va te falloir changer la sprite utilisée pour le personnage du joueur. Toujours dans le script game.js, trouve la variable player et modifie cette ligne.

// définition du joueur
const player = add( [

  pos() ,
  area() ,
  body() ,
  controller() ,

  sprite( "bean" ) ,

  sprite( "sleepio" ) ,

  origin( "center" ) ,
  "player" ,

] ) ;

Le joueur s'affiche avec la nouvelle sprite, mais celle-ci ne change pas encore.

Modifier la fonction controller()

Pour que la sprite du joueur change en fonction du contexte de jeu, il va nous falloir ajouter une condition. Dans le script player.js, trouve la fonction update() et ajoutes-y ces quelques lignes.

// à chaque frame
update() { 
    
  // met à jour les collision, même lorsque le joueur est statique
  this.move( 0 , 0 ) ;
    
  // fait perdre le joueur s'il tombe du niveau
  if ( this.pos.y >= FALL_DEATH ) this.lose() ;
    
  if ( !this.isGrounded() ) this.play("jump") ;
  else                      this.play("run") ;
},

BONUS : Ajouter un état de veille

La suite va te permettre d'afficher une sprite si le joueur ne bouge pas pendant un certain temps. Pour commencer nous allons créer une variable pour paramétrer la vitesse de déclenchement de cet effet, puis une variable pour mesurer le temps écoulé depuis le dernier mouvement du joueur. Encore, dans le script player.js, au début de la fonction controller() ajoute ces deux lignes.

const JUMP_FORCE = 1000 ;
const MOVE_SPEED = 480  ;
const FALL_DEATH = 2000 ;
  
const ASLEEP_SPEED = 2 ;

let awake = 0 ;

Toujours dans le script player.js, dans la fonction controller(), ajoute ces lignes dans les évènements d'input du joueur.

// quand le joueur appuie sur "sauter"
onKeyPress( jumpKey , () => {
        
  if ( this.isGrounded() ) {

    this.jump( JUMP_FORCE) ;
          
    awake = 1 ;

  }
        
});
      
// quand le joueur appuie sur "flèche gauche"
onKeyDown( leftKey , () => {
        
  this.move( -MOVE_SPEED , 0 ) ;
          
  awake = 1 ;
        
});
      
// quand le joueur appuie sur "flèche droite"
onKeyDown( rightKey , () => {
        
  this.move( MOVE_SPEED , 0 ) ;
          
  awake = 1 ;
        
});

Enfin, dans le script player.js, dans la fonction controller(), effectue cette dernière modification.

// à chaque frame
update() { 
      
  // met à jour les collision, même lorsque le joueur est statique
  this.move( 0 , 0 ) ;
      
  // fait perdre le joueur s'il tombe du niveau
  if ( this.pos.y >= FALL_DEATH ) this.lose() ;
      
  if ( !this.isGrounded() ) this.play("jump") ;

  else                      this.play("run") ;
  else if ( awake>0)        this.play("run") ;
  else                      this.play("asleep") ;

  awake -= dt() * ASLEEP_SPEED ;
},