PIXI.particles.ParticleContainer children particle hitAreas don't seem to follow the particles as they move

[jojoba]

Greetings!

I'm currently playing around with PIXI.particles.ParticleContainer and am having a blast. What an awesome container!

I'm writing because I'm having a peculiar issue regarding mouse events and the particles inside the ParticleContainer. Specifically, I create the ParticleContainer, add sprites to it via PIXI.Sprite.fromImage and then bind mouse down events to each sprite and specify a hit area for the sprite as well. That works! Specifically, it works if I add the sprites to the ParticleContainer and don't specify a position, and all the sprites show up in the top left corner of the ParticleContainer. 

However if I move the sprites around in the container by adjusting the sprite's x,y values, the hit area remains in the in the top left corner and I can still trigger the mouse event there, but that's clearly not the intent.

I had guessed that the hit area would follow the sprites as they move around the container. Is this true?

I'm posting below a section of my code to help explain. Thank you to any PIXI wizards who might have insight here.

// Create the graph container
this.graphContainer = new PIXI.particles.ParticleContainer(
	numNodes,
	{
		scale: true,
		position: true,
		rotation: false,
		uvs: false,
		alpha: false
	}
);
this.graphContainer.hitArea = new PIXI.Rectangle(0, 0, 1000, 1000);
this.graphContainer.interactive = true;
this.graphContainer.interactiveChildren = true;

// Create the graph nodes
for (var i=0; i<numNodes; i++) {
	var x = graphData['nodes'][i]['x'];
	var y = graphData['nodes'][i]['y'];
	var node = new Node(this.top, null, x, y);
	this.nodes.push(node);
	this.graphContainer.addChild(node.getSprite());
}


class Node {

	constructor(top, type, x, y) {
		this.top = top;
		this.initPosition = {
			'x': x,
			'y': y
		};
		this.createSprite();
	}

	createSprite() {
		this.sprite = new PIXI.Sprite.fromImage('images/bcat.png');
		this.sprite.hitArea = new PIXI.Rectangle(0, 0, 100, 100);
		this.sprite.interactive = true;
		this.sprite.buttonMode = true;
		this.sprite.on('mousedown', (event) => {
			console.log('sprite event');
		});
		this.sprite.anchor.set(0.5);
		this.sprite.x = this.initPosition['x'];
		this.sprite.y = this.initPosition['y'];
	}

	getSprite() { return this.sprite; }

}

 

[bubamara]

Hello, ParticleContainer is not supposed to work with interactions by design, you have to use PIXI.Container instead

http://pixijs.download/release/docs/PIXI.particles.ParticleContainer.html

[jojoba]

Thank you for the quick response! I went ahead and switched to PIXI.Container and the hitAreas worked as intended and with nice performance too!