Jump to content

ColorMatrixFilter


charlie_says
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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();
 
 
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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

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.

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

Loading...
 Share

  • Recently Browsing   0 members

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