Child sprite does not respect group/depth/layering of parent?

[ChubbRck]

Hi there,

 

I'm having an issue where a child sprite does not respect the depth of the parent's group. Meaning that other objects will render on top of the parent sprite as expected, but not the child sprite, which appears on top of both the parent (expected) AND other objects (unexpected).

 

First, I am extending the sprite class:

var Wall = function (game, x, y, width, height) {    Phaser.Sprite.call(this, game, x, y, 'wall-border');    this.width = width;    this.height = height;    this.anchor.setTo(0, 1);    game.physics.arcade.enable(this);    this.body.immovable = true;     var child = this.addChild(game.add.tileSprite(0,0,100,100,'wall-pattern'));    // this.game.add.existing(child); // (THIS LINE IS THE PROBLEM)    child.x = this.x + 10;    child.y = this.y - 10;    child.anchor.setTo(0, 1);    child.width = this.width - 20;    child.height = this.height - 20;}

The problem is that the tileSprite created as a child does not appear in game unless the commented out line is added, but if so, it appears on top of all other objects (does not respect the parent's group ordering). Do I need to add the child to the same group as the parent or....? I know I'm doing something dumb, so any guidance is appreciated.

 

Thank you!

 

[ChubbRck]

Help me Phaser legends, you're my only hope!

[drhayes]

You've got a couple of things going on:

 

1. The commented out line is extraneous; you don't need it. By calling "game.add.tilesprite" you're creating a tilesprite and adding it to the world. By passing the result to "this.addChild" you are removing it from the world and adding it as a child of the current sprite. If you then called "game.add.existing" that would *remove* it from the current sprite and add it to the world in front of everything... not what you want.

 

2. Children are positioned relative to their parent. When you say "child.x = this.x + 10" the child will be positioned AWAY from its parent, possibly by a large amount. You probably mean something like "child.x = 10". Similarly for y.

[ChubbRck]

Ah, of course! Since the position is relative, I was positioning the child way off screen by adding the position of the child to the parent. You're the man. Thank you -

[ChubbRck]

A follow-up question for anyone. My child sprites are being rendered beneath their parent whereas they should be drawn on top. I can't imagine why this would be.  Anyone have any ideas? 

EDIT: My bad, I was adding the child sprites to another group