Solid color tint

[unrealnl]

Hi Guys,

I was wondering if it's possible to render a texture with a solid color? I would need this in order to build a masking sprite. Im planning on using a solid black white mask and for this reason would like to be able to draw a sprite with just black or just white to a canvas. I looked at the tint class, but this doesnt force all pixels in a texture to be a color.

Thanks in advance!

Erik

[unrealnl]

So i could potentially use a blendMode subtract and render a texture twice on top of eachother, but this is not possible in WebGL..

[ivan.popelyshev]

 

Alternative:

https://github.com/gameofbombs/pixi-heaven can tint whole sprite in one color. It can even invert it: https://gameofbombs.github.io/examples-heaven/#/basics/basic.js

Also if you need to mask with a sprite, you can use its "maskSprite" property. If you want even better mask, with your behaviour, modify https://github.com/gameofbombs/pixi-heaven/blob/master/src/twotint/sprites/SpriteMaskedRenderer.ts and rebuild the plugin.

Note: pixi-spine is required by this plugin.

[unrealnl]

Hey Ivan,

Thats super cool, i like the alternative approach a bit better as i still might be mixing alpha masks and black and white masks.
So i will figure out how to implement those.

[ivan.popelyshev]

Do you apply mask to a container or a single sprite?  If its for sprite, I might just change pixi-heaven a bit , add the setting for you to switch between black&white and alpha  Its not a problem because this plugin is made to support cases like yours.

[unrealnl]

I apply a mask to a container that can container several sprites. Im building a decal system for my game, and i plan to render the decals on every x interval to a render texture. But there will be a lot of decals so creating a render texture on every frame seems a bit expensive.

My idea is to create the following structure, in case of a Box:

Box Container Sprite that has:
1) Box Sprite (with Box texture)
2) Decal Sprite (can have multiple sprites in it)
3) Decal Mask Sprite

Decal Mask Sprite = Render a solid black graphic and add a white version of box texture to it.
Decal Sprite = sprite that will hold several decals

Decal Sprite will be masked by Decal Mask Sprite.

When there has not been a sprite added to Decal Sprite for x MS , it will render itself to a render texture.

That's a bit the idea i had in mind, also then for erasing decals, i could render on any position within Decal Mask Sprite a black graphic and re-render the Decal Sprite and then swap back the old Decal Mask.

Hope this explains it a bit


 

[ivan.popelyshev]

Ok, one more variant: https://github.com/pixijs/pixi.js/pull/4686
 

parent->A,B 

 

parent has AlphaFilter => A is rendered in temporary renderTexture

B has filter on it => B is rendered in another temporary renderTexture

B has filter that uses backdrop => that filter takes A from backdrop and B from temporary renderTexture #2 and combines them.