I'm facing an issue with Phaser 3.
Whenever I use setCollideWorldBounds, I get an error saying "Cannot read property 'setCollideWorldBounds' of null" and the overlapping function doesn't seem to work. What's even more strange is that in my game config, the debug option is set to true, but it's only not visible in this particular sprite.
Game Config
export const config = {
type: Phaser.AUTO,
backgroundColor: "#125555",
width: 1200,
height: 900,
scene: Battle,
physics: {
default: "arcade",
arcade: {
debug: true,
},
},
};
const game = new Phaser.Game(config);
Player.ts
export class Player extends Phaser.Physics.Arcade.Sprite {
constructor(scene: Phaser.Scene, texture: string) {
super(scene, config.width / 2, config.height - 150, texture);
scene.add.existing(this);
}
....
My Scene
export class Battle extends Phaser.Scene {
private player: Player;
private enemy1: Enemy;
private enemy2: Enemy;
private enemy3: Enemy;
constructor() {
super("playGame");
}
preload() {
this.load.image("background", "assets/space.png");
this.load.image("player", "assets/playerShip.png");
this.load.image("bullet", "assets/laserBullet.png");
this.load.image("enemy1", "assets/enemy1.png");
this.load.image("enemy2", "assets/enemy2.png");
this.load.image("enemy3", "assets/enemy3.png");
}
create() {
this.player = new Player(this, "player");
this.player.setScale(0.09);
this.player.setCollideWorldBounds(true);
this.enemy1 = new Enemy(this, "enemy1");
this.enemy2 = new Enemy(this, "enemy2");
this.enemy3 = new Enemy(this, "enemy3");
this.enemies = this.physics.add.group();
this.enemies.add(this.enemy1);
this.enemies.add(this.enemy2);
this.enemies.add(this.enemy3);
this.playerCollision = this.physics.add.overlap(
this.player,
this.enemies,
this.hitPlayer,
null,
this
);
hitPlayer(player: Phaser.Physics.Arcade.Sprite, enemies) {
this.resetEnemy(enemies);
}
resetEnemy(enemy) {
enemy.y = 0;
let randomX = Phaser.Math.Between(0, config.width);
enemy.x = randomX;
}
....