Jump to content

addChild method and relative positioning of child / scaling


leonidas
 Share

Recommended Posts

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

 

post-16668-0-36140500-1443734518_thumb.p

Link to comment
Share on other sites

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);    }

post-16668-0-04919900-1443735646_thumb.p

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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);    }

post-16668-0-29479600-1443738523_thumb.p

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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