Sign in to follow this  
bLind17

Child position relative to parent anchor strangeness 2

Recommended Posts

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:
 
SXGOEb1.png
 
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:
H2kYq2n.png
 
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 :D. I really appreciate it!
 
cheers bLind

Share this post


Link to post
Share on other sites

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.

post-7918-0-41444600-1406235877.png

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.