Changing Size of Child Sprite Seems Non-Intuitive

[Rydez]

I have a character with multiple parts. I want them to move as one. So I create a "blank" sprite, then add my sprites character sprites to the "blank" sprites in the order I want them to appear. From searching around, this method seems to be typical. The issue comes when I try to change the widths and heights. For some reason, I have to divide by the parent sprite scale when setting the child sprite size:

var parentSprite = Game.add.sprite(Game.width/2, Game.height/2, '');
parentSprite.height = 100;
parentSprite.width = 100;    
parentSprite.anchor.setTo(0.5, 0.5);

var childSprite = Game.add.sprite(0, 0, 'dude');
childSprite.height = 100/parentSprite.scale.y;
childSprite.width = 100/parentSprite.scale.x;
childSprite.anchor.setTo(0.5, 0.5);

parentSprite.addChild(childSprite);

Perhaps this is necessary, to have the child sprite size relative to the parent. But I could not find this in the docs, and I don't think it's obvious that this should be done. Maybe I overlooked something.

For future reference, does anyone know where I could've found this information?

[rich]

It's just standard display list / scene graph behaviour. Parents influence children. Modifications to any parent transform related property (position, rotation, scale (which is what w/h change)) flow down the chain to children, which use the parent transform in their calculations, then pass the results on down to their children, and so on.

I agree with you it's perhaps not obvious if you've never encountered it before, but it's definitely not a trait specific to Phaser, you'll find it in any scene graph framework.

[samme]

You may find it a little easier if you make a 100 × 100 transparent image and use that for the parent sprite.

[samme]

docs/2.6.2/PIXI.PIXI.DisplayObject.html#worldScale

[Rydez]

Oh, okay, I see. I think this is the first time that I've used parent sprites like this. Now that I understand, I'm glad that it is the way it is.

5 hours ago, samme said:

You may find it a little easier if you make a 100 × 100 transparent image and use that for the parent sprite.

I might switch to this method, but I think this was actually the source of my confusion. I had originally added sprites to the player sprite which worked as I expected. But, then I couldn't bring the parent sprite in front of the child sprites so I switched to the "blank" sprite as a parent. Then I was confused about the "change" behavior.

I don't know who makes the Phaser examples or if they are community contributions, but perhaps an example about this nature would be nice. I think there is only one example about child sprites, and it doesn't illuminate this behavior. But, then again, maybe there are other examples that I'm unaware of that show this.

Anyway! Thanks guys!

[rich]

Yes in Phaser 2 parents sprites are always rendered first, then the children follow. So effectively child sprites are always on-top of parent sprites. If you need a fluid order you may be better off using a Group to organise the sprites instead, and then you can use Group methods like 'moveUp', 'sendToBack' etc to manipulate it.

[Rydez]

9 minutes ago, rich said:

Yes in Phaser 2 parents sprites are always rendered first, then the children follow. So effectively child sprites are always on-top of parent sprites. If you need a fluid order you may be better off using a Group to organise the sprites instead, and then you can use Group methods like 'moveUp', 'sendToBack' etc to manipulate it.

I thought about doing this, but it felt like I wouldn't benefit from it and would be better off just not using any grouping method at all. Adding children to a sprite is convenient because I can treat the different parts (body, head, gun) as a single sprite. Whereas if I use a group, then I will have to manipulate the parts separately, as I would if there was no grouping going on at all. At least, this is my understanding. Albeit naive. I think the main reason I want to stick with the child sprites is that their parent has a body, and groups don't have bodies.