setInteractive variable scope inside a for loop

Phaser 3
1

This is a pared down version of the behaviour I am experiencing:

var target, gallery = [], counter;

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

var game = new Phaser.Game(config);

function create ()
{

target = this.add.text(80,100,"0", {fontFamily: 'Arial', fontSize: 40, color: '#fff'}).setOrigin(0.5, 0.5);

for (counter = 1; counter <= 6; counter++) {
    gallery[counter] = this.add.text( 80 + counter * 100, 100, counter, 
            {fontFamily: 'Arial', fontSize: 40, color: '#fff'}).setOrigin(0.5, 0.5);
    gallery[counter].setInteractive().on('pointerdown', 
            () => { target.setText = counter, console.log(counter)});
    }
    
}

Two problems here:

First, what I would like to happen is that the 0 gets replaced by whatever number gets clicked. That doesn’t happen. Why, what did I do wrong?

Second, the number that gets sent to the console is not the number that gets clicked, it’s actually 7. Which is what the counter variable ends up being after the end of the for loop. So how do I get the gallery items to remember the input from within the for loop, instead of referring back to the variable as it is after the for loop?

Thanks for any help, I am noob at Phaser.

2

Welcome to the forums, M0nty,

Firstly, the number you click never gets replaced by your desired number for two reasons. Reason 1 is because you are telling target to change its’ text, but you want gallery[counter] to change its’ text. Reason 2 is that you are setting an arbitrary variable of setText to whatever counter is. You don’t want this, you want to set the property of text instead. So target.setText = counter turns into gallery[counter].text = counter

Secondly, when you click on a number you always get 7 because the browser assesses whatever counter is when you click. Therefore, since the loop already ran, it will always log 7. To fix this, simply store a local variable within the for loop and print that instead.

So in your create function, you’ll want to have something like this:

function create ()
{
    for (let i = 0; i <= 6; i++) {
        let counter = i;
        gallery[counter] = this.add.text( 80 + counter * 100, 100, 0, 
            {fontFamily: 'Arial', fontSize: 40, color: '#fff'}).setOrigin(0.5, 0.5);
        gallery[counter].setInteractive().on('pointerdown', 
            () => {gallery[counter].text = counter, console.log(counter)});
    }
}
3

@Jake.Caron, thanks for answering, but your code suggestion doesn’t do what I’m asking.

Your code starts with the row of numbers like so:
0 0 0 0 0 0 0 0

And then when you click on one of the 1-6 numbers, e.g. three, the row of numbers becomes like so:
0 0 0 3 0 0 0

What I want to see is a row of numbers like so:
0 1 2 3 4 5 6

And then when you click on one of the 1-6 numbers, e.g. three, the row of numbers becomes like so:
3 1 2 3 4 5 6

This behaviour is helpful for a gallery (thus the variable name) of thumbnail pics of playable characters in your game which you might want to expand to a full picture profile, for example.

I get the concept that in my code the browser is using the current value of counter, which is 7 after the loop has iterated. Fair enough. So how do I get it to remember each different value from 1-6 corresponding to each different gallery number?

4

Also thanks to @Jake.Caron for fixing the first problem, changing setText to text did the trick, noob error!

5

Oh, gotcha. I completely misunderstood what you were trying to accomplish. In regards to the following question:

So how do I get it to remember each different value from 1-6 corresponding to each different gallery number?

You need to store a local variable within the scope of the for loop. If you look at my provided code, I use the variable counter instead of i.

And in order to get your desired result, the following code should work:

var target, gallery = [], counter;

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

var game = new Phaser.Game(config);

function create ()
{
    target = this.add.text(80,100,"0", {fontFamily: 'Arial', fontSize: 40, color: '#fff'}).setOrigin(0.5, 0.5);

    for (let i = 1; i <= 6; i++) {
        let counter = i;
        gallery[counter] = this.add.text( 80 + counter * 100, 100, 0, 
            {fontFamily: 'Arial', fontSize: 40, color: '#fff'}).setOrigin(0.5, 0.5);
        gallery[counter].setInteractive().on('pointerdown', 
            () => {target.text = counter, console.log(counter)});
    }
}
6

Thanks again @Jake.Caron, changing the var to let did the trick.

7

in es5 you can do:

for (var i = 0 ; i < 5; i++) {
        a.on("pointerdown", (function(n) {  return function() {  target.text = n; console.log(n);  }  }(i)) );
}