Child position relative to parent anchor strangeness 2

[bLind17]

Hi peoplez!
 
This is more or less a follow-up to this Thread in the Pixi.js section of this board.
 
And this is what I want:
 

 
The Player in the back is my parent. It is an object that is derived from the Phaser.Sprite class.
The number and the text are my children, grouped together in player.attachments.
 
I want the number to be centered and
the text to be at the bottom of the player.
 
Now this is how I tried to achieve that:

    player = new Player(game, 'player', 'Christian', player_number, x, y);    player_scale = Math.min(magic.config.gameScale.x, magic.config.gameScale.y);    player.scale.x = player_scale;    player.scale.y = player_scale;    player.anchor.setTo(0.5, 0.5);         font_size = 30;    name = game.add.text(            0, player.height/2,     // text should go to the bottom of player's body            player.name,            {/*style*/});    name.anchor.setTo(0.5, 1);                       font_size = 50;    number = game.add.text(            0, 0,                   // text should go to center of the player's body (see anchor)            player.number,            {/*style*/});    number.anchor.setTo(0.5, 0.25);         player.attachments.add(name);      player.attachments.add(number);    game.magic.players.add(player)

 
As long as the player_scale is 1, everything works fine.
But when it changes, the positioning is screwed up. And I still don't really get how this happens^^.
 
With a smaller scale, it might look like this:

 
In the Pixi.js thread moszis wrote:

I solved the issue above by using getLocalBounds() of parent Sprite.

 
and mrBRC wrote:

the anchor of the parent really should be at 0,0 because it's really only being used as a DisplayObjectContainer

 
I tried to change my code accordingly, but that didn't put the texts at the correct positions either...
 
If you have any suggestions or ideas, I'd be soo happy to hear them!
Thanks for reading, if you made it down here . I really appreciate it!
 
cheers bLind

[bLind17]

My current solution to this is:

putting the player body in the attachments-group as well

and then scaling the whole group.

 

But still, any ideas?

 

cheers bLind

[lewster32]

The reason this is happening is because each object is using its own anchor; anchors are not relative in this situation. As soon as you start to scale objects, they will behave as if they are independent (because from the renderer's point of view, they are) and each will scale around its anchor point - and the problem is that I assume you're expecting the anchor points themselves (i.e. the positions of the objects) to also scale with your player, but this is not the case (see attachment) unless you actually use addChild or similar to make it a child of the object you're scaling - but then you run into the ugly text scaling issues which I assume is what you're trying to avoid.

 

What you need to do is use getBounds on the object you're scaling, and then set the x and y positions of the objects you want to move with the scale according to its bounds. See this fiddle for an example:

 

http://jsfiddle.net/lewster32/Kc4N2/

 

In the fiddle, in the update function I reposition the text accordingly, with the number centered on the object, and the name centered on the object's bottom bound. You will need to replicate this inside your extended sprite but the theory still holds true.

[bLind17]

Wow, this is relly nice and helpful!

 

Thanks a lot for the example .

Much appreciated.

 

cheers

[lewster32]

By the way, if you want the number to scale with the player, here's a way of doing it that gets around the ugly scaling of text: http://jsfiddle.net/lewster32/Kc4N2/2/