Issue with button fading?

Phaser 3
21

Look at targets property.

22

@jjcapellan, I do :

this.__scene.tweens.add({
  targets: this.__btnObjects,

not :

this.__scene.tweens.add({
  targets: this.__btnObjects [ __i ],
23

@jjcapellan : it’s still not fading :frowning: :

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, 
		repeat : 0, 
		duration : 750, 
		alpha : { from : 1.0, to : 0.0 }, 
		yoyo : false, 
		onComplete : ( ) => {
			this.__scene.scene.start (
				this.__buttonTargetScene [ __i ], 
			);
		}
	});
}.bind ( this ) );
24

what am i doing wrong here?

25

I have seen the source code in your repository:

  1. The button class extends Phaser.Scene, so it does not have an alpha property, and consequently tweens do nothing. I would extend a Phaser.Image class.
  2. As I told you before, using a variable as a counter in a loop that is outside its scope (this .__ i), when using listeners or other asynchronous functions, is a problem.

In your case before continuing, I would try to get the functionality you want by modifying a simple example:
http://labs.phaser.io/edit.html?src=src\tweens\on%20complete%20callback.js
Once you have achieved the basic functionality, then you can implement it in your project. I think that it is easier to find errors.
Take your time to analyze your code and read the documentation and examples, each time you introduce new functionality in your project.
Greetings.

26

just updated it with the changes you specify. It is still not tweening.

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

In 'Button.js' :

var Button = new Phaser.Class

({

	Extends : Phaser.Image,

In 'TitleScene.js' :

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, 
            repeat : 0, 
            duration : 750, 
            alpha : { from : 1.0, to : 0.0 }, 
            yoyo : false, 
            onComplete : ( ) => {
                this.__scene.scene.start (
                    this.__buttonTargetScene [ __i ], 
                );
            }
        });
    }.bind ( this ) );

}
27

If you had seen the documentation link you would have noticed that the correct class is Phaser.GameObjects.Image (misspelled). And you would have seen that the constructor is different from that of the Phaser.Scene class.
Here is a useful example:
http://labs.phaser.io/edit.html?src=src\game%20objects\images\custom%20image%20class.js
On the other hand your class button hasn’t texture because you have not passed any to the constructor. What you see is a sprite that is generated by that class, but the tween that you have created affects only the ** alpha ** property of the button class, not the property of a property of the button class (button.button.alpha).

28

so i decided to try it a little differently.

fadeButtons : function ( ) {

    this.__scene.tweens.add ({
        targets : this.__btnObjects, 
        repeat : 0, 
        duration : 750, 
        alpha : 0, 
        yoyo : false, 
        onComplete : ( ) => {
            this.__scene.scene.start (
                this.__buttonTargetScene, 
            );
        }
    });

}, 

this.__btnObjects = [ ];

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

this.__btnObjects [ __i ].button.on ( 'pointerdown', this.fadeButtons, this );

what am i doing wrong here?

i put the fading code inside of its’ own function.

29

The problem is the tween targets, which are Button, have no alpha property. They have button.alpha and __text.alpha properties.

You can either

  • Collect all the button and __text objects and use them as targets;
  • Add an alpha setter to the Button class so it can be tweened; or
  • Make Button extend Container so it has a real alpha property (and others). You would have to use it like a container, though, with add() etc.

If you just want to get it working then change tween targets to

this.__btnObjects.flatMap((b) => [b.button, b.__text])
30

@samme : IT WORKS! THANK YOU SOOOOO MUCH, sir! <3

PS. You may want to edit your typo above : It’s 'flatMap', not 'flapMap' :slight_smile:

Here’s the working demo :

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

Here’s the working code :

this.__btnObjects = [ ];

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 ] );

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

}
31

@samme : so now that it’s working, how can i add say my

this.__myArrowLeft = this.add.text ( ... );

& other options to 'flatMap' in order to fade out all other buttons & text?

Here’s the direct link to the demo :

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

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

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

32

someone can help?

33

Not in flatMap(), but you can add to that array somehow

flatMap(…).push(this.__myArrowLeft)

Do you want to just fade out every object in the scene? then it’s

targets: this.children.getChildren()