Jump to content

Solid color tint


Recommended Posts

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!


Link to comment
Share on other sites



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.

Link to comment
Share on other sites

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


Link to comment
Share on other sites

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



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.

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.

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.


  • Recently Browsing   0 members

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