Discussion :

[celinebeaumont]

Bonjour à tous
Je suis en train de tester la librairie Phaser3 et je me retrouve face à un problème qui me semble plus général, concernant javascript.
J'arrive à faire tourner le code ci-dessous, mais à condition de rendre global certaines varables et fonctions, alors que je souhaite les inclure dans la classe.
Par exemple, en prenant le cas de l'attribut count de la classe (défini par "this.count=0;" dans le constructeur) :
je veux l'incrémenter à l'intérieur de la fonction de rappel (callback) de sprite1.on. Mais celà ne fonctionne pas. En faisant des tests, j'en ai déduis que le this.count à l'intérieur de la callback ne fait pas référence au count de la classe. Par contre si je l'externalise, en mettant en première ligne "var count=0;", avant de définir la classe (et en remplaçant bien sûr tous les this.count par count), ça marchera.
Le problème est visiblement le même pour le "this.scene.start('sceneB');" à l'intérieur de la callback de this.button1.on, ainsi que pour la méthode onEvent1() et le timedEvent1.
Quelqu'un aurait-il une idée, sûr comment faire référence au count de la classe à l'intérieur de la callback ?
En vous remerciant par avance pour vos idées.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
class sceneA extends Phaser.Scene{
 
    constructor(){
         super({key: 'sceneA' });
	 this.count = 0;	 
    }
 
    preload () {  this.load.image('sprite1','assets/sprite1.png');
                  this.load.image('button1','assets/button1.png');
    }
 
    create () { var sprite1  = this.physics.add.sprite(50 , 50, 'sprite1').setInteractive().setScale(1.5);
                sprite1.on('pointerdown', function () { sprite.setVelocityY(-200); this.count++;});
 
                this.button = this.add.sprite(350, 360, 'demarrer').setInteractive();
		this.button.visible = false;
		this.button.on('pointerdown',function () { this.scene.start('sceneB'); });
 
                var timedEvent1 = this.time.addEvent({delay : 12000, callback:this.onEvent1, callbackScope:this,repeat:0});
 
    }
 
    update () { 
	           if (this.count>=8) {  this.boutton.visible = true;
 
					 };
    }
 
    onEvent1 { this.texte1 = this.add.text(100, 100, 'Hello !',{fontFamily: 'Arial', fontSize: '32px', fill: '#228B22' });
               this.count++; 
    }
}

[celinebeaumont]

J'ai trouvé une solution qui fonctionne pour " this.scene.start('sceneB')" dans le callback

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
......................
create () { var scene = this.scene;
                ......................... 
                this.button.on('pointerdown',function () { scene.start('sceneB'); });
              }
.....................

Mais cela n'est pas possible pour "this.count".
Je pense pense que c'est parce que this.scene est un pointeur sur un objet, donc var scene = this.scene va finalement pointer vers ce même objet et donc est un alias.
Par contre this.count est un entier, et var count = this.count est une copie de l'instant de la valeur de this.count dans la variable count, elles évolueront donc indépendamment l'une de l'autre.
Je pense que je peux régler cette difficulté en rattachant la variable count directement au sprite lors de sa définition.

Cependant, je reste toujours curieuse de savoir si il est possible de définir simplement un alias de this.count pour l'utiliser dans la callback?
Auriez-vous une idée à ce sujet ?

[celinebeaumont]

Apparemment la manière la plus simple est de créer un objet à la place de this.count pour pouvoir en faire un alias

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
...............
constructor(){
         super({key: 'sceneA' });
	     this.obj = {count : 0};	 
    }
create () { 
        ........................
        var obj = this.obj;
        ........................
        sprite1.on('pointerdown', function () { obj.count++;});
        .......................
}
update () { 
	           if (this.obj.count>=8) {  this.button.visible = true;}
 
	      }

J'ai testé, celà fonctionne.
Je mets le topic en résolu
Bonne journée

[CosmoKnacki]

Tu devrais lire cette page.

[xor AX AX]

J'ai rencontré cette difficulté. Ma solution :

Avant la définition de classe, créer une variable globale instanciant cette classe :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

let  scA=new SceneA();

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
// Définition au niveau global
let scA;
...
function init()
{  // Instanciation dans le code    
    scA=new SceneA();
    ...
}

Pour accéder par la suite à ses propriétés ou méthodes, 2 possibilités :

• si le contexte l'autorise utiliser this.count voir @CosmoKnacki
• s'il ne l'autorise pas (callback, hors-classe ou évènement onclick sur une balise HTML) utiliser scA.count
• c'est valable aussi sur les méthodes : this.update() ou scA.update()

Ca marche mais je n'ai pas encore conclu philosophiquement (et en matière de rapidité/ressources) s'il fallait tout coder en sca. ou utiliser le this. quand c'est possible.

Pour avis, j''ai l'habitude de (ça s'inspire de la Notation hongroise) :

• nommer une définition de classe par un préfixe $$ => scA=new $$sceneA()
• nommer une instanciation de classe par un préfixe $ => $sceneA=new $$sceneA()
• nommer une variable globale par un préfixe _=> let _$sceneA=new $$sceneA()

Tout cela peut se tableauter :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

_$scenes[0]=new $$sceneA();