Pointerdown on a boucle for

Phaser 3
1

Hi everyone :slight_smile:

I load a lot of images in a boucle “for”, and i would like to delete each image when the user click on it. My code works, but only on the LAST image displayed : even if i touch the first image, it’s the last who disapear : how could i pass on parameter, the image i click on please ?

here is my code :

for (var a = 0; a < nbTetes; a++) {

            
 var imgFalse = this.add.image(a * 50, Phaser.Math.Between(-500, 50), 'tete1');
            imgFalse.setInteractive();
            imgFalse.on('pointerdown', () => {        //quand on clique sur l'élément recherché

                console.log(imgFalse .x);//always display the x of the last image, even if i click on the first image

the issue is i can’t pass the image i clicked on it, the “imgFalse” is ecrased with the iteration…

how coul i do please ?

thx

2

You need to create an array of the images, you are displaying every image, but the imgFalse variable is being overwritten on every iteration, you should do it like this:

var imgFalse = [];
for (var a = 0; a < nbTetes; a++) {
            imgFalse[a] = this.add.image(a * 50, Phaser.Math.Between(-500, 50), 'tete1');
            imgFalse[a].setInteractive();
            imgFalse[a].on('pointerdown', () => {
                console.log(imgFalse[a].x);
3

thx for the solution but when i do this

this.tetes = [];
        for (var a = 0; a < nbTetesX; a++) {
            this.tetes[a] = this.add.image(a * 50, Phaser.Math.Between(-500, 50), 'tete1');
            this.tetes[a].setInteractive();
            this.tetes[a].on('pointerdown', () => {        //quand on clique sur l'élément recherché
console.log(this.tetes[a].x);

and i click on one of the head, i have this message error :
image

any idea please ?

thx

4

I’m not sure why this happens, but you could create a variable like this before the bucle:

var mainGame = this;

and then use this variable in the event listener like:

this.tetes[a].on('pointerdown', () => {
    console.log(mainGame.tetes[a].x);
5

nice try, but same result :


this.tetes = [];
        var mainGame = this;
        for (var a = 0; a < nbTetesX; a++) {
            
            this.tetes[a] = this.add.image(a * 50, Phaser.Math.Between(-500, 50), 'tete1');
            this.tetes[a].setInteractive();
            this.tetes[a].on('pointerdown', () => {        //quand on clique sur l'élément recherché
                console.log(mainGame.tetes[a].x);

image
image1021×581 166 KB

(by the way, thx for your quickness )

6

Can you do a console.log on the bucle please? just to know what is inside the variable

console.log(this.tetes[a]);

(you’re welcome, I’m at work waiting for a Phaser project to copy to start working on it, and I can’t do anything until it finishes hahaha!)

1 Like
7

Nice graphics :slight_smile:

Why would the callback know what tetes[a] means?
Change your arrow function to funtion(), and just use ‘this’.

8

lol

console.log(mainGame.tetes[a]); = undefined ^^

and i replace => by a function like that :

this.tetes[a].on('pointerdown', () => {        //quand on clique sur l'élément recherché
                this.time.addEvent({callback: this.changeTete(), callbackScope: this});
            });
changeTete(){
        console.log(this.x);
...

same result !

9 
this.tetes[a].on('pointerdown', () => {
                console.log(mainGame.tetes[a].x);

should be

this.tetes[a].on('pointerdown', function() {

Then ‘this’ actually means something…

1 Like
10

What I meant was this xD

for (var a = 0; a < nbTetesX; a++) {
            
            this.tetes[a] = this.add.image(a * 50, Phaser.Math.Between(-500, 50), 'tete1');
            this.tetes[a].setInteractive();
            console.log(this.tetes[a]);

And in the changeTete function you forgot the variable:

changeTete(){
        console.log(this.tetes[a]);

But you could try what Milton said, having the event as:

this.tetes[a].on('pointerdown', function () {
11

sorry, but same result :frowning:

this.tetes[a].setInteractive();
            console.log(this.tetes[a].x);
            this.tetes[a].on('pointerdown', function () {         //quand on clique sur l'élément recherché
                console.log(mainGame.tetes[a].x);//same with this.tetes[a].x

image
image579×503 10.5 KB

i have the tetes[a].x on the first console log, but when i click on an image, the error is come back :frowning:

thx for your help :slight_smile:

12

:slight_smile:

If you use a named function, use ‘this.x’. If you use an arrow function use mainGame, but then it doesn’t know tetes[a].

13

i tried each of the options, same result :frowning:

i seems to have run out of steam and ideas

14

That makes no sense.

I copied your code, and used this:

this.tetes[a].on('pointerdown', function() { //quand on clique sur l'élément recherché
    console.log(this.x);
});

and it works fine.

1 Like
15

YEAH!

console.log(this.x);

i did

console.log(this.tetes[a].x);

THX YOU !!! i understand my error now :slight_smile:

and i’m impressed how quickly you are to respond, thanks again !

1 Like