mask parent container

[jonlepage]

any solution to add a single mask to parent container instead of each children ?

in this scenario , i would like to assign mask to master.mask
But it only work if a asign mask to each child's.
Any solution or suggest ? i search issue, but can't find code example.

_menu_items.prototype.initialize = function() {
    const dataBase = $Loader.Data2.menueItems;
    const master = new PIXI.Container();
    var d = new PIXI.Sprite(dataBase.textures.bgMaster);
    var n = new PIXI.Sprite(dataBase.textures_n.bgDiag_n);
        d.parentGroup = PIXI.lights.diffuseGroup;
        n.parentGroup = PIXI.lights.normalGroup;
        master.addChild(d,n);

 // FIXME: add single mask to master.mask instead of d,n
    const mask_d = new PIXI.Sprite(PIXI.Texture.WHITE);
    mask_d.width = d.width/2, mask_d.height = d.height/2;
    const mask_n = new PIXI.Sprite(PIXI.Texture.WHITE); 
    mask_n.width = d.width/2, mask_n.height = d.height/2;
    // add mask to diffuse,normal
    d.mask = mask_d;
    n.mask = mask_n;
    
    this.parentGroup = $displayGroup.group[4];
    this.addChild(master,mask_d,mask_n); 
    this.position.set(260,460);
};

[ivanpopelyshev]

that wont work because there's no way to distinguish whether you want a mask on parent or on each child individually. In this case mask can be applied only individually. But you can use the same mask if they are identical

[jonlepage]

this give me some technical issue.
It work fine if i add mask for the background (x4)
My bg1 and bg2 are deformed with mouse move.

But i have also container for items, and i would like to show all items in 1 page and use mask to scroll list.
But if i use this technique and mask all items, i drop to 5 fps!
And i cannot add items container to diffuse background , because it deformed with mouse.

The only thing i can see , it to split item to max (25) per page, and add a page selector to index new list each time.

Do you think it the only way, or you have a magic idea?

[jonlepage]

this is was the original concept art, so mask background seem ok, but i can't not mask each items containers.

[jonlepage]

i just experimented something that's work
Am not sure if it a really good idea, but it work.
i remove the parentGroup , and add diffuse normal to the bg, and i will just need to remove the position update from parent.
i try with 250 items , and i get no lag or spike.

    for (let i=0, x = 250, y = 75, xx=0, l=maxGameItemsType; i<l; i++,x+=250) {
        const itemsFrame = new PIXI.Container();
        var d = new PIXI.Sprite(dataBase.textures.itemsFrame);
        var n = new PIXI.Sprite(dataBase.textures_n.itemsFrame_n);
            //d.parentGroup = PIXI.lights.diffuseGroup;
            //n.parentGroup = PIXI.lights.normalGroup;
            //itemsFrame.addChild(d,n);
// add to the mask background
            bg.children[0].addChild(d) // add to bg sprite diffuse
            bg.children[1].addChild(n) // add to bg sprite normal

[jonlepage]

EUREKA !:)
first test work

This give me a big headache!

It's a complex way to manage mask with diffuse and normal, by chance I need it only for rendering this menu.
So here how i proceed.

