ColorMatrixFilter

[charlie_says]

HI,

I was just looking at the ColorMatrixFIlter and am apparently not able to to get it to apply any effect.

I'm just trying to tint all my sprites black:

for (var i = 0; i < 10; i++)
{
	var s = PIXI.Sprite.fromImage("icon_unlit_bg");
	s.scale.set(0.5);
	s.x = i * 30;
	s.y = i * 20;
	let colorMatrix = new PIXI.filters.ColorMatrixFilter();
	s.filters = [colorMatrix];
	colorMatrix.desaturate();
	colorMatrix.brightness(0, true);
	c.addChild(s);
}

this.addChild(c);

I've also tried applying the matrix on the container sprite, with a similar lack of results.

Can anyone tell me where I'm going wrong?

[jonforum]

work for me, di you try build once filter?, why build in loop?

this.filters = [ // cache somes filters reference

new PIXI.filters.OutlineFilter(4, 0x2d2d2d),

new PIXI.filters.ColorMatrixFilter(),

new PIXI.filters.OutlineFilter(8, 0xffffff),

];

this.filters[1].desaturate();

 

 

[ivan.popelyshev]

Its better to create only one filter instance than several, because pixi does ask webgl to compile a new shader each time, if you dont specify special internal field, i dont remember the name of.

However, it should work anyway. Please check if you use WebGL renderer and not canvas.

[charlie_says]

hey @jonforum

As I said, I had tried applying the filter to the 'container' sprite, but still got no effect. Basically, I want a 'black' copy of my sprites in another container.

I'm working in TypeScript, which for some reason isn't showing OutlineFIlter - I still was unable to get your method working:

var c:PIXI.Sprite = new PIXI.Sprite();
			
c.filters = [	
		new PIXI.filters.ColorMatrixFilter(),	
		];
			
c.filters[0]['desaturate']();

for (var i = 0; i < 10; i++)
{
	var s = PIXI.Sprite.fromImage("icon_unlit_bg");
	s.scale.set(0.5);
	s.x = i * 30;
	s.y = i * 20;
				
	c.addChild(s);
}

 

[charlie_says]

Hi @ivan.popelyshev

I was using the canvas renderer which was the problem...

So follow up question: Is it possible to do this with canvas?  Or something similar?

And, is there no blendmode layer in PIXI?

[jonforum]

you do nothing wrong!, like ivan say, try look your rendering engine. webgl || canvas.

You can also use pixi-heaven for color in black your sprite

[charlie_says]

thanks @jonforum - will investigate that

 

[ivan.popelyshev]

On 6/10/2018 at 11:40 AM, charlie_says said:

Hi @ivan.popelyshev

I was using the canvas renderer which was the problem...

So follow up question: Is it possible to do this with canvas?  Or something similar?

And, is there no blendmode layer in PIXI?

If you know how to do it with bare canvas2d (through svg filters), you can make a plugin for pixi