• Content count

  • Joined

  • Last visited

  1. 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!
  2. 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(, null, x, y); this.nodes.push(node); this.graphContainer.addChild(node.getSprite()); } class Node { constructor(top, type, x, y) { = 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; } }
  3. Ah, thank you for the clear explanation. Now I understand what you mean by chunking. This helps so much!!
  4. Thanks Ivan for responding so fast! I tried var graphics = new PIXI.Graphics(true) and it bumped up my framerate to 45fps, which is better! Regarding your second comment, about adding points in chunks, I'm not sure I understand entirely. I am updating my data at 60Hz (remove the first element, and append a new element) and then in a requestanimationframe, am using a PIXI.Graphics to lineto and moveto the line for each point in my data for each line, and then call render. Where would the chunking occur exactly? Thanks for all of your help! I very much appreciate it.
  5. Greetings! I love pixijs! Amazing stuff! I'm currently attempting to plot about 30 lines, each containing about 2500 points scrolling right to left (where once a point goes off the screen to the left, a new point is appended on the right). Think a whole bunch of streaming time series charts. I've been able to plot them out, creating a top level PIXI.Container to contain all the lines, and then for each line, creating a PIXI.Graphics object that I addChild to the top level PIXI.Container, setting the line style and then in the render loop going thru each line's 2500 points and doing the moveto lineto fun. It works! However my framerate peaks at around 40fps, which is still nice, but hoping for a 60fps. Note: I do the line moveto and lineto for each line before I call the render on the top level PIXI.Container, so hopefully that's forcing all the draw work to happen in one frame. Does anyone happen to know if there any optimizations that I could leverage to speed this up? Thank you kindly for any help you can offer. Cheers!