Container Height and Width

[wclarkson]

In Phaser 2 I will often add things to a group, and then scale that based on the game's width

myGroup.width=game.width*.9;
myGroup.scale.y=myGroup.scale.x;

This has worked very well for me.

Phaser 3 groups and containers don't seem to work the same way.

I can't get or set the width of a container. I did find a workaround by getting the children that were most to the top, left, right and bottom and calculating a bounding box.
I think I can scale it to a percentage of the canvas width by getting an initial canvas width to the calculated width ratio.
But... it seems like a lot of work for what used to be 2 lines of code.

Am I missing something??

[wclarkson]

5 hours after posting this, trying to Google the answer, and all I'm getting is my own question....

Anyway here is what I came up with for a class that extends container overwriting the built-in height and width.

I can read width and height but can set it, I can, however, scale to the game's width

init() {
        this.setSize(this.getBounds().width, this.getBounds().height);
    }
    get width() {
        return this.getBounds().width;
    }
    get height() {
        return this.getBounds().height;
    }
    scaleToGameW(per) {
        if (this.displayWidth == 0 || this.displayHeight == 0) {
            this.init();
        }
        this.displayWidth = game.config.width * per;
        this.scaleY = this.scaleX;
        this.init();
    }

[rich]

Containers have a native getBounds function, which will return a rectangle from which you can make any calculation you like. Just be careful not to call it too often, it's expensive, especially if you've a lot of children. I could have exposed it as the property 'width' but then someone would do something stupid like try and tween the width/height of a Container, and wonder why it bogs down their CPU so much.

[user471]

18 hours ago, rich said:

Just be careful not to call it too often, it's expensive, especially if you've a lot of children.

Why couldn't it be cached? So it would need a recalculation only if one of the children changes its position or size.

[wclarkson]

19 hours ago, rich said:

Containers have a native getBounds function, which will return a rectangle from which you can make any calculation you like. Just be careful not to call it too often, it's expensive, especially if you've a lot of children. I could have exposed it as the property 'width' but then someone would do something stupid like try and tween the width/height of a Container, and wonder why it bogs down their CPU so much.

It makes more sense now that you explain it. I'm just so used to having height and width so readily available on all objects. 

Can you tell me what is the difference between width and displayWidth?

[namklabs]

On 5/6/2018 at 3:47 AM, wclarkson said:

Can you tell me what is the difference between width and displayWidth? 

Well, it looks like Containers don't use widths or displayWidths. So you can't use either of those properties on a Container.

Edit:

You can set the displayWidth/displayHeight but from what I can tell it makes your contained elements disappear. It seems broken at this time. (Phaser v3.6.0)

From Devlog #120 (https://phaser.io/phaser3/devlog/120) :

Quote

The container has its own transform, meaning a position, rotation, and scale.

Notice the lack of width/height/displayWidth/displayHeight. I think that's intentional.

For other more normal GameObjects like sprites and images, width is "The native (un-scaled) width of this Game Object." and the displayWidth is "The displayed width of this Game Object. This value takes into account the scale factor." I got those definitions from the following in the docs:

https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Image.html#width
https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Image.html#displayWidth

From my limited (but growing!) experience with Phaser 3, I've found that you can assign the displayWidth property of non-Container GameObject to a new value and it will change the width of the element. Whenever I have tried to assign something.width = newvalue, it never does anything.

Thank you, by the way, for showing me the scaleY = scaleX trick in your code snippet above. That was a real "duh!" moment for me, but I'm glad I know about that now. ?

 

Edited May 10, 2018 by namklabs
Updated note about the ability to set displayWidth/display height on a container

[wclarkson]

Hi, Yeah I found setting the .width does nothing as well. 

However, in the code example above I am setting the displayWidth of the container.

This is my console.log of a class that extends container. Changing it will alter the width of the container.

1. Grid {_events: r, _eventsCount: 0, scene: SceneMain, type: "Container", parentContainer: null, …}
   1. active:true
   2. alpha:(...)
   3. alphaBottomLeft:(...)
   4. alphaBottomRight:(...)
   5. alphaTopLeft:(...)
   6. alphaTopRight:(...)
   7. angle:(...)
   8. blendMode:(...)
   9. body:null
   10. cameraFilter:0
   11. data:null
   12. depth:(...)
   13. displayHeight:(...)
   14. displayOriginX:(...)
   15. displayOriginY:(...)
   16. displayWidth:240

Thanks for the links on the width vs displayWidth. Still wrapping my head around it.

 

[namklabs]

You're welcome! I guess I spoke too soon when I said you can't set the displayWidth. However, when I tried setting it, the elements in my container disappeared regardless of the value I set it to. It seems broken.

[eddieone]

I think the scaleManager is not ready yet ?