Quantcast
Channel: Pixi.js Latest Topics
Viewing all articles
Browse latest Browse all 3978

Questions about Group, Layer, Container

$
0
0

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!


Viewing all articles
Browse latest Browse all 3978

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>