mask parent container
Opened this issue · 8 comments
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);
};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
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?
this is was the original concept art, so mask background seem ok, but i can't not mask each items containers.
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 normalEUREKA !:)
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);
};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.
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
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.