CODEWITHSUNDEEP
javascriptpixi.js
ThatBrianDude
ThatBrianDude

Reputation: 3190

PIXI: Change only non transparent pixels of sprite to one solid color

Here is a solution that just replaces the entire texture with a solid color: 

sprite.texture = PIXI.Texture.WHITE

Obviously this wont work with transparent sprites. Any transparency ends up solid as well. (Resulting in a solid rectangle)

How could I change the color of only non transparent pixels of the sprite?

(tint wont work either since all sprites would have to be white)

Upvotes: 4

Views: 3374

Answers (3)

Czyzby
Czyzby

Reputation: 3139

It is possible in pure PIXI with ColorMatrixFilter:

let filter = new PIXI.filters.ColorMatrixFilter();
filter.matrix = [
    10, 10, 10, 10,
    10, 10, 10, 10,
    10, 10, 10, 10,
    -1, -1, -1, 1
];
sprite.filters = [filter];

AFAIK tint and alpha might stop working, but you can add additional filters after this one (e.g. AlphaFilter) to achieve a similar effect.

Upvotes: 1

Leftium
Leftium

Reputation: 17903

You could apply a custom filter to the sprite. "Filter" is PixiJS's term for a shader.

  1. Start with this custom filter example.
  2. Modify the file shader.frag with a shader that returns the desired color or transparent, depending on the current pixel.
  3. Optional: The above will continuously calculate the solid sprite from the original sprite. If performance is a problem, I think there is a way to save the results and set that as the sprite's texture.

The fragment shader should be pretty simple. Here are two good fragment shader tutorials:

Upvotes: 1

mcalus3
mcalus3

Reputation: 21

As far as I know, you can't do it with Pixi. According to one of Pixi maintainers here, you can use dark tint from pixi-heaven package (https://github.com/gameofbombs/pixi-heaven). This exact example is listed in its readme:

Make whole sprite of one color:

sprite.tint = 0xffaacc;
sprite.color.dark[0] = sprite.color.light[0];
sprite.color.dark[1] = sprite.color.light[1];
sprite.color.dark[2] = sprite.color.light[2];
//dont forget to invalidate, after you changed dark DIRECTLY
sprite.color.invalidate();

Upvotes: 2

Related Questions