Ajouter la barre de vie du joueur
Suite de la série d’articles consacrés à la création d’un shooter avec phaser.js, le précédent étant consacré à la gestion des calques.
C’est par le biais des fonctions graphiques de phaser.js qu’on dessine la barre de vie qui passe du vert au rouge en dessous de 30%.
Un nouvel objet HealthBar (HeathBar.js) dédié qui hérite de la classe Phaser.GameObjects.Graphics et qui définit un constructeur, 2 méthodes pour décrémenter la barre de vie et l’autre pour la dessiner.
4 propriétés pour HealthBar : sa position x et y, sa valeur absolue, et un ratio pour adapter sa taille à celle de la scène.
3 méthodes : le constructeur prenant en paramètre la scène à laquelle il est rattaché et sa position, une méthode pour diminuer la taille de la barre de vie appelée lors des collisions entre le shooter et les météorites et une autre pour la dessiner.
export default class HealthBar extends Phaser.GameObjects.Graphics {
constructor(scene,x,y) {
super(scene);
this.x = x;
this.y = y;
this.value = 100;
this.ratio = 76 / 100;
this.draw();
scene.add.existing(this);
}
decrease(amount) {
this.value -= amount;
if ( this.value < 0 ) {
this.value = 0;
}
this.draw();
return ( this.value === 0 );
}
draw() {
this.clear();
// black background
this.fillStyle(0x000000);
this.fillRect(this.x, this.y, 80, 16);
// white fill
this.fillStyle(0xffffff);
this.fillRect(this.x + 2, this.y + 2, 76, 12);
if ( this.value < 30 ) {
this.fillStyle(0xff0000);
} else {
this.fillStyle(0x00ff00);
}
let size = Math.floor(this.ratio * this.value);
this.fillRect(this.x + 2, this.y + 2, size, 12);
}
}Il ne reste plus qu’à intégrer la barre de vie en bas à gauche de la scène depuis create tout en l’intégrant au layer. Ensuite appeler sa méthode decrease depuis la fonction handleShooterMeteorCollision.pour diminuer la barre de vie lors d’une collision entre le shooter et une météorite.
....
import HealthBar from './HealthBar.js'
....
create() {....
this.healthBar = new HealthBar(this, 0, 392);
this.playerInfLayer.add(this.healthBar);
....}
....
handleShooterMeteorCollision(shooter,meteor) {....
this.healthBar.decrease(10);
....}Maintenant que ça fait boom et que le joueur n’est plus invincible, il reste à ajouter des effets sonores pour une meilleure immersion.
