Understanding how Phaser group works

[jjppof]

I created these four groups:

underlayer_group = game.add.group();
npc_group = game.add.group();
overlayer_group = game.add.group();
transtions_group = game.add.group();

I set these depth factor to help me sorting them:

underlayer_group.depth = 1;
npc_group.depth = 2;
overlayer_group.depth = 3;
transtions_group.depth = 4;

The problem is:

In some moments of the game, I use removeAll() method from the groups underlayer_group and overlayer_group to remove their children, so I can add new children.

Here is how I add them:

this.map_sprite = game.add.tilemap(this.key_name);
this.map_sprite.addTilesetImage(this.tileset_name, this.key_name);
for(var i = 0; i < this.sprite.layers.length; i++){
    var layer = this.sprite.createLayer(this.sprite.layers[i].name);
    layer.resizeWorld();
    overlayer_group.addChild(layer);
}

I was hoping that only creating the groups in that initial order, I would not have problems with their z order. But I'm having. New layers come over transitions_group. So I created the depth property to help me sort after children insertion like this:

game.world.sort('depth', Phaser.Group.SORT_ASCENDING);

But this is also not working.

What can I do to sort my groups properly?

---------- EDIT

It seems that only the group with a graphic sprite (rectangle) is not working properly...

[XekeDeath]

After a very quick glance, I would say change

overlayer_group.addChild(layer);

to

overlayer_group.add(layer);

[jjppof]

15 hours ago, XekeDeath said:

After a very quick glance, I would say change

overlayer_group.addChild(layer);

to

overlayer_group.add(layer);

Changed the code, but nothing changed. The z index of the groups are right. But z index of their children is wrong. A child of z index = 7 inside overlayer_group is on top of a child of z index = 4 inside transition_group, even if overlayer_group has z index = 3 and transition_group has z index = 4.

[drhayes]

Regarding your edit: what graphic sprite isn't working? How is it created and added to a group?

[jjppof]

23 minutes ago, drhayes said:

Regarding your edit: what graphic sprite isn't working? How is it created and added to a group?

transtions_group = game.add.group();
black_rect = game.add.graphics(0, 0);
black_rect.lineStyle(0);
black_rect.beginFill(0x0, 1);
black_rect.drawRect(0, 0, width, height);
black_rect.endFill();
transtions_group.addChild(black_rect);

 

[drhayes]

I don't think it's a problem, but don't forget to use "add" instead of "addChild".

I use exactly this strategy in my games (make the groups in the order I want them, back to front, and add children only to those groups) and don't have any problems. Maybe the groups are getting deleted when you change stage and you're re-making them out of order?

The z-indexes shouldn't matter at all between groups, only inside the sprite's parent group. I'm kinda stumped. I would make a really tiny example that has this problem in the sandbox or on JSFiddle or something and see if you can reproduce it.

[jjppof]

8 minutes ago, drhayes said:

I don't think it's a problem, but don't forget to use "add" instead of "addChild".

I use exactly this strategy in my games (make the groups in the order I want them, back to front, and add children only to those groups) and don't have any problems. Maybe the groups are getting deleted when you change stage and you're re-making them out of order?

The z-indexes shouldn't matter at all between groups, only inside the sprite's parent group. I'm kinda stumped. I would make a really tiny example that has this problem in the sandbox or on JSFiddle or something and see if you can reproduce it.

I think we can close this topic, because the real problem that is happening is other thing as I described here. I thought that was a Z index problem, because I was imagining that the fade out problem I'm having was due to a possible desorder letting the black plane in the lowest layer not causing the fade out effect.