Pixi.js: Container overflow hidden

Created on 22 Oct 2018 · 6Comments · Source: pixijs/pixi.js

Hi,
I have a case like this above. I need to have 2 Containers with some children containers. Container B is scrollable - I'm changing position of children containers inside. In case when some content is out of the Container B top edge I would like to hide it... Basically I'm looking for something like "overflow: hidden" from CSS. Do you have some idea how to deal with it ???

Source

mezykr

Most helpful comment

Try something like this:

const mask = new PIXI.Sprite(Texture.WHITE);
mask.width = 100;
mask.height = 20;
containerB.addChild(mask); // make sure mask it added to display list somewhere!
containerB.mask = mask;

bigtimebuddy on 22 Oct 2018

🎉2 👍2

All 6 comments

Masks :)

themoonrat on 22 Oct 2018

Try something like this:

const mask = new PIXI.Sprite(Texture.WHITE);
mask.width = 100;
mask.height = 20;
containerB.addChild(mask); // make sure mask it added to display list somewhere!
containerB.mask = mask;

bigtimebuddy on 22 Oct 2018

🎉2 👍2

Hi,
Thanks for your responses! In case when I would use mask, it will cover children elements from ContainerA. (ContainerA also is scrollable). It will look like this: