Afficher l'état du joueur

Tu veux que ton joueur puisse voir la tête de son personnage changer selon son état ? Mais quelle tête donner à ton joueur ? Pour commencer, dessine plusieurs états du visage du joueur.

Ensuite, dans le script loadAssets.js ajoutes cette ligne en dehors d'une fonction pour créer une liste publique.

let playerState = [];

Glisse tes images dans les assets (Ajoute toi-même tes assets), puis dans la fonction loadImages(), importe tes images dans la liste avec les lignes suivantes. Tu peux faire autant d'états que tu veux pour ton personnage.

function loadImages(){
  
  // charge les images de ton jeu
  
  logoMP = loadImage('assets/logo/logo_MP.png');
  logoVM = loadImage('assets/logo/logo_VM.png');
  lee    = loadImage('assets/logo/lee.png');

  playerState[0] = loadImage('etat1.png');
  playerState[1] = loadImage('etat2.png');
  playerState[2] = loadImage('etat3.png');
  playerState[3] = loadImage('etat4.png');
}

J'imagine que tu aimerait que ces images soient détourées. Si ça n'est pas déjà le cas, trouve la fonction clippingImages(), toujours dans le script loadAssets.js et ajoutes-y cette ligne.

function clippingImages(){
  
  // effectue le détourage
  
  enemyImages = clippingList(enemyImages);
  artImages   = clippingList(artImages);
  itemImages  = clippingList(itemImages);

  playerState = clippingList(playerState) ;
  
}

Ensuite il va nous falloir une variable pour stocker l'état du joueur. Colle celle-ci dans la fonction view.js en dehors d'une fonction.

let state;

Quelle est la valeur initiale de cette variable ? Choisis en une et attribue là a la variable avec la ligne suivante dans la fonction initGame() du script game.js.

function initGame(){
  
  musics[5].stop();
  
  title  = false;
  win    = false;
  credit = false;
  thanks = false;
  
  touchDir = null;
  
  state = 0 ;
  
  playerR = [ 0 , 0 ] ;
  
  playerLevel() ;
  
}

Maintenant, il nous faut une fonction pour afficher la tête du joueur. Attention ici il y a deux versions, choisi celle que tu préfères et colles-la dans le scipt view.js

Un visage par état

function playerStateDisplay(){
  
  // affiche la tête du joueur
  
  const taille = 0.2;
  const marge = 0.05;
  
  let img = lee;

  // image du joueur
  if (state==0) img = tetes[0];
  if (state==1) img = tetes[1];
  if (state==2) img = tetes[2];
  
  let w = width * taille ;
  let h = w * (img.height/img.width);
  let margin = width * marge ;
  let x = width / 2 ;
  let y = margin + h / 2 ;
  
  image( img , x , y , w , h );
  
}

Quelques visages pour une jauge d'état (santé...)

function playerStateDisplay(){
  
  // affiche la tête du joueur
  
  const taille = 0.2;
  const marge = 0.05;
  const max = 10;
  
  let e = int((state/max) * playerState.length-1);
  let img = playerState[e];
  let margin = width * marge;
  let w = width * taille;
  let h = w * (img.height/img.width);
  let x = width/2;
  let y = margin+h/2;
  
  image( img , x , y , w , h );
  
}

Voilà, pour finir il nous reste à appeler notre nouvelle fonction. Dans le script game.js, trouve la fonction game() et rajoutes-y cette ligne.

function game(){
  
  viewDisplay();
  inventoryDisplay();
  
  playerStateDisplay();
  
  if (animation()) playerControl();
  
}