wclarkson

Container Height and Width

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

Share this post


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

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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?

Share this post


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

Share this post


Link to post
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.

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.