Access class properties into methods

Phaser 3
1

Hi guys !

I have a problem to accessing properties into methods of my class. I get error “property X is not defined”
My code :

window.onload = function(){

			let widthGame = 576;
			let heightGame = 720;

			let config = {
				type: Phaser.AUTO,
				width: widthGame,
				height: heightGame,

				physics: {
					default: 'arcade'
				},

				scene: {
					preload: preload,
					create: create,
					update: update
				}
			}

			let game = new Phaser.Game(config);
			let currentScene;
			let player;
			let delta = (60/1000);

			//CLASSES
			class Player{
				constructor(posX, posY, spr, scene){
					this.currentScene = scene;
					this.sprite = this.currentScene.add.sprite(posX, posY, spr);
					this.velocLeft = 0;
					this.velocRight = 0;
					this.velocUp = 0;
					this.velocDown = 0;
					this.tabLasers = [];
					this.keyLeft = this.currentScene.input.keyboard.addKey('q');
					this.keyRight = this.currentScene.input.keyboard.addKey('d');
					this.keyUp = this.currentScene.input.keyboard.addKey('z');
					this.keyDown = this.currentScene.input.keyboard.addKey('s');
					this.delayShoot = 1500.0;
					this.timerShoot;
					this.shoot();
				}

				move(){
					if(this.keyDown.isDown){
						this.velocDown = 80.0;
						this.sprite.y += delta * this.velocDown;
					}

					if(this.keyDown.isUp){
						this.velocDown = 0.0;
					}

					if(this.keyUp.isDown){
						this.velocUp = -80.0;
						this.sprite.y += delta * this.velocUp;
					}

					if(this.keyUp.isUp){
						this.velocUp = 0.0;
					}

					if(this.keyRight.isDown){
						this.velocRight = 80.0;
						this.sprite.x += delta * this.velocRight;
					}

					if(this.keyRight.isUp){
						this.velocRight = 0.0;
					}

					if(this.keyLeft.isDown){
						this.velocLeft = -80.0;
						this.sprite.x += delta * this.velocLeft;
					}

					if(this.keyLeft.isUp){
						this.velocLeft = 0.0;
					}
				}

				shoot(){
					this.timerShoot = setInterval(function(){
						let sprLaser = this.currentScene.add.sprite(this.sprite.x, this.sprite.y, 'laser');
					}, this.delayShoot);
				}
			}

			function preload(){
				this.load.image('player', 'ASSETS/SPRITES/spaceship.png');
				this.load.image('laser', 'ASSETS/SPRITES/bullet.png');
			}

			function create(){
				currentScene = this;
				player = new Player(0, 0, 'player', currentScene);
			}

			function update(){
				player.move();
			}
		};

Error :
(index):99 Uncaught TypeError: Cannot read property ‘add’ of undefined
at (index):99

2

I’m not sure what this is refering to here so add a console.log(this) to check

3

This is a console screen :

screen_error_phaser_2
screen_error_phaser_21920×1080 160 KB

4

Look the structure of this example

or this one

5

I followed the examples on inheriting classes from Sprite but am not getting what I want. I still have some mistakes that I don’t understand
My code :

window.onload = function(){

			let widthGame = 576;
			let heightGame = 720;

			let config = {
				type: Phaser.AUTO,
				width: widthGame,
				height: heightGame,

				physics: {
					default: 'arcade'
				},

				scene: {
					preload: preload,
					create: create,
					update: update
				}
			}

			let game = new Phaser.Game(config);
			let currentScene;
			let player;
			let delta = (60/1000);

			//CLASSES

			//LASER
			class Laser extends Phaser.GameObjects.Sprite{
				constructor(scene, posX, posY, spr){
					super(scene, posX, posY, spr);
				}
			}

			//JOUEUR 
			class Player extends Phaser.GameObjects.Sprite{
				constructor(posX, posY, spr, scene){
					super(scene, posX, posY, spr);
					//this.currentScene = scene;
					this.velocLeft = 0;
					this.velocRight = 0;
					this.velocUp = 0;
					this.velocDown = 0;
					this.tabLasers = [];
					//this.keyLeft = this.currentScene.input.keyboard.addKey('q');
					//this.keyRight = this.currentScene.input.keyboard.addKey('d');
					//this.keyUp = this.currentScene.input.keyboard.addKey('z');
					//this.keyDown = this.currentScene.input.keyboard.addKey('s');
					this.keyLeft = this.scene.input.keyboard.addKey('q');
					this.keyRight = this.scene.input.keyboard.addKey('d');
					this.keyUp = this.scene.input.keyboard.addKey('z');
					this.keyDown = this.scene.input.keyboard.addKey('s');
					this.delayShoot = 1500.0;
					this.timerShoot;
					this.shoot();
				}

				move(){
					if(this.keyDown.isDown){
						this.velocDown = 80.0;
						//this.sprite.y += delta * this.velocDown;
						this.y += delta * this.velocDown;
					}

					if(this.keyDown.isUp){
						this.velocDown = 0.0;
					}

					if(this.keyUp.isDown){
						this.velocUp = -80.0;
						//this.sprite.y += delta * this.velocUp;
						this.y += delta * this.velocUp;
					}

					if(this.keyUp.isUp){
						this.velocUp = 0.0;
					}

					if(this.keyRight.isDown){
						this.velocRight = 80.0;
						//this.sprite.x += delta * this.velocRight;
						this.x += delta * this.velocRight;
					}

					if(this.keyRight.isUp){
						this.velocRight = 0.0;
					}

					if(this.keyLeft.isDown){
						this.velocLeft = -80.0;
						//this.sprite.x += delta * this.velocLeft;
						this.x += delta * this.velocLeft;
					}

					if(this.keyLeft.isUp){
						this.velocLeft = 0.0;
					}
				}

				shoot(){
					this.timerShoot = setInterval(function(){
						//let sprLaser = this.currentScene.add.existing(this.x, this.y, 'laser');
						//let sprLaser = this.scene.add.existing(this.x, this.y, 'laser');
						let sprLaser = this.scene.add.existing(new Laser(this.scene, this.x, this.y, 'laser'));
					}, this.delayShoot);
				}
			}

			function preload(){
				this.load.image('player', 'ASSETS/SPRITES/spaceship.png');
				this.load.image('laser', 'ASSETS/SPRITES/bullet.png');
			}

			function create(){
				//console.log(this);
				//currentScene = this;
				player = this.add.existing(new Player(0, 0, 'player', this));
			}

			function update(){
				player.move();
			}
		};

