Les calques et les layers pour organiser la structure du jeu vidéo

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

Jusqu’à présent, on gérait des objets de même nature parce qu’interagissant les uns avec les autres. Afin de travailler sur des aspects du jeu de nature différente, une bonne pratique est de les regrouper dans des feuilles virtuelles appelées calques (layer) que l’on pourra afficher ou cacher à la demande et ordonner les uns par rapport aux autres.

On crée 2 calques : un pour les objets graphiques animés, l’autre pour les informations relatives au jeu telles que la barre de vie ou plus tard le score que l’on place au premier plan avec la méthode setDepth.

create() {....
 this.playerInfLayer = this.add.layer();
 this.gameLayer = this.add.layer();
 this.playerInfLayer.setDepth(2);
 this.gameLayer.setDepth(1);
....}

On rattache shooter, background, laser et météorite au layer gameLayer au moment de leur création.

this.gameLayer.add([this.background,this.shooter]);
} else if ( this.cursors.space.isUp && this.readyToUp ) {
 this.laser = this.laserGroup.get(this.shooter.x, this.shooter.y-this.shooter.height,'laser');
 this.add.existing(this.laser);
 this.gameLayer.add(this.laser);
 .... 

On change la signature de la méthode spawnMeteor afin d’y intégrer le layer en paramètre.

spawnMeteor(meteorView, velocityX, velocityY,scene, layer) {....
 layer.add(meteor);
 ....}

Sans oublier de modifier aussi son appel avec le paramètre gameLayer par le biais du timer.

this.meteorTimer = this.time.addEvent( {.... 
 this.spawnMeteor(meteorView,0, 100,this,this.gameLayer);
....},

On utilise le même principe pour les collisions entre le laser et les météorites. Toutefois, la création de l’objet Laser avec l’opérateur new nous oblige à définir un test overlap à chaque fois.

Il apparait donc plus pertinent de faire comme pour les météorites en créant un groupe dynamique qui créera les lasers ainsi qu’un test overlap unique entre les lasers et les météorites avec un appel à une fonction callback handleLaserMeteorCollision qui pour le moment, est identique à handleShooterMeteorCollision.

create() {....  
 this.laserGroup = this.physics.add.group({
  classType: Laser
 });
 ....
 this.physics.add.overlap(this.laserGroup, this.meteorGroup,this.handleLaserMeteorCollision,undefined,this);
....}

update() {....
 } else if ( this.readyToUp && this.cursors.space.isUp ) {
  this.laser = this.laserGroup.get(this.shooter.x, this.shooter.y-this.shooter.height,'laser');
  this.add.existing(this.laser);
  this.laser.velocity = -300;
  this.laser.start();
  this.readyToUp = false;    
 } else {
....}

Une structure mieux organisée pour ajouter lors de la prochaine étape la barre de vie du joueur.

Ne rate pas cette chance

 

Reçois ton livre GRATUIT pour créer des jeux vidéo.

Bravo, jette un œil à ta boite mail pour télécharger ton guide.