Création de jeux vidéo avec Phaser – Le déplacement du joueur (PJ)

Le shooter animé et contrôlé 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 scrolling.

Le shooter

Le joueur dont l’objectif est de se frayer un chemin dans un champ de météorites, se trouve ici représenté par une image shooter.png : référencée dans la fonction preload et ajoutée à la scène depuis la fonction create.

preload() { ....
 this.shooter = this.load.image('shooter', 'assets/shooter/shooter.png');
}
create() { ....
 this.physics.add.sprite(300, 600, 'shooter');
}

L’animation du shooter

Pour réaliser l’animation, on utilise la planche de sprites tiledShooter.png référencée depuis la fonction preload en tant que spritesheet en lui spécifiant en propriétés la taille d’une image.

Au sein de la fonction create vient la configuration de l’animation à laquelle on donne un nom (key), une vitesse (framerate), la liste des images la composant (frames) et le nombre de fois que l’animation est jouée (repeat) dont une valeur positionnée à -1 engendre un jeu en boucle.

preload() { ....
 this.load.spritesheet("shooter", "assets/shooter/tiledShooter.png", { frameWidth: 53.5, frameHeight: 60 });
}

create() {.....
 this.anims.create({
  key: "fly",
  frameRate: 30,
  frames: this.anims.generateFrameNumbers("shooter", { start: 0, end: 19 }),
  repeat: -1
 });
}
    
 this.shooter = this.physics.add.sprite(300, 600, 'shooter');
 this.shooter.play("fly");
}

Contrôle et déplacement du shooter

On donne au joueur la faculté de contrôler le shooter à l’aide des flèches directionnelles : on ajoute une propriété cursors chargée de gérer les touches du clavier qu’on initialise dans create. Puis on intègre les déplacements du shooter associés aux touches depuis update en lui donnant de la vitesse.

create() {
 this.cursors = this.input.keyboard.createCursorKeys();
 .....
}

update() {.....
 // player control
 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 {
  this.shooter.setVelocity(0);
 }
}

Blocage du shooter sur les bords de la scène

Il suffit juste d’activer depuis create le rebond des objets sur les bords de la scène. La méthode this.physics.world.setBoundsCollision peut prendre 4 paramètres booléen correspondant aux 4 côtés de la scène dont on peut activer ou désactiver le rebond sur chacun et dans l’ordre gauche, droite, haut et bas.

create() {....
 this.physics.world.setBoundsCollision();
....}

Et de stopper le shooter lorsqu’il entre en collision avec l’un des 4.

create() {.....   
 this.shooter = this.physics.add.sprite(300, 600, 'shooter');
 this.shooter.body.collideWorldBounds = true;
 this.shooter.play("fly");
}

Le shooter est à présent déplaçable par le joueur à l’aide des flèches directionnelles du clavier et est animé.