0

I'm working on a game that mostly uses the mouse as a controller. It has the player using the mouse to click on in game buttons. One set of buttons are supposed to disappear after being clicked on once, but for some reason I can't get this to happen. Below is the code for one of those buttons, with it being the same for all the others of this type, except for variable names.

this.gardenChoice = this.add.image(430, 200, 'gardenButton').setInteractive();
        this.gardenPrice = 100000000000;

        this.gardenChoice.on('pointerdown', function (pointer) {

            if (money >= this.gardenPrice){
                money = money - this.gardenPrice;
                this.garden = true;
                this.gardenChoice.setAlpha(0);
                this.bubble.setAlpha(0);
                this.speech.setText('');
                this.cost.setText('');
            }

        }, this);

The lines that deal with the gardenChoice image is where I suspect the trouble is. When adding the image to the scene, I had to put the setInteractive() on the end to make it work with the mouse, but I think its also making it impossible to use methods on it. I've tried the setAlpha() and destroy() methods, but neither had any effect.

I wish to know, is there a different method of some kind I can use to get the desired effect? I'm trying to have the button removed from the scene, or at least turn invisible, after it is clicked on.

If it helps, I'm using Phaser 3 in VSCode.

winner_joiner
  • 12,173
  • 4
  • 36
  • 61
EmptyStone
  • 235
  • 1
  • 7
  • this code should work. What is the value of the `money` variable? – winner_joiner May 21 '23 at 05:56
  • Its constantly going up. I'm making an incremental game for school. – EmptyStone May 21 '23 at 06:02
  • The amount that gets added is determined by adding a variable called profits, and then subtracting a variable called expenses. Expenses start at 20 and profits start at 50. – EmptyStone May 21 '23 at 06:05
  • but `money` has to bigger than `100000000000` to trigger the function and hide the button. – winner_joiner May 21 '23 at 06:07
  • Is that what wrong? I figured that one the destroy method was used it wouldn't matter. So I have to find another way to get the button to go away? – EmptyStone May 21 '23 at 06:10
  • If `money` is smaller that `this.gardenPrice` the whole if block will not be executed. I think this is just a misunderstanding. – winner_joiner May 21 '23 at 06:15
  • Were you implying that in order for the button to disappear, money has to stay higher than this.gardenPrice? If so, that can't be the answer. I've tried it with crazy high amounts and it still didn't disappear. – EmptyStone May 21 '23 at 08:43

1 Answers1

0

Okay I think I got your problem, and we have a issunderstanding.

  1. You want the Button to disapear after one click the disapear
  2. The button will only disapear if you call setAlpha(0), but this code is in the if-block and will only be called if money is greater equal this.gardenPrice

So there a few solutions:

  1. make money >= than this.gardenPrice
  2. or put the hide logic outside of the if-block. (would not make sense because the button would disapear without doing an action)
  3. or some other functional logic

In any case here is a Demo, showing what I mean:

document.body.style = 'margin:0;';

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 183,
    scene: { create }
}; 

function create () {
     this.label1 = this.add.text(35,30, 'Onetime Button')
        .setScale(1.5)
        .setOrigin(0)
        .setDepth(10)
        .setStyle({fontStyle: 'bold', fontFamily: 'Arial'});

   this.buttonGreen = this.add.rectangle(20,20, 220, 50, 0x00ff00)
        .setInteractive()
        .setOrigin(0);
        
        this.label2 = this.add.text(35, 100, 'Onetime Button')
        .setScale(1.5)
        .setOrigin(0)
        .setDepth(10)
        .setStyle({fontStyle: 'bold', fontFamily: 'Arial'});

   this.buttonRed = this.add.rectangle(20, 90, 220, 50, 0xff0000)
        .setInteractive()
        .setOrigin(0);
    
    let money = 100;
    
    let price = 10000;
    
    this.buttonGreen.on('pointerdown', function(){
        this.buttonGreen.setAlpha(0);
        this.label1.setAlpha(0);
    }, this);
    
     this.buttonRed.on('pointerdown', function(){
        if( money >= price){
            // ...do stuff
            alert('did suff');
        }
        this.buttonRed.setAlpha(0);
        this.label2.setAlpha(0);
    }, this);
}

new Phaser.Game(config);
<script src="//cdn.jsdelivr.net/npm/phaser/dist/phaser.min.js"></script>
winner_joiner
  • 12,173
  • 4
  • 36
  • 61
  • You have a few typos there, but I think I understand what to try. I hope it works. – EmptyStone May 21 '23 at 09:19
  • Wait, I already have money >= this.gardenPrice in the if statement, and even when that if statement is triggered, all the other lines work just fine. – EmptyStone May 21 '23 at 09:43
  • Stuff like this is why I suspected that this.GardenButton being set to interactive was causing the problem. – EmptyStone May 21 '23 at 09:44
  • Now I'm even more convinced that the button sprite being set to interactive is the problem. I just put if (this.garden == true){ this.gardenChoice.setAlpha(0); } way outside the code that activates on a button click. I did this with both the setAlpha and destroy methods, but neither worked, both left the button there. – EmptyStone May 21 '23 at 17:21
  • Hey, so I was running out of time, so I came up with a quick solution that hope doesn't ruin stuff. Outside of the if statements responsible for the button, I added more if statements that spawn new sprites on top of the buttons, sprite that say bought in green writing, implying that the button can't be clicked again. Sorry we never found a real solution. – EmptyStone May 23 '23 at 03:27