// create menu Items
_menu_items.prototype.initialize = function() {
    const dataBase = $Loader.Data2.menueItems;

    // contour du menue
    const frames = new PIXI.Container();
    var d = new PIXI.Sprite(dataBase.textures.menueItemFrame);
    var n = new PIXI.Sprite(dataBase.textures_n.menueItemFrame_n);
        d.parentGroup = PIXI.lights.diffuseGroup;
        n.parentGroup = PIXI.lights.normalGroup;
        frames.pivot.set(d.width/2,d.height/2);
    frames.addChild(d,n);
    
    //MASK FIXME: 
    const masked_d = new PIXI.Container(); // difuse menu mask limit 
    const masked_n = new PIXI.Container(); // normal menu mask limit
    masked_d.parentGroup = PIXI.lights.diffuseGroup;
    masked_n.parentGroup = PIXI.lights.normalGroup;
    const mask_d = new PIXI.Sprite(PIXI.Texture.WHITE);
    const mask_n = new PIXI.Sprite(PIXI.Texture.WHITE);
        mask_d.width = d.width-42, mask_d.height = d.height-45;
        mask_n.width = d.width-42, mask_n.height = d.height-45;
        mask_d.position.set(42,45);
        mask_n.position.set(42,45);
    masked_d.mask = masked_d.addChild(mask_d);
    masked_n.mask = masked_n.addChild(mask_n);

    // create x2 BG
    var d = new PIXI.Sprite(dataBase.textures.bgMaster);
    var n = new PIXI.Sprite(dataBase.textures_n.bgMaster_n);
        masked_d.addChild(d);
        masked_n.addChild(n);
    this.bgFX1 = {d,n}; // store for scope mouse FX deformation
    var d = new PIXI.Sprite(dataBase.textures.bgDiag);
    var n = new PIXI.Sprite(dataBase.textures_n.bgDiag_n);
        d.alpha = 0.2; n.alpha = 0.8;
        masked_d.addChild(d);
        masked_n.addChild(n);
    this.bgFX2 = {d,n}; // store for scope mouse FX deformation
    masked_d.pivot.set(d.width/2,d.height/2);
    masked_n.pivot.set(n.width/2,n.height/2);
   
    // build items test
    let maxGameItemsType = 120; //FIXME: add a game items limits
    let itemsFrames = []; // empty item frame avaible
    let bgTxtFocus = []; // empty item frame avaible
    for (let i=0, x = 250, y = 75, xx=0, l=maxGameItemsType; i<l; i++,x+=250) {
        // items frames containers
        var d = new PIXI.Sprite(dataBase.textures.itemsFrame);
        var n = new PIXI.Sprite(dataBase.textures_n.itemsFrame_n);
            d.position.set(x,y);
            n.position.set(x,y);
            masked_d.addChild(d);
            masked_n.addChild(n);
        itemsFrames.push({d,n});
        // text Background FX
        var d = new PIXI.Sprite(dataBase.textures.bgTxtFocus);
        var n = new PIXI.Sprite(dataBase.textures_n.bgTxtFocus_n);
            d.blendMode = 1;
            n.blendMode = 2;
            d.position.set(x,y);
            n.position.set(x,y);
            masked_d.addChild(d);
            masked_n.addChild(n);
            bgTxtFocus.push({d,n});
        xx++;
        if(xx===5){
            xx=0;
            x = 0;
            y+=87;
        }
    };
    // build filterBy
    const filterBy = new PIXI.Container();
    var d = new PIXI.Sprite(dataBase.textures.buttonFilterBy);
    var n = new PIXI.Sprite(dataBase.textures_n.buttonFilterBy_n);
        d.parentGroup = PIXI.lights.diffuseGroup;
        n.parentGroup = PIXI.lights.normalGroup;
    filterBy.addChild(d,n);
    filterBy.pivot.set(d.width/2,d.height/2);
    filterBy.position.set(760,15);
    filterBy.scale.set(0.9,0.9);

    
    this.parentGroup = $displayGroup.group[4];
    this.addChild(masked_d,masked_n,frames,filterBy);
    this.position.set(1050,680);
    //TODO: DELETE ME 
    setInterval((function(){ 
        this.bgFX1.d.position.set(($mouse.x/120)-20,($mouse.y/50)-20);
        this.bgFX2.d.position.set((($mouse.x/60)-20)*-1,(($mouse.y/45)-20)*-1);
        this.bgFX2.d.rotation = $mouse.x/70000;
        this.bgFX2.d.scale.x = 1-($mouse.x/100000);
       
    }).bind(this), 20);
};

[ivanpopelyshev]

Actually, I think you need separate lights and diffuse and everything for that window. Double the groups. Add mouse light there too.

It requires understanding of how pixi-display and pixi-lights work, because I honestly didnt think that you add lights to windows too, and didnt take rectangular masks into account.

Well, actually, i have an idea how to fix that inside pixi-display :) I have to add extra field "groupMask" there and if there are multiple elements in the sorting sequence that have the same mask, mask will be applied only once.

[ivanpopelyshev]

        mask_d.width = d.width-42, mask_d.height = d.height-45;
        mask_n.width = d.width-42, mask_n.height = d.height-45;
        mask_d.position.set(42,45);
        mask_n.position.set(42,45);

I still dont understand why you use two masks there. One is enough. Mask is only a position+graphics

[jonlepage]

true, i don't know why but the first try was not work with x1 mask.
But now it work

    const masked_d = new PIXI.Container(); // difuse menu mask limit 
    const masked_n = new PIXI.Container(); // normal menu mask limit
        masked_d.parentGroup = PIXI.lights.diffuseGroup;
        masked_n.parentGroup = PIXI.lights.normalGroup;
    const mask_d = new PIXI.Sprite(PIXI.Texture.WHITE);
    //const mask_n = new PIXI.Sprite(PIXI.Texture.WHITE);
        mask_d.width = d.width-42, mask_d.height = d.height-45;
       // mask_n.width = d.width-42, mask_n.height = d.height-45;
        mask_d.position.set(42,45);
       // mask_n.position.set(42,45);
    masked_d.mask = masked_d.addChild(mask_d);
    masked_n.mask = mask_d;

Also If you add a groupMask, i will happy to use it :)
Because my code for now look very dirty.