Les collisions entre sprites – shooter, laser et météorite
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 animations des pnj.
Les collisions peuvent être gérées manuellement ou par le biais du moteur physique via la propriété body d’un sprite. Dans ce cas, la gestion d’une collision est simplifiée et se fait par des collider pour les collisions ou des overlap pour les chevauchements respectivement par les méthodes scene.physics.add.collider ou scene.physics.add.overlap. La différence étant qu’avec un collider et du fait des déplacements et des forces, les trajectoires des objets s’en voient modifiées.
On s’occupe du cas du shooter et des météorites : si la météorite percute le shooter, elle explose.
preload() { ...
this.load.spritesheet('meteorExplosion', 'assets/tiledExplosion.png', { frameWidth: 128, frameHeight: 64 });
}
create() {....
this.physics.add.overlap(this.shooter,this.meteorGroup,this.handleShooterMeteorCollision,undefined,this);
....}
L’instruction ci-dessus faite depuis create, génère un appel à la fonction handleShooterMeteorOverlap lorsqu’il y a chevauchement entre le shooter et une météorite.
handleShooterMeteorCollision(shooter,meteor) {
meteor.play('explosion');
meteor.once(Phaser.Animations.Events.ANIMATION_COMPLETE, () => {
meteor.destroy();
});
}On définit l’animation de l’explosion depuis l’objet Meteor.
export default class Meteor extends Phaser.Physics.Arcade.Sprite {
constructor(scene, x, y, texture) {
super(scene,x,y,texture);
scene.anims.create({
key: 'explosion',
frameRate: 25,
frames: scene.anims.generateFrameNumbers('meteorExplosion', { start: 0, end: 10 }),
repeat: 0
});
}handleShooterMeteorCollision joue l’animation de l’explosion et lorsqu’elle est jouée, la météorite est détruite. En l’état, c’est imparfait puisque l’animation de l’explosion est bloquée tant que le shooter chevauche la météorite et tourne sur elle-même. Pour éviter cet écueil, il suffit de désactiver le moteur physique de l’objet en appelant la méthode disableBody.
handleShooterMeteorCollision(shooter,meteor) {
meteor.disableBody();
meteor.play('explosion');
meteor.once(Phaser.Animations.Events.ANIMATION_COMPLETE, () => {
meteor.destroy();
}) ;
}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 {
....}Les collisions entre shooter, lasers et météorites étant gérer, la suite du travail va consister à rendre le jeu évolutif en découplant les parties graphiques.
