Jump to content
Search Community

PixiPlugin Color

Abel test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

Hi @Abel :)

 

Welcome to the forum.

 

A container is just a collection of objects. You'd need a graphic or sprite in there to tint it. Are you trying to tint the background of the container or all the particles in it? You can do something like this:

 

var bg = new PIXI.Sprite(PIXI.Texture.WHITE); // add to your container
bg.width = 1000; // your canvas width; 
bg.height = 600; // your canvas height;

// then tint the bg sprite

 

Happy tweening.

:)

 

  • Like 1
Link to comment
Share on other sites

If you want them all to do the same thing, you can target the children like this:

 

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

 

If you want to do something different with each one, you'd loop through and create individual tweens/timelines for them.

 

Hopefully that helps. Happy tweening.

:)

 

  • Like 1
Link to comment
Share on other sites

I was incorrect. You can tint the particle container. Here's a working particle container being tinted.

 

See the Pen yjMpPW by PointC (@PointC) on CodePen

The other thing about a particle container is all the sprites have to be from the same base texture. Without seeing your setup, we'd just be guessing about what might be wrong. I'm not sure why you'd have to FTP to CodePen. All we need is a basic example of what you're doing and what isn't working. It does not have to be your complete project or actual assets. Just something simple like I have above. You can even fork my demo and go from there.

 

Without a demo, it's really hard to troubleshoot. Thanks.

 

  • Like 1
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

As I mentioned, troubleshooting is extremely difficult without a demo. My advice would be to get a simple version of your project working on CodePen. You just said it doesn't work, but didn't say why. Once you have something we can see and edit, you'll get better answers. Here's another particle container with scale and alpha working correctly. You can fork this and add your own assets if you need additional assistance. Thanks.

 

See the Pen QrvWrq by PointC (@PointC) on CodePen

 

  • Like 2
Link to comment
Share on other sites

Thanks for the demo. That helps a lot. Everything is working. You're just starting with a green .png. If you want to tint and get the actual color, it's best to start with a white particle. In this case you're just using a circle so there's no need for a .png as Pixi can draw a circle for you. Here's a fork of your pen with everything working.

 

See the Pen bMWdvb by PointC (@PointC) on CodePen

Happy tweening.

:)

 

  • Like 3
Link to comment
Share on other sites

Oh, feel free to use a png. I didn't mean to imply that you shouldn't. I just used a Pixi graphic because I didn't have a little white circle .png available. I've used textures from primitive graphics and .pngs in my Pixi work. Both seem fine, but I don't get too deep into the weeds about what's better. I usually just use my eyes, watch the GPU percentage and FPS meter. If that all seems okay, I just go with it.

 

Happy tweening.

:)

 

  • Like 2
Link to comment
Share on other sites

On 5/1/2018 at 2:57 PM, Abel said:

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?.

 

 

I was just telling @Sahil how Pixi's graphics aren't very performant. They're also very primitive. When you render graphics, it has to be run through earcut. 

https://github.com/mapbox/earcut

 

Well, for WebGL at least. If using canvas, it just draws it using regular canvas commands. @PointC was only using the graphics to generate a canvas texture. Note that when you generate a canvas texture, it's going to crop it, so stuff might not be exactly where you drew it. I draw a rectangle with no alpha if I want to preserve where something is drawn.

 

For a particle container, you should only use the options shown in the docs. Use tint for alpha, and vertices for scale. Also, you can't use pivot inside a particle container. Use anchor instead.

 

A little update of the demo using 2 textures. Every texture has a base texture, which is some type of image or canvas element.

 

See the Pen KRmZax by osublake (@osublake) on CodePen

 

 

A cool thing about using a canvas element for a texture is that you can update it. I'm drawing all the morphing on a single canvas element here.

 

See the Pen oWzVvb by osublake (@osublake) on CodePen

 

 

For performance, it helps to understand how a render pass works. Support for the multi-texturing mentioned at the bottom was added in version 4, but it is device specific.

https://phaser.io/tutorials/advanced-rendering-tutorial/part2

 

Some more tips...

https://github.com/pixijs/pixi.js/wiki/v4-Tips%2C-Tricks%2C-and-Pitfalls

https://github.com/pixijs/pixi.js/wiki/v4-Performance-Tips

https://github.com/pixijs/pixi.js/wiki/v4-Gotchas

 

 

 

  • Like 4
Link to comment
Share on other sites

Sure, now the Pixi Master shows up. I thought the agreement was you show instantly whenever PIxi or canvas are mentioned in a thread? It's been a couple days since this thread started. You're slipping. :D

 

I know what you're saying about Pixi graphics. When I was first tinkering with my 2000 Posts demo, I did a little experiment generating sprites from a primitive graphic and that didn't look good at all. Generating the canvas texture from the graphic and sprites from the texture seemed fine though.

 

More often than not I'm using a .png or sprite sheet of .pngs because I want more than a simple circle or star for my particles, but sometimes just a little burst of circles is all that's needed. Would your preference in those cases be generating the canvas texture from the primitive graphic?  Or would a .png be the best choice even in those projects? At this point I'm still getting comfortable with the syntax, filter settings, different types of container properties etc. and I'm just happy when everything works correctly. But I'm always interested in hearing from the master. 

 

  • Like 3
Link to comment
Share on other sites

On 5/3/2018 at 10:51 AM, PointC said:

Sure, now the Pixi Master shows up. I thought the agreement was you show instantly whenever PIxi or canvas are mentioned in a thread? It's been a couple days since this thread started. You're slipping. :D

 

Normally that's the case, but I've been super busy and haven't had a chance to go through all the posts I've missed.

 

 

On 5/7/2018 at 3:01 PM, Abel said:

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

 

Hard to say without a demo. It's working above. Make sure you're using the latest version of Pixi.

Link to comment
Share on other sites

On 5/3/2018 at 10:51 AM, PointC said:

More often than not I'm using a .png or sprite sheet of .pngs because I want more than a simple circle or star for my particles, but sometimes just a little burst of circles is all that's needed. Would your preference in those cases be generating the canvas texture from the primitive graphic?  Or would a .png be the best choice even in those projects?

 

 

Well, the end result will be the same. Creating canvas textures is nice if you don't want to make different versions of an image for different resolutions i.e. image@2x.png, image@3x.png.

 

Raster images do not scale up nicely. 

 

console.log(window.devicePixelRatio || 1);

 

On a normal desktop monitor, that will be 1. On a new phone, that will probably be 3, which means everything is being scaled 3x.

 

 

 

Run these demos on your phone in debug/full page mode. The first one won't be that sharp. The second one should look really sharp. Adapting for resolution means more pixels have to be processed, so there will be a performance hit. 

 

 

See the Pen NMyGdM by osublake (@osublake) on CodePen

 

 

 

See the Pen XqZmNL by osublake (@osublake) on CodePen

 

 

 

 

 

 

 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

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