Problem with Buttons?

Phaser 3
1

So I have this TitleScene.js :

class TitleScene extends Phaser.Scene {

	constructor ( ) {
		super ( 'Title' );
	}

	this.__scene = this;

	this.__button = [ ];

	this.__buttonFadeInAlphaLevel = [ ];
	this.__buttonFadeInAlphaDuration = [ ];

	this.__buttonX = [

		( config.width / 2 ), 
		( config.width / 2 ), 
		( config.width / 2 ), 

	];

	this.__buttonY = [

		( ( config.height / 2 ) - 100 ), 
		( ( config.height / 2 ) ), 
		( ( config.height / 2 ) + 100 )

	];

	this.__buttonKeys = [

		'blueButton1', 'blueButton2', 

	];

	this.__buttonText = [

		'Play', 'Options', 'Credits', 

	];

	this.__buttonTargetScene = [

		'Game', 'Options', 'Credits', 

	];

	this.__buttonLocked = [

		true, true, true, 

	];

	CreateGameButton ( __objData ) {

		this.__objData = __objData;

		this.__buttonObj = {

			scene : this.__objData.scene, 
			x : this.__objData.x, 
			y : this.__objData.y, 
			key1 : this.__objData.key1, 
			key2 : this.__objData.key2, 
			text : this.__objData.text, 
			targetScene : this.__objData.targetScene, 
			locked : this.__objData.locked, 

		}

		this.__buttons = new Button ( this.__buttonObj.scene, {

			x : this.__buttonObj.x, y : this.__buttonObj.y, 
			key1 : this.__buttonObj.key1, key2 : this.__buttonObj.key2, text : this.__buttonObj.text, 
			locked : this.__buttonObj.locked, 

		} );

		return this.__buttons;

	}

	for ( this.__i = 0; this.__i <= 2; this.__i++ ) {

		this.__button [ this.__i ] = this.CreateGameButton ({
			scene : this.__scene, x : this.__buttonX [ this.__i ], y : this.__buttonY [ this.__i ], 
			key1 : this.__buttonKeys [ 0 ], key2 : this.__buttonKeys [ 1 ], text : this.__buttonText [ this.__i ], 
			targetScene : this.__buttonTargetScene [ this.__i ], locked : this.__buttonLocked [ this.__i ], 
		});

	}

}

& this working Button.js :

class Button extends Phaser.GameObjects.Container {

	constructor ( scene, __objData ) {

		super ( scene, __objData );

		this.__objData = __objData;

		this.__scene = scene;
		this.__x = this.__objData.x;
		this.__y = this.__objData.y;
		this.__key1 = this.__objData.key1;
		this.__key2 = this.__objData.key2;
		this.__bText = this.__objData.text;
		this.__buttonLocked = this.__objData.locked;
		this.__targetScene = this.__objData.targetScene;

		this.__scene = scene;
		this.x = this.__x;
		this.y = this.__y;

		this.button = this.__scene.add.sprite ( 0, 0, this.__key1 ).setInteractive ( );

		this.__text = this.__scene.add.text ( 0, 0, this.__bText, {
			fontSize : '32px', 
			fill : '#fff', 
		} );

		Phaser.Display.Align.In.Center ( this.__text, this.button );

		this.add ( this.button );
		this.add ( this.__text );

		this.button.on ( 'pointerdown', function ( ) {
			if ( this.__buttonLocked === false ) {
				this.__scene.scene.start ( this.targetScene );
			}
		}.bind ( this ) );

		this.button.on ( 'pointerover', function ( ) {
			if ( this.__buttonLocked === false ) {
				this.button.setTexture ( this.__key2 );
			}
		}.bind ( this ) );

		this.button.on ( 'pointerout', function ( ) {
			if ( this.__buttonLocked === false ) {
				this.button.setTexture ( this.__key1 );
			}
		}.bind ( this ) );

		this.__scene.add.existing ( this );

	}

}

& this non-working Button.js :

class Button extends Phaser.GameObjects.Container {

	constructor ( __objData ) {

		super ( __objData );

		this.__objData = __objData;

		this.__scene = this.__objData.scene;
		this.__x = this.__objData.x;
		this.__y = this.__objData.y;
		this.__key1 = this.__objData.key1;
		this.__key2 = this.__objData.key2;
		this.__bText = this.__objData.text;
		this.__buttonLocked = this.__objData.locked;
		this.__targetScene = this.__objData.targetScene;

		this.scene = this.__scene;
		this.x = this.__x;
		this.y = this.__y;

		this.button = this.__scene.add.sprite ( 0, 0, this.__key1 ).setInteractive ( );

		this.__text = this.__scene.add.text ( 0, 0, this.__bText, {
			fontSize : '32px', 
			fill : '#fff', 
		} );

		Phaser.Display.Align.In.Center ( this.__text, this.button );

		this.add ( this.button );
		this.add ( this.__text );

		this.button.on ( 'pointerdown', function ( ) {
			if ( this.__buttonLocked === false ) {
				this.__scene.scene.start ( this.targetScene );
			}
		}.bind ( this ) );

		this.button.on ( 'pointerover', function ( ) {
			if ( this.__buttonLocked === false ) {
				this.button.setTexture ( this.__key2 );
			}
		}.bind ( this ) );

		this.button.on ( 'pointerout', function ( ) {
			if ( this.__buttonLocked === false ) {
				this.button.setTexture ( this.__key1 );
			}
		}.bind ( this ) );

		this.__scene.add.existing ( this );

	}

}

I’m trying to fix this issue that is not allowing me to use :

class Button extends Phaser.GameObjects.Container {
    constructor ( __objData ) {
        super ( __objData );
        this.__objData = __objData;
        this.__scene = this.__objData.scene;
    });
...

instead of :

class Button extends Phaser.GameObjects.Container {
    constructor ( scene, __objData ) {
        super ( scene, __objData );
        this.__objData = __objData;
        this.__scene = scene;
    });
...

The problem is scene & this.__objData.scene are both the same but for some reason I’m getting the error phaser.js:2862 Uncaught TypeError: Cannot read property 'queueDepthSort' of undefined
when calling :

this.__buttons = new Button ({
    scene : this.__buttonObj.scene, x : this.__buttonObj.x, y : this.__buttonObj.y, 
    key1 : this.__buttonObj.key1, key2 : this.__buttonObj.key2, text : this.__buttonObj.text, 
    locked : this.__buttonObj.locked, 
});

as opposed to calling :

this.__buttons = new Button ( this.__buttonObj.scene, {
    x : this.__buttonObj.x, y : this.__buttonObj.y, 
    key1 : this.__buttonObj.key1, key2 : this.__buttonObj.key2, text : this.__buttonObj.text, 
    locked : this.__buttonObj.locked, 
} );

Any help is greatly appreciated!

2

super is Container’s constructor so the arguments must match

(scene, x?, y?, children?)
3

@samme : Ok, so I just tried that & it worked. Problem is, I used to be able to click on the buttons & it would go to another scene. But right now when I click them, they disappear then reappear.

4

Try phaser-plugin-scene-watcher, it can help you figure out what the scenes are doing at least.

5

@samme : does this work with 3.21.0? If not, how can I make it work with 3.21.0 ?

6

It should.