Extending - Alpha and Visibility no longer working

Phaser 3
1

Apologies if this is very basic, but having some problems extending a text object. Alpha and visibility no longer seem to work. Tried as a sprite also. I’m sure it’s something simple I’m overlooking.

I would assume alpha and visibility would just work having extended a class that contains them?

Class

export default class Button extends Phaser.GameObjects.Text {

    constructor(x, y, label, scene, callback) {
            
        super (scene, x, y)

        this.scene = scene;
        this.x = x;
        this.y = y;
        this.alpha;
        console.log(this.alpha); // RETURNS AS 1.
       
       const border = scene.add.text(x -2, y -2, label)
            .setOrigin(0)
            
            .setPadding(12)
            .setStyle({ fontFamily: 'K2D-Regular', fontSize: '18px', fill: '#FFF', backgroundColor: '#46aafe' })
            .setInteractive({ useHandCursor: true })
       
            .on('pointerover', () => button.setStyle({  }))
            .on('pointerout', () => button.setStyle({  }));
       
       
       const btn = scene.add.text(x, y, label)
            .setOrigin(0)
            .setPadding(10)
            .setStyle({ fontFamily: 'K2D-Regular', fontSize: '18px', fill: '#FFF', backgroundColor: '#13173c' })
            .setInteractive({ useHandCursor: true })
            .on('pointerdown', () => callback())
            .on('pointerover', () => btn.setStyle({ backgroundColor: '#4d2359' }))
            .on('pointerout', () => btn.setStyle({ backgroundColor: '#13173c' }));

      
     }

}

In the scene
Alpha is logged as 0 but the button is still visible.

    changeLanguage = new Button(150, 150, '< GO BACK', this, () => this.showLanguages());
    
    changeLanguage.alpha = 0;

   console.log (changeLanguage.alpha);

EDIT: Looks like I can’t set any properties of it within a scene once it’s created. X/Y etc. Help!

Thanks!

2

Button itself has no text content, so nothing will appear no matter what the alpha is. If you added this.setText('HELLO') you would see it.

For what you’re doing you may want to extend Phaser.GameObjects.Container instead. Then

const border = scene.add.text(-2, -2, label) // …
const btn = scene.add.text(0, 0, label) // …
4

I believe I worked it out:

export default class Button extends Phaser.GameObjects.Container {

    constructor(scene, x, y, label, callback) {
            
        super(scene);
        this.scene = scene;
        this.x = x;
        this.y = y;
      
        this.scene.add.existing(this);
        
       const text1 = this.scene.add.text(x -2, y -2, label)
            .setOrigin(0)
            .setPadding(12)
            .setStyle({ fontFamily: 'K2D-Regular', fontSize: '20px', fill: '#FFF', backgroundColor: '#46aafe', fontStyle: 'bold'})
            .setInteractive({ useHandCursor: true });
            
        
       const text2 = this.scene.add.text(x, y, label)
       .setOrigin(0)
       .setPadding(10)
       .setStyle({ fontFamily: 'K2D-Regular', fontSize: '20px', fill: '#FFF', backgroundColor: '#13173c' , fontStyle: 'bold'})
       .setInteractive({ useHandCursor: true })
       .on('pointerdown', () => callback())
       .on('pointerover', () => text2.setStyle({ backgroundColor: '#4d2359' }))
       .on('pointerout', () => text2.setStyle({ backgroundColor: '#13173c' }));

       this.button = this.scene.add.container(0, 0, [ text1, text2 ]);
      
     }

}

//IN THE SCENE
    this.btn = new Button(this, 50, 50, '< GO BACK', () => this.showRegions() );
    this.btn.button.alpha = 1;
    this.btn.button.x = 1000;

Thanks Samme. Also this tutorial helped:

5

Oh I forgot, you would do

this.add([text1, text2]);

Otherwise they’re not in the container.

That was the reason for changing the x y coordinates.