[PixiPlugin Color]

I'm getting really bad performance on Mobile, why is that if I'm using the ParticleContainer?.

[PixiPlugin Color]

Hi Guys,

 

Came back with another issue when I set my color, say at a later time it doesn't change, why is that?.

 

Thanks

[PixiPlugin Color]

Agreed, I'm just going with the later, if it works I'm all for it, also I just put in my stats and its at a silky smooth 60FPS!!.

[PixiPlugin Color]

Awesome!!! your a god send, but the reason being if I'm correct or not is Webgl renders sprites faster using a png, then the native graphics object?.

[PixiPlugin Color]

I managed to get something going on codepen, please take a look its very similar to what I'm doing, but the colors still dont work?.

 

Thanks

 

See the Pen WJjNQG?editors=0011 by schemagroup (@schemagroup) on CodePen

 

[PixiPlugin Color]

No worries, I understand, but I tried that as well but no luck.

 

particleContainer = new PIXI.particles.ParticleContainer(particleData.length, {scale: true,
  position: true,
  tint:true,
  rotation: true,
  uvs: true,
  alpha: true
});

 

[PixiPlugin Color]

Yes my particles are supposed to explode from the center of the particle container, so the scale, alpha, x, y, is set to zero. I've attached my app.js file, for reference.

app.js

[PixiPlugin Color]

Hi,

 

I tried putting up my example on codepen, but it doesn't work, so I just copied and pasted my code here. Sorry for the inconvenience, I really appreciate you taking the time to help me.

 

function createParticles() {
  console.log("createParticles()");

  particleContainer = new PIXI.particles.ParticleContainer();

  particleContainer.pivot.set(0, 0);
  particleContainer.x = app.renderer.width / 2;
  particleContainer.y = app.renderer.height / 2;

  for (var i = 0; i < particleData.length; i++) {
    var particle = new PIXI.Sprite.fromImage('images/particle.png');
    particle.pivot.set(5, 5);
    particle.alpha = 0;
    particle.x = 0;
    particle.y = 0;
    particle.scale.set(Math.random() * 1 - 0.25);
    particleContainer.addChild(particle);
  }
  app.stage.addChild(particleContainer);
}
function cyleColors() {
   console.log("randomColors();");
    tlColor = new TimelineMax({ yoyo: true, repeat: 999, repeatDelay: 0 });
    tlColor.to(particleContainer, 3, {pixi:{tint:0x4ec7f2}, ease: Cubic.easeOut })
         .to(particleContainer, 3, {pixi:{tint:0xe6df36}, ease: Cubic.easeOut })
         .to(particleContainer, 3, {pixi:{tint:0x4c9f91}, ease: Cubic.easeOut })
         .to(particleContainer, 3, {pixi:{tint:0xf98331}, ease: Cubic.easeOut })
         .to(particleContainer, 3, {pixi:{tint:0xde1272}, ease: Cubic.easeOut });
}

 

[PixiPlugin Color]

Sorry but it would require me to run a ftp I can't put a codepen example?.

[PixiPlugin Color]

Hmm, just tried that there still showing up black?

 

.to(particleContainer.children, 3, {pixi:{tint:0x4ec7f2}, ease: Cubic.easeOut })

 

[PixiPlugin Color]

I'm trying to tint all the particles in it?.

[PixiPlugin Color]

Hi All,

 

I've been learning PixiJS, and I love it, but for some reason my ParticleContainer color is not changing?. All I'm getting is black, please let me know your thoughts I've pasted my code below for reference.

 

    var tlColor = new TimelineMax({ yoyo: true, repeat: 999, repeatDelay: 0 });
    tlColor.to(particleContainer, 3, {pixi:{tint:0x6fbb4c}, ease: Cubic.easeOut })
        .to(particleContainer, 3, {pixi:{tint:0x4ec7f2}, ease: Cubic.easeOut })
        .to(particleContainer, 3, {pixi:{tint:0xe6df36}, ease: Cubic.easeOut })
        .to(particleContainer, 3, {pixi:{tint:0x4c9f91}, ease: Cubic.easeOut })
        .to(particleContainer, 3, {pixi:{tint:0xf98331}, ease: Cubic.easeOut })
        .to(particleContainer, 3, {pixi:{tint:0xde1272}, ease: Cubic.easeOut });

 

Thanks