DavidPesta

Why doesn't applying an anchor on a parent sprite carry the children sprites along with it?

Recommended Posts

I am using the last official release 2.6.2.

Given the following code, which can be found on the following jsbin:
http://jsbin.com/lazefep/1/edit?js,output

var MainState={  
  create: function(){
    var circleGraphic = new Phaser.Graphics();
    circleGraphic.beginFill(0xFFBBBB);
    circleGraphic.drawCircle(0, 0, 100);
    circleGraphic.endFill();
    
    circleSprite = this.game.add.sprite(0, 0, circleGraphic.generateTexture());
    //circleSprite.anchor.setTo(0.5); // (Try barSprite anchor below first.) Ugh, this doesn't fix it...
    
    var barGraphic = new Phaser.Graphics();
    barGraphic.beginFill(0x88FF88);
    barGraphic.lineTo(250, 0);
    barGraphic.lineTo(250, 10);
    barGraphic.lineTo(0, 10);
    barGraphic.lineTo(0, 0);
    barGraphic.endFill();
    
    var barSprite = this.game.add.sprite(this.game.world.width/2, this.game.world.height/2, barGraphic.generateTexture());
    barSprite.addChild(circleSprite);
    
    //barSprite.anchor.setTo(0.5); // Why doesn't the child adjust to the anchor with the parent?
  }
};

var game = new Phaser.Game(640, 480, Phaser.CANVAS, 'phaser-example', MainState);

As long as the two lines remain commented out, what is rendered makes perfect sense:

1. A circleSprite is created and registered to position 0,0 of the parent sprite that it is later attached to.

2. A barSprite is created and its top left is added to the center of the world.

3. The circleSprite is added as a child to barSprite, and consequently, the top left of that child sprite is found at 0,0 of the parent sprite.

As a result, you can see a sort of sideways "b" graphically depicted.

Now, my (reasonable?) assumption is that the parent barSprite can be treated like any ordinary sprite as a composite whole. Anything I do to the parent sprite should automatically cause cascaded adjustments to the children so that the parent sprite would behave as it would if it were just an individual sprite on its own without any children behavior artifacts.

However, if you notice, uncomment the line that sets the barSprite anchor, and the child does not follow. The child remains in place as if the anchor to the parent is not applied.

To make matters worse, I have no easy recourse. I cannot recover the intended sideways "b" by uncommenting the circleSprite anchor.

Is this a bug with anchor? Or is this intended behavior for some reason? What are my best options? (I am also curious if this behavior will exist in v3.)

Also, please make me aware if you happen to see a violation of good/best practices! ;)

Share this post


Link to post
Share on other sites

A child sprite inherits its parents transformations (position, scale, rotation). The anchor — which is the offset of a sprite's texture from its position — isn't involved at all. The sprite's anchor doesn't affect its position, so it doesn't affect the child's position either.

You can always adjust the child's local position: http://jsbin.com/zigoretexa/1/edit?js,output

Or just use alignIn instead: http://jsbin.com/navavurafi/1/edit?js,output

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.