Thanks both to @Milton and @samme for the help. Here’s the working code:
Play.js
export default class Play extends Phaser.Scene {
create() {
//Player
this.player = new Player(this, 0, 0);
this.container = this.add.container(100, 100);
this.container.setSize(16, 16);
this.physics.world.enable(this.container);
this.container.add(this.player);
//Weapon
this.meleeWeapon = new MeleeWeapon(this, 0, 0);
this.physics.world.enable(this.meleeWeapon);
this.container.add(this.meleeWeapon);
this.meleeWeapon.setUp();
//Enemy
this.enemy = new Enemy(this, 600, 600);
this.enemies = this.add.group();
this.enemies.add(this.enemy)
//Collisions
this.physics.add.overlap(this.meleeWeapon, this.enemies, this.onMeetEnemy, false, this);
}
//the enemy class is in charge of subtracting damage from the enemy's health
onMeetEnemy(weapon, enemy) {
enemy.takeDamage(weapon.damage);
}
if(this.spaceBar.isDown) {
if(!this.meleeWeapon.isAttacking) {
this.meleeWeapon.attack();
}
}
onHitEnemy(weapon, enemy) {
if(weapon.isAttacking) {
enemy.takeDamage(this.meleeWeapon.damage);
weapon.body.enable = false;
}
}
}
Weapon.js
export default class MeleeWeapon extends Phaser.Physics.Arcade.Sprite
{
constructor (scene, x, y)
{
//... add to scene and so on...
this.anims.create({
key: 'attack',
frames: this.anims.generateFrameNames('meleeWeapon', {prefix:'meleeWeapon-attack-', start: 1, end: 4 }),
frameRate: 10,
repeat: 0
});
this.damage = 1;
}
setUp()
{
this.body.enable = false;
this.isAttacking = false;
}
attack ()
{
if(!this.isAttacking)
{
this.isAttacking = true;
this.body.enable = true;
this.attackAnimation = this.anims.play('attack', false);
this.attackAnimation.on('animationcomplete', () => {
this.body.enable = false;
this.isAttacking = false;
});
}
}
}