addChild method and relative positioning of child / scaling

[leonidas]

Hey

First of all mad props whoever created this beautiful piece of software! 

 

Here, is my questions regarding addChild method.

 

From my AS3 days I remember child display object's coordinates were relative to parent. So, in this vein I was hoping gray square would be sitting in the top left corner of the blue square. Instead of this I got strange positioning, also child object(gray one) lost his propositions. Upon loading it was 100/100 square.

 

I guess I am missing crucial line of code but I cannot figure out where am I messing up

preload() {              this.game.load.image("debugRect", "Scripts/assets/debugRect.png");               //Load Map TIles        this.game.load.image("bigOrange", "Scripts/assets/secondMap/Untitled-3-0.png");        this.game.load.image("gray", "Scripts/assets/secondMap/Untitled-3-1.png");        this.game.load.image("lightBlue", "Scripts/assets/secondMap/Untitled-3-2.png");        this.game.load.image("red", "Scripts/assets/secondMap/Untitled-3-3.png");        this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;        ;    }    create() {        const  introSquareSprite = this.game.add.sprite(10,10, "debugRect");        introSquareSprite.anchor.setTo(0, 0);        introSquareSprite.width = 960;        introSquareSprite.height = 650;        const gray = this.game.add.sprite(0, 0, "gray");                  gray.anchor.setTo(0, 0);        introSquareSprite.addChild(gray);    }

and here is screenshot

 

[rich]

Child coordinates are indeed relative to the parent (just like Flash), but in the same vein setting the width/height adjusts the scale of the object, which of course influences the positioning, which is what appears to be going on here.

[leonidas]

Child coordinates are indeed relative to the parent (just like Flash), but in the same vein setting the width/height adjusts the scale of the object, which of course influences the positioning, which is what appears to be going on here.

 

Thanks for replay.

 

So...if I remove parent object's sizing it takes whole window and if I explicitly set sizing of parent and child objects child's position and scale is still messed up and 

 

create() {        const introSquareSprite = this.game.add.sprite(10, 10, "blueBG");        introSquareSprite.anchor.setTo(0, 0);        introSquareSprite.width = 960;        introSquareSprite.height = 650;        const gray = this.game.add.sprite(0, 0, "gray");        gray.width = 100;        gray.height = 100;        gray.anchor.setTo(0, 0);        introSquareSprite.addChild(gray);    }

[rich]

In the code above the width/height of both objects is still being set, so they're both still being scaled. And scaling anything influences the position of their descendants. Remove the width/height values from both objects and the grey box will be in the top left of its parent, as it has a 0x0 position.

[leonidas]

As I said removing sizing from the parent object makes is scale up to take whole viewport and gray one still not positioned correctly 

 create() {        const introSquareSprite = this.game.add.sprite(10, 10, "blueBG");        introSquareSprite.anchor.setTo(0, 0);               const gray = this.game.add.sprite(0, 0, "gray");              gray.anchor.setTo(0, 0);        introSquareSprite.addChild(gray);    }

[rich]

Yes because you've set your game scale mode to 'SHOW_ALL' (i.e. resize the canvas to fill all available space).

 

If you want the display to be the size specified in your game constructor then use NO_SCALE as the scale mode.

[leonidas]

Yes because you've set your game scale mode to 'SHOW_ALL' (i.e. resize the canvas to fill all available space).

 

If you want the display to be the size specified in your game constructor then use NO_SCALE as the scale mode.

Nope. Same... Parent is stretched over whole viewport. Child's position is still messed up

[rich]

Then you've something else, somewhere not in the code above, causing it. CSS perhaps. I bet if you right-click the canvas and inspect it, the dimensions do not match those given in the game constructor (unless you set that to something like 100%?)

[leonidas]

Then you've something else, somewhere not in the code above, causing it. CSS perhaps. I bet if you right-click the canvas and inspect it, the dimensions do not match those given in the game constructor (unless you set that to something like 100%?)

I am moron....smh

 

Thanks for your help