Tir de lasers par le 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 du déplacement du joueur.

Pour éviter de finir avec du code spaghetti et en y allant crescendo, on instille de la modularité avec l’objet Laser en tant que Sprite. Libre à vous de l’adapter aux objets background, et shooter.

Retenez que d’un point de vue architecture et comme ailleurs, il y a des effets de mode : il en existe à foison qui ont chacune leurs promoteurs et détracteurs. L’une d’entre elles est le modèle ECS (Entité Composant Système) plébiscité dans la création de jeux vidéo. Parfois intégré au moteur, elle est plus ou moins facile à implémenter et utiliser sur certains pas nativement conçus pour.

Pour des interactions réalistes « conformes » à la physique, il est possible de spécifier certaines propriétés aux objets Sprite telles que la masse, la sensibilité à la gravité ou jouer sur l’inertie avec les accélération et décélération.

Le code de l’objet est encapsulé dans un fichier dédié Laser.js placé sous le dossier scene. Pour que cette classe soit accessible, il est nécessaire de l’importer depuis la scène définie dans le fichier Game.js.

import Laser from './Laser.js'

Cet objet prend en charge la définition des animations qui lui sont rattachées, son propre rattachement à une scène ainsi qu’une méthode lui donnant le mouvement tout en l’animant.

Au préalable, on charge en mémoire la planche des animations du laser depuis preload.

preload() {....
 this.load.spritesheet('laser', 'assets/laser/tiledLaser.png', { frameWidth: 20, frameHeight: 64 });
....}

Le constructeur constructor associe la scène à l’objet, définit les animations et prend 4 paramètres :
– la scène sur lequel l’objet sera placé ;
– les positions x et y de l’objet sur la scène ;
– la vitesse du laser.

export default class Laser extends Phaser.Physics.Arcade.Sprite {

 constructor(scene, x, y, velocity) {
  super(scene,x,y,'laser');
  this.velocity = velocity ;
  scene.anims.create({
   key: 'run',
   frameRate: 60,
   frames: scene.anims.generateFrameNumbers('laser' , { start: 7, end: 0 }),
   repeat: 1 
  });
  scene.add.existing(this);
  scene.physics.add.existing(this);
}

 start() {
  this.play('run');
  this.setVelocityY(this.velocity);
 }
}

Le lancement du laser se fait à l’initiative du joueur en appuyant sur la touche Espace en faisant en sorte qu’un seul laser à la fois soit lancé. La méthode start qui joue l’animation, applique une vitesse de déplacement verticale vers le haut est alors appelée.

update() {.....

 if ( this.cursors.left.isDown) {
  this.shooter.setVelocityX(-200);
 } else if ( this.cursors.right.isDown) {
  this.shooter.setVelocityX(200);
 } else if ( this.cursors.up.isDown) {
  this.shooter.setVelocityY(-200);
 } else if ( this.cursors.down.isDown) {
  this.shooter.setVelocityY(200);
 } else if ( this.cursors.space.isDown ) {
  this.readyToUp = true;          
 } else if ( this.readyToUp && this.cursors.space.isUp ) {
  this.laser = new Laser(this, this.shooter.x, this.shooter.y-this.shooter.height, -300);
  this.laser.start();
  this.readyToUp = false;    
 } else {
  this.shooter.setVelocity(0);
 }
}

Le shooter se déplace et peut tirer des lasers, il ne manque plus que les ennemis.

Explore l'univers de la création de jeux vidéo

Saisis ton prénom et ton e-mail pour recevoir ton livre GRATUIT et commence ton voyage ludique dès maintenant.

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