Jump to content

Questions about Group, Layer, Container


DungeonDame
 Share

Recommended Posts

Hi!

I'm an ex-Flash developer learning Pixi, and I'm confused by the way Groups/Layers/Containers work. When I search Layer or Group in the API documentation, I get no results, so I've just been trying to understand the Z-Order Demo.

1) Is Container obsolete? In the demo comment it says it is, but in the API docs it doesn't. My understanding is that a Container is like a simplified Layer, where I can't specify z-index or inner sorting. So I use a Layer if I need better control over zindex/sorting, and otherwise just use Container?

2) I can see Group does not extend Container (because I can't do addChild on Group), what exactly is a Group? I see when a Layer is created we pass it a Group, which specifies the z-index and sorting. Is that the only purpose of a Group?

3) Does Layer extend Container?

4) Does this test code I wrote use Layers/Groups properly? I want mainLayer to be used for the gameplay sprites (right now just a floor sprite), and uiLayer on top with the user interface sprites (right now just a button sprite). So I add one sprite to each Layer and set the z-indexes using Groups. I'm not using Containers at all. It seems to work fine.

function init()
{
    // Application (app) is already created, textures already loaded

    app.stage = new Stage();
    app.stage.group.enableSort = true;

    this.mainGroup = new Group(0, false); // no sorting needed, just z-index
    this.mainLayer = new Layer(this.mainGroup);

    this.uiGroup = new Group(1, false);
    this.uiLayer = new Layer(this.uiGroup);

    app.stage.addChild(this.mainLayer);
    app.stage.addChild(this.uiLayer);

    this.floor = new Sprite(loader.resources['game/img/floor.png'].texture);
    this.floor.parentGroup = this.mainGroup;
    this.mainLayer.addChild(this.floor);
    this.floor.x = 50;

    this.uiButton = new Sprite(loader.resources['game/img/uiButton.png'].texture);
    this.uiButton.parentGroup = this.uiGroup;
    this.uiLayer.addChild(this.uiButton);
}

5) In the code above, what do the first 2 lines with the app.stage do? It seems nothing works without those lines, whereas if I use Containers instead of Layers, I can remove those lines, and app.stage is created automatically when I create app and it works (except for the zindexing).

 

Next time I will try to ask less questions at once.

 

Thanks a lot!

Link to comment
Share on other sites

Everything that pixi has is Container.

Group/Layer is new abstraction of a plugin: https://github.com/pixijs/pixi-display/tree/layers/src . The plugin addresses old problem that existed for all flash games: what if we want to sort SHADOWS,CHARACTERS, HPBARS into different containers? Should we put them manually to several containers every time we create/update new character? The plugin allows to have all the things in one container, that means when you kill the character, everything related to it is removed, and if you move the character - everything is moved too, however rendering is handled inside dynamic layers and that allows that shadows stay to shadows.

Please read provided README, it has everything.

Judging by your code, you dont understand whats going on there: its very strange that you use layer as both "parentLayer/parentGroup" and regular parent (addChild). Maybe try use only containers without the plugin first? Are you sure you need a sort that works THROUGH THE TREE and not simple z-index like here? https://github.com/pixijs/pixi-display/wiki#fast-container-sort

Also, pixi-v5 (pixijs.download/dev/pixi.js, http://pixijs.download/dev/docs/index.html ) already has z-index for simple containers

Link to comment
Share on other sites

Of course I'm honored that my experimental elements for big games are considered "vanilla pixijs", but please, next time, when you look at something, you can read first comment and save the time.

Z-ORDER DEMO (https://pixijs.io/examples/#/layers/zorder.js😞

// This is demo of pixi-display.js, https://github.com/gameofbombs/pixi-display
// Drag the rabbits to understand what's going on

 

Link to comment
Share on other sites

1 hour ago, ivan.popelyshev said:

Everything that pixi has is Container.

Group/Layer is new abstraction of a plugin: https://github.com/pixijs/pixi-display/tree/layers/src . The plugin addresses old problem that existed for all flash games: what if we want to sort SHADOWS,CHARACTERS, HPBARS into different containers? Should we put them manually to several containers every time we create/update new character? The plugin allows to have all the things in one container, that means when you kill the character, everything related to it is removed, and if you move the character - everything is moved too, however rendering is handled inside dynamic layers and that allows that shadows stay to shadows.

Please read provided README, it has everything.

Judging by your code, you dont understand whats going on there: its very strange that you use layer as both "parentLayer/parentGroup" and regular parent (addChild). Maybe try use only containers without the plugin first? Are you sure you need a sort that works THROUGH THE TREE and not simple z-index like here? https://github.com/pixijs/pixi-display/wiki#fast-container-sort

Also, pixi-v5 (pixijs.download/dev/pixi.js, http://pixijs.download/dev/docs/index.html ) already has z-index for simple containers

Thanks, makes a lot more sense now. I didn't need layers/groups for what I was trying to do, just needed to set the zIndex of the containers or add them to the stage in a certain order. And thanks for writing pixi-display, I see what the purpose of it is now and I'll be making use of it later when I introduce shadows. 

Link to comment
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...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...