-
Notifications
You must be signed in to change notification settings - Fork 57
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
mask parent container #37
Comments
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 |
i just experimented something that's work 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 |
EUREKA !:) 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. // 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. |
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. 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 |
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.
The text was updated successfully, but these errors were encountered: