Jump to content

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:

var MainState={  
  create: function(){
    var circleGraphic = new Phaser.Graphics();
    circleGraphic.drawCircle(0, 0, 100);
    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.lineTo(250, 0);
    barGraphic.lineTo(250, 10);
    barGraphic.lineTo(0, 10);
    barGraphic.lineTo(0, 0);
    var barSprite = this.game.add.sprite(this.game.world.width/2, this.game.world.height/2, barGraphic.generateTexture());
    //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! ;)

Link to comment
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

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...