DungeonDame Posted January 25, 2019 Share Posted January 25, 2019 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! Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted January 25, 2019 Share Posted January 25, 2019 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 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted January 25, 2019 Share Posted January 25, 2019 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 Quote Link to comment Share on other sites More sharing options...
DungeonDame Posted January 25, 2019 Author Share Posted January 25, 2019 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. ivan.popelyshev 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.