A screen console :

error_phaser_3_3
error_phaser_3_31920×1080 105 KB

6

Try this please and make a screen of the console.log

7

i screen that, an console screen is displayed on my previous post

8

The console.log doesn’t appears but don’t worry, i’m testing your code to see what is happening

9

Ok, since the beginning i’m looking at wrong lines. The problem comes from the setInterval function, inside it, this is window and not the scene.
With Phaser, it’s recommended to never use setInterval and use phaser internal time events.

window.onload = function(){

			let widthGame = 576;
			let heightGame = 720;

			let config = {
				type: Phaser.AUTO,
				width: widthGame,
				height: heightGame,

				physics: {
					default: 'arcade'
				},

				scene: {
					preload: preload,
					create: create,
					update: update
				}
			}

			let game = new Phaser.Game(config);
			let currentScene;
			let player;
			let delta = (60/1000);

			//CLASSES

			//LASER
			class Laser extends Phaser.GameObjects.Sprite{
				constructor(scene, posX, posY, spr){
					super(scene, posX, posY, spr);
				}
			}

			//JOUEUR 
			class Player extends Phaser.GameObjects.Sprite{
				constructor(posX, posY, spr, scene){
					super(scene, posX, posY, spr);
					//this.currentScene = scene;
                    this.scene = scene;
					this.velocLeft = 0;
					this.velocRight = 0;
					this.velocUp = 0;
					this.velocDown = 0;
					this.tabLasers = [];
					//this.keyLeft = this.currentScene.input.keyboard.addKey('q');
					//this.keyRight = this.currentScene.input.keyboard.addKey('d');
					//this.keyUp = this.currentScene.input.keyboard.addKey('z');
					//this.keyDown = this.currentScene.input.keyboard.addKey('s');
					this.keyLeft = this.scene.input.keyboard.addKey('q');
					this.keyRight = this.scene.input.keyboard.addKey('d');
					this.keyUp = this.scene.input.keyboard.addKey('z');
					this.keyDown = this.scene.input.keyboard.addKey('s');
					this.delayShoot = 1500.0;
					this.timerShoot;
					this.shoot();
				}

				move(){
					if(this.keyDown.isDown){
						this.velocDown = 80.0;
						//this.sprite.y += delta * this.velocDown;
						this.y += delta * this.velocDown;
					}

					if(this.keyDown.isUp){
						this.velocDown = 0.0;
					}

					if(this.keyUp.isDown){
						this.velocUp = -80.0;
						//this.sprite.y += delta * this.velocUp;
						this.y += delta * this.velocUp;
					}

					if(this.keyUp.isUp){
						this.velocUp = 0.0;
					}

					if(this.keyRight.isDown){
						this.velocRight = 80.0;
						//this.sprite.x += delta * this.velocRight;
						this.x += delta * this.velocRight;
					}

					if(this.keyRight.isUp){
						this.velocRight = 0.0;
					}

					if(this.keyLeft.isDown){
						this.velocLeft = -80.0;
						//this.sprite.x += delta * this.velocLeft;
						this.x += delta * this.velocLeft;
					}

					if(this.keyLeft.isUp){
						this.velocLeft = 0.0;
					}
				}

				shoot(){
                    this.timerShoot = this.scene.time.addEvent({
                        delay: this.delayShoot,
                        callback: () => {
                            let sprLaser = this.scene.add.existing(new Laser(this.scene, this.x, this.y, 'laser'));
                            console.log(sprLaser)
                        },
                        repeat: -1 // <-- -1 is infinity
                    })
					//this.timerShoot = setInterval(function(){
						////let sprLaser = this.currentScene.add.existing(this.x, this.y, 'laser');
						////let sprLaser = this.scene.add.existing(this.x, this.y, 'laser');
                        //console.log(this)
						//let sprLaser = this.scene.add.existing(new Laser(this.scene, this.x, this.y, 'laser'));
					//}, this.delayShoot);
				}
			}

			function preload(){
				this.load.image('player', 'ASSETS/SPRITES/spaceship.png');
				this.load.image('laser', 'ASSETS/SPRITES/bullet.png');
			}

			function create(){
				console.log(this);
				//currentScene = this;
				player = this.add.existing(new Player(0, 0, 'player', this));
                console.log(player)
			}

			function update(){
				//player.move();
			}
		};
10

Greats, it worked ! Thx