Discussion :

[tralloc]

Bonjour,
Je suis débutant (en javascript)
et avec le framework pixi.js j'ai voulu créer des hexagones réagissant à des événements lorsque je clique sur un hexagone, je dois avoir ses coordonnées x et y qui s'affichent.
Cependant j'ai toujours l'affichage sur la console 'click 0 0' comme s'ils ne reconnaissait pas mon x et mon y.
Je pense que c'est une subtilité de l'utilisation des fonctions en JS mais comme je ne suis pas un spécialiste de ce langage je viens vers vous.
Voici le code, la ligne incriminée se trouve à la ligne 81, merci d'avance pour vos réponses !

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
function jeu(){
	console.log(PIXI);
	var renderer = PIXI.autoDetectRenderer(600, 600,{antialias: true, transparent: false, resolution: 1});
	document.getElementById("pixi").appendChild(renderer.view);
	var stage = new PIXI.Container(0xFFFFFF);
 
	//var background= new PIXI.Sprite.fromImage('prairie-verte-1_2997580.jpg');
 
	var param = {
		l : 60,
		calcule : function(){
			this.h= this.l*0.45;
			this.x1 = this.l/4;
			this.y1 = 0;
			this.x2 = this.l*3/4;
			this.y2 = this.y1;
			this.x3 = this.l;
			this.y3 = this.h;
			this.x4 = this.x2;
			this.y4 = this.h*2;
			this.x5 = this.x1;
			this.y5 = this.h*2;
			this.x6 = 0;
			this.y6 = this.h;
		},
	};
	param.calcule()
	function Hexagone(x,y) {
		this.x=x;
		this.y=y;
		if(this.x%2 == 0){
			this.xBase = this.x*3*param.l/4;
			this.yBase = this.y*2*param.h
		} else{
			this.xBase = this.x*3*param.l/4;
			this.yBase = (this.y+1/2)*2*param.h
		}
	}
 
	Hexagone.prototype.dessiner = function(){
		this.hex = new PIXI.Graphics();	
		this.hex.beginFill(0x00FF00);
		this.hex.lineStyle(1, 0x000000);
		this.hex.moveTo(this.xBase + param.x1, this.yBase + param.y1);
		this.hex.lineTo(this.xBase + param.x2, this.yBase + param.y2);
		this.hex.lineTo(this.xBase + param.l/2, this.yBase + param.h);
		this.hex.endFill();
		this.hex.beginFill(0x00FF00);
		this.hex.moveTo(this.xBase + param.x2, this.yBase + param.y2);
		this.hex.lineTo(this.xBase + param.x3, this.yBase + param.y3);
		this.hex.lineTo(this.xBase + param.l/2, this.yBase + param.h);
		this.hex.endFill();
		this.hex.beginFill(0x00FF00);
		this.hex.moveTo(this.xBase + param.x3, this.yBase + param.y3);
		this.hex.lineTo(this.xBase + param.x4, this.yBase + param.y4);
		this.hex.lineTo(this.xBase + param.l/2, this.yBase + param.h);
		this.hex.endFill();
		this.hex.beginFill(0x00FF00);
		this.hex.moveTo(this.xBase + param.x4, this.yBase + param.y4);
		this.hex.lineTo(this.xBase + param.x5, this.yBase + param.y5);
		this.hex.lineTo(this.xBase + param.l/2, this.yBase + param.h);
		this.hex.endFill();
		this.hex.beginFill(0x00FF00);
		this.hex.moveTo(this.xBase + param.x5, this.yBase + param.y5);
		this.hex.lineTo(this.xBase + param.x6, this.yBase + param.y6);
		this.hex.lineTo(this.xBase + param.l/2, this.yBase + param.h);
		this.hex.endFill();
		this.hex.beginFill(0x00FF00);
		this.hex.moveTo(this.xBase + param.x6, this.yBase + param.y6);
		this.hex.lineTo(this.xBase + param.x1, this.yBase + param.y1);
		this.hex.lineTo(this.xBase + param.l/2, this.yBase + param.h);
		this.hex.endFill();
		this.hex.hitArea = new PIXI.Polygon([
   			new PIXI.Point(this.xBase + param.x1,this.yBase + param.y1),
   			new PIXI.Point(this.xBase + param.x2,this.yBase + param.y2),
   			new PIXI.Point(this.xBase + param.x3,this.yBase + param.y3),
   			new PIXI.Point(this.xBase + param.x4,this.yBase + param.y4),
   			new PIXI.Point(this.xBase + param.x5,this.yBase + param.y5)
		]);
		this.hex.interactive = true;		
		this.hex.click =function(data){console.log("click x :"+this.x+" y : "+this.y)};
		stage.addChild(this.hex);
	}
 
 
 
	listeHexa=[];
	for(var y=0;y<10;y++){
		for(var x=0;x<10;x++){
			hexa = new Hexagone(x,y)
			hexa.dessiner()
			listeHexa.push(hexa);
		}
	}
 
 
	renderer.render(stage);
	update();
	function update(){
	    requestAnimationFrame(update);
	    renderer.render(stage);
};
}

[NoSmoking]

Bonjour,
peut être devrais tu inspecter ce que tu as dans data.

[tralloc]

Bonjour,
J'ai trouvé sur un autre forum (maheureusement anglophone mais plus spécialisé) la solution à la question.
Il s'agissait comme je l'imaginais d'un problème dû à la manière de déclarer l'événement, il fallait faire un bind.

voici le code de l'appel de l'événement :

Code :

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

hex.on('click',this.click.bind(this));

et sa déclaration (j'ai utilisé une fonction prototype, mais j'aurais pu faire autrement je pense)

Code :

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

1
2
3
Hexagone.prototype.click = function(event){
			console.log("click x :"+this.x+" y : "+this.y)
	}