Jump to content

Nested Containers


Recommended Posts

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.

Link to post
Share on other sites

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

}

Link to post
Share on other sites

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 by ivan.popelyshev
Link to post
Share on other sites

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).

 

 

Link to post
Share on other sites

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 by ivan.popelyshev
Link to post
Share on other sites

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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...