Nested Containers

[TR-i]

I'm sure the answer is simple but I've spent all day on my issue.

I create a container and add it to the app.stage. I create a second container and add it to the first.

If I add a sprite object to the first container it appears on the stage. If I add it to the nested container nothing appears.

I've confirmed that there is a child inside the nested container, but can't see it.

[ivan.popelyshev]

it should work. Please post the reproduction

[TR-i]

const stagewidth = 1920;

const stageheight = 1080;

var screen0 = new PIXI.Container(); screen0.name = 'screen0'; app.stage.addChild(screen0); screen0.backdrop = new PIXI.Graphics(); screen0.backdrop.name = 'backdrop'; screen0.backdrop.beginFill(0xFFFFFF,1); screen0.backdrop.drawRect(0,0, 1920 , 1080); screen0.backdrop.endFill(); screen0.backdrop.tint = 0x7F7F7F; screen0.addChild(screen0.backdrop);

var objects0 = new PIXI.Container(); objects0.name = 'objects'; objects0.width = stagewidth; objects0.height = stageheight; objects0.pivot.x = stagewidth / 2; objects0.pivot.y = stageheight / 2; screen0.objects = objects0; screen0.addChild(objects0);

.

.

 

function addObjectToScreen(o){ //o is a sprite object

s = returnDrawScreen(); // returns container 'screen0'

s.addChild(o); // object appears

OR

s.objects.addChild(o); // s.objects.children.length = 1: object does not appear

}

[ivan.popelyshev]

Your objects is out of screen size, because you did some manipulations with transform in objects0. Remove pivot, remove resizing. If object appears and you want to actually do that resizing and pivot - I'm sorry, I do not understand what are you trying to do with those operations. It looks like you want to scale whole stage inside objects that way it fits the screen, but you its done different way

container.pivot.set(stageWidth/2, stageHeight/2);
container.position.set(renderer.screen.width/2, renderer.screen.height/2);

container.scale.set(scaleX, scaleY); 

That way you pin global point "screen/2" to local point "stage/2". As for scale, you have to calculate it yourself and not rely on "container.width" and "container.height", because they call "getLocalBounds()" and this thing returns bounds area of all children of container, which in ytour case is 0 at the moment. My advice is to not use ".width" ".height" if you dont know clearly what those things are doing. PixiJS tree is not DOM. "position, scale, rotation, pivot" are first-class citizens here, "width, height" are derivatives. Welcome to Flash world.

Edited August 23, 2021 by ivan.popelyshev

[TR-i]

Thanks Ivan- making some progress. The width and pivot calls were just me being desperate.

My project is somewhat complicated. I am double buffering the screen so I can have transitions and each container (buffer) has 2 containers- one for display objects (non-interactive) and one for compound devices (interactive). That's why there is a "screen0"... because there is also a "screen1". Objects and devices are created dynamically. No display objects are hard-coded.

Everything onscreen is drawn with PIXI- there is no CSS (except to create textures) or HTML (except to hold Javascript).

 

 

[ivan.popelyshev]

> I am double buffering the screen so I can have transitions

that's the first time i hear someone does this on pixi. I just dont understand why, usually people just use a tween library and that's enough. What kinjd of transition requires double-buffer? Oh, interactive stuff.. that might be it. Why not just add hitArea to objects, where you store where they will go to? or override containsPoint() on them if you have difficult logic

Edited August 24, 2021 by ivan.popelyshev

[TR-i]

My project is not a game or website. Imagine a content management/presentation system based on interactive TV. HTML5 running inside a standalone app, not a browser. That's why the stage is 1920 x 1080- full HDTV standard.