CODEWITHSUNDEEP
javascripthtmlgoogle-chromepixi.js
MrNobody
MrNobody

Reputation: 69

How to apply mask in pixijs container that will not show it's color at page refresh?

I'm using the code below to apply a mask in a container, but after I click the refresh button on page (chrome) the pixi stage becomes completely white until the refresh completes. Do you know how to fix that?

            let mask = new PIXI.Sprite(PIXI.Texture.WHITE);
            mask.x = maskX;
            mask.y = maskY;
            mask.width = maskWidth;
            mask.height = maskHeight;
            container.addChild(mask);
            container.mask = mask;

Upvotes: 0

Views: 6214

Answers (2)

Mudassir
Mudassir

Reputation: 408

I know it is late, but this can do the trick

const app = new PIXI.Application({ antialias: true, backgroundColor : 0x1099bb });
document.body.appendChild(app.view);

let square = new PIXI.Graphics();
square.beginFill(0x660000);
square.drawRect(0, 0, 200, 150);
square.endFill();
app.stage.addChild(square);


let circle = new PIXI.Graphics();
circle.lineStyle(0); 
circle.beginFill(0x66ffcc, 1);
circle.drawCircle(90, 75, 70);
circle.endFill();
app.stage.addChild(circle);

square.mask = transparentmask(circle);

function transparentmask(circle){
//fresh white sprite
let sprite = new PIXI.Sprite(PIXI.Texture.WHITE);
sprite.tint = 0xffffff;
sprite.x = 0;
sprite.y = 0;
sprite.width = 200;
sprite.height = 150;
//this will do the trick
sprite.blendMode = PIXI.BLEND_MODES.SRC_IN;
  
let originalContainer = new PIXI.Container();
originalContainer.addChild(circle);
originalContainer.addChild(sprite);
let genTexture = app.renderer.generateTexture(originalContainer);
return new PIXI.Sprite(genTexture);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/6.2.2/browser/pixi.js"></script>

enter image description here

Upvotes: 3

Irongaze.com
Irongaze.com

Reputation: 1645

The mask shouldn't be a child of the container. You're creating a sprite, adding it as a visible child, and then using the sprite's boundary rectangle as a mask.

Remove the addChild() call, and it will mask properly, but in addition, you should set the container mast to a PIXI.Rectangle instead of a sprite, if all you're doing is masking a rectangular area.

Upvotes: 3

Related Questions