Masking black SVG image to create a color

[ansros705]

Hi guys,

I think I have problem how masking in PIXIjs works.

I have this image of black horse 

And I would like to use masking in order to give it the color.

Here is my code so far:

const app = new PIXI.Application({backgroundColor: 0xFFFFFF})

document.body.appendChild(app.view)

PIXI.loader.add('assets/horse.png').load(() => {
  const horse_sprite = new PIXI.Sprite(PIXI.loader.resources['assets/horse.png'].texture)
  const horse_mask = new PIXI.Graphics()
  horse_square.beginFill(0xFFaaFF)
  horse_square.drawRect(0, 0, 130, 130)
  horse_square.endFill()
  
  horse_mask.mask = horse // I can see the horse and the square if I comment this out
  
  app.stage.addChild(horse_mask)
  app.stage.addChild(horse_sprite)
})

It's not working, I can't see anything, not a horse nor the square.

Thanks

[ivan.popelyshev]

Masking works both by alpha and red channel. For black color, red channel is 0. 

How to solve it, 3 ways:

1. Make your horse white.

2. Make your horse white AND use "tint" attribute instead of using it as a mask for a square. Its significantly faster.

3. hard, rebuild pixi so it accepts masks of any color:

 

 

 

[ivan.popelyshev]

And if you want to just strip all the color of colorful sprite and use only its alpha, you can use https://github.com/gameofbombs/pixi-heaven.  It has advanced tint management.

Example: https://gameofbombs.github.io/examples-heaven/#/basics/basic.js