Jump to content

Container Height and Width


wclarkson
 Share

Recommended Posts

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??

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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 by namklabs
Updated note about the ability to set displayWidth/display height on a container
Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

  • 7 months later...
 Share

  • Recently Browsing   0 members

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