Issue with button fading?

Thundros · January 9, 2020, 6:09pm

so i’m trying to fade out all of my menu buttons at the same time when clicking on 1 of the menu buttons, but for some reason it’s only fading out the one i clicked on when it should fade out all my buttons at the same time when clicked.

Here’s the direct link to project :

https://thundros.github.io/menu-system-doosan/

Here’s the direct link to 'Button.js' :

https://thundros.github.io/menu-system-doosan/src/Objects/Button.js

Here’s the direct link to 'TitleScene.js' :

https://thundros.github.io/menu-system-doosan/src/Scenes/TitleScene.js

Here’s the code{s} in 'TitleScene.js' to create the button{s}, Line{s} '85 - 106' & '198 - 220' :

CreateGameButton : function ( __objData ) {

	this.__objData = __objData;
	this.__buttons = new Button ( );

	this.__buttons.CreateButton ({

		scene : this.__objData.scene, 
		add : this.__objData.add, 
		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, 

	});

	return this.__buttons;

},

in 'create ( )' :

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

	// Game

	this.__button [ this.__i ] = this.CreateGameButton ({
		scene : this.__scene, add : this.add, 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.__buttonFadeInAlphaLevel [ this.__i ] = this.__fadeInMenu ( ).__buttonAlphaLevel [ this.__i ];
	this.__buttonFadeInAlphaDuration [ this.__i ] = this.__fadeInMenu ( ).__buttonAlphaDuration [ this.__i ];

	this.tweens.add ({
		targets : this.__button [ this.__i ], 
		alpha : this.__buttonFadeInAlphaLevel [ this.__i ], 
		duration : this.__buttonFadeInAlphaDuration [ this.__i ], 
	});

	this.__btnObjects.push ( this.__button [ this.__i ] );
		console.log ( this.__button [ this.__i ] );
	}

}

Here’s the code{s} in 'Button.js' used to attempt to fade out all buttons :

In 'Button.js', Line{s} '63 - 78' :

this.button.on ( 'pointerdown', function ( ) {
    this.__scene.tweens.add ({
        targets : [
            this.button, this.__text, 
        ], 
        targetScenes : this.__targetScene, 
        repeat : 0, 
        duration : 750, 
        alpha : { from : 1.0, to : 0.0 }, 
        easeType : 'Linear', 
        yoyo : false, 
        onComplete : ( ) => {
            this.__scene.scene.start ( this.__targetScene );
        }
    });
}.bind ( this ) );

Hopefully I explained correctly. If not, please do let me know & I will do my best to go into it in more depth.

Any help is as always, GREATLY appreciated!

samme · January 9, 2020, 8:33pm

You need to include all the buttons in tween targets.

Also, Button shouldn’t extend Phaser.Scene.

Thundros · January 9, 2020, 8:33pm

@samme : but i thought i do that with 'this.button' ?

samme · January 9, 2020, 8:35pm

I think it’s just one.

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

Thundros · January 9, 2020, 8:36pm

@samme : so what would i add?

samme · January 9, 2020, 8:39pm

Maybe do it from TitleScene instead, using targets: this.__btnObjects.

Thundros · January 9, 2020, 9:07pm

@samme : what am I doing wrong here? the buttons show up, but when I click on 1 of them, I get an error : phaser.js:29829 Uncaught TypeError: Cannot read property 'hasOwnProperty' of undefined :

CreateGameButton : function ( __objData ) {

	this.__objData = __objData;
	this.__buttons = new Button ( );

	this.__buttons.CreateButton ({

		scene : this.__objData.scene, 
		add : this.__objData.add, 
		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, 

	});

	return this.__buttons;

},

this.__btnObjects = [ ];

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

	// Game

	this.__button [ this.__i ] = this.CreateGameButton ({
		scene : this.__scene, add : this.add, 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.__buttonFadeInAlphaLevel [ this.__i ] = this.__fadeInMenu ( ).__buttonAlphaLevel [ this.__i ];
	this.__buttonFadeInAlphaDuration [ this.__i ] = this.__fadeInMenu ( ).__buttonAlphaDuration [ this.__i ];

	this.tweens.add ({
		targets : this.__button [ this.__i ], 
		alpha : this.__buttonFadeInAlphaLevel [ this.__i ], 
		duration : this.__buttonFadeInAlphaDuration [ this.__i ], 
	});

	this.__btnObjects.push ( this.__button [ this.__i ] );
	console.log ( this.__button [ this.__i ] );

	this.__btnObjects [ this.__i ].button.on ( 'pointerdown', function ( ) {
		this.__scene.tweens.add ({
			targets : [
				this.__btnObjects, this.__buttonText [ this.__i ], 
			], 
			targetScenes : this.__buttonTargetScene [ this.__i ], 
			repeat : 0, 
			duration : 750, 
			alpha : { from : 1.0, to : 0.0 }, 
			easeType : 'Linear', 
			yoyo : false, 
			onComplete : ( ) => {
				this.__scene.scene.start ( this.__buttonTargetScene );
			}
		});
	}.bind ( this ) );

}

samme · January 10, 2020, 12:31am

Re. the tween config,

targets must be an array of objects to tween, so buttons only.
targetScenes isn’t a tweenable property of the targets, so remove it.
Fix the argument to scene.start().

this.__scene.tweens.add({
  targets: this.__btnObjects,
  repeat: 0,
  duration: 750,
  alpha: { from: 1.0, to: 0.0 },
  yoyo: false,
  onComplete: () => {
    this.__scene.scene.start(this.__buttonTargetScene[this.__i]);
  }
});

Stepping through your code will help you find a lot of these problems.

Thundros · January 10, 2020, 8:03pm

@samme : now it’s not doing anything. It’s sitting there :

https://thundros.github.io/menu-system-doosan/

samme · January 10, 2020, 8:45pm

Thundros · January 10, 2020, 8:47pm

Yes, but after that what does that mean? I don’t see what’s going on here.

samme · January 10, 2020, 9:38pm

Look at the value of this.__buttonTargetScene[this.__i], in Watch Expressions.

Thundros · January 10, 2020, 10:20pm

@samme : But why? Why is it undefined?

Thundros · January 10, 2020, 10:22pm

@samme : I define it above as :

this.__buttonTargetScene = [

	'GameScene', 'OptionsScene', 'CreditsScene', 

];

jjcapellan · January 11, 2020, 12:19am

Hi @Thundros,
If you look at the @samme screenshot:
this.__i == 3
Therefore:
this.__buttonTargetScene[3] == undefined
You are using this loop:
for ( this.__i = 0; this.__i <= 2; this.__i++ ){}
this.__i reaches the value 3 because it is outside the block scope and the instruction this.__i++ is the last to execute in the loop.
With let keyword you can add block scope:
for ( let i = 0; i <= 2; i++ ){}
Good luck.

Thundros · January 11, 2020, 12:20am

@jjcapellan : are you saying it should be '< 2' instead of '<= 2' ?

jjcapellan · January 11, 2020, 12:27am

You have to change your loop variable scope.

Thundros · January 11, 2020, 12:30am

@jjcapellan : like this? :

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

	// Game

	this.__button [ this.__i ] = this.CreateGameButton ({
		scene : this.__scene, add : this.add, 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.__buttonFadeInAlphaLevel [ this.__i ] = this.__fadeInMenu ( ).__buttonAlphaLevel [ this.__i ];
	this.__buttonFadeInAlphaDuration [ this.__i ] = this.__fadeInMenu ( ).__buttonAlphaDuration [ this.__i ];

	this.__btnObjects.push ( this.__button [ this.__i ] );
	console.log ( this.__button [ this.__i ] );

	this.tweens.add ({
		targets : this.__btnObjects [ this.__i ], 
		alpha : this.__buttonFadeInAlphaLevel [ this.__i ], 
		duration : this.__buttonFadeInAlphaDuration [ this.__i ], 
	});

	this.__btnObjects [ this.__i ].button.on ( 'pointerdown', function ( ) {
		for ( this.__j = 0; this.__j <= 2; this.__j++ ) {
			this.__scene.tweens.add ({
				targets : this.__btnObjects [ this.__j ], 
				repeat : 0, 
				duration : 750, 
				alpha : { from : 1.0, to : 0.0 }, 
				yoyo : false, 
				onComplete : ( ) => {
					this.scene.start (
						this.__buttonTargetScene, 
					);
				}
			});
		}
	}.bind ( this ) );

}

jjcapellan · January 11, 2020, 12:37am

No.
I mean the variable you are using as a loop counter. If you use the keyword this (this.i), you are taking it out of the loop scope.
The solution:

Thundros · January 11, 2020, 12:46am

@jjcapellan : so it’s working now, but why it is not fading all 3 buttons out when 1 is pressed? :

for ( let __i = 0; __i <= 2; __i++ ) {

	// Game

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

	this.__buttonFadeInAlphaLevel [ __i ] = this.__fadeInMenu ( ).__buttonAlphaLevel [ __i ];
	this.__buttonFadeInAlphaDuration [ __i ] = this.__fadeInMenu ( ).__buttonAlphaDuration [ __i ];

	this.__btnObjects.push ( this.__button [ __i ] );
	console.log ( this.__button [ __i ] );

	this.tweens.add ({
		targets : this.__btnObjects [ __i ], 
		alpha : this.__buttonFadeInAlphaLevel [ __i ], 
		duration : this.__buttonFadeInAlphaDuration [ __i ], 
	});

	this.__btnObjects [ __i ].button.on ( 'pointerdown', function ( ) {
		this.__scene.tweens.add ({
			targets : this.__btnObjects [ __i ], 
			repeat : 0, 
			duration : 750, 
			alpha : { from : 1.0, to : 0.0 }, 
			yoyo : false, 
			onComplete : ( ) => {
				this.scene.start (
					this.__buttonTargetScene [ __i ], 
				);
			}
		});
	}.bind ( this ) );

}

this.__btnObjects [ __i ].button.on ( 'pointerdown', function ( ) {
	this.__scene.tweens.add ({
		targets : this.__btnObjects [ __i ], 
		repeat : 0, 
		duration : 750, 
		alpha : { from : 1.0, to : 0.0 }, 
		yoyo : false, 
		onComplete : ( ) => {
			this.scene.start (
				this.__buttonTargetScene [ __i ], 
			);
		}
	});
}.bind ( this ) );

Topic		Replies	Views
Issue with button alpha? Phaser 3	6	510	December 23, 2019
sound button isn't work properly Phaser 3	0	333	February 25, 2021
Button increments before getting destroyed Phaser 3	3	213	March 13, 2023
Implementing menu keyboard controls Phaser 3	3	1331	March 11, 2019
Gamepad help Phaser 3	3	702	July 18, 2022

Issue with button fading?

Related Topics