Jump to content

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


Recommended Posts


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(
		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);

class Node {

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

	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.x = this.initPosition['x'];
		this.sprite.y = this.initPosition['y'];

	getSprite() { return this.sprite; }



Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...