Rectangle stroke doesn't always change with the shape

Phaser 3
1

I see that 3.50 fixed Rectangle so that .setSize() updates the stroke, but setting .width or .height directly does not update the path. Is this intentional? Took awhile for me to figure out that switching to .setSize() fixes the issue.

2

Hello @malahaas,

Well as Rectangle I assume you are referring the rectangle gameobject. If this is the case let me try to explain.

Rectangle gameobject extends base Shape object.

Base Shape object doesn’t extend Components/Size.js so it actually doesn’t have a width and height property originally. But it has a setSize method on it, which sets the width and height and almost every Shape extended objects sets when initialized. (See, Triangle, Star, Polygon ect.)

I’m guessing Shape doesn’t use Size component because it has a Frame related displayWidth and displayHeight property and calculation, so basicly it’s no good :smiley:.

Rectangle gameobject has it’s own setSize method so it can also update geom and pathData on it’s own.

// Rectangle#setSize:
/**
     * Sets the internal size of this Game Object, as used for frame or physics body creation.
     *
     * This will not change the size that the Game Object is rendered in-game.
     * For that you need to either set the scale of the Game Object (`setScale`) or call the
     * `setDisplaySize` method, which is the same thing as changing the scale but allows you
     * to do so by giving pixel values.
     *
     * If you have enabled this Game Object for input, changing the size will _not_ change the
     * size of the hit area. To do this you should adjust the `input.hitArea` object directly.
     *
     * @method Phaser.GameObjects.Rectangle#setSize
     * @since 3.13.0
     *
     * @param {number} width - The width of this Game Object.
     * @param {number} height - The height of this Game Object.
     *
     * @return {this} This Game Object instance.
     */
    setSize: function (width, height)
    {
        this.width = width;
        this.height = height;

        this.geom.setSize(width, height);

        this.updateData();

        return this;
    },

So if you wish to make it via updating width and height you need to do probably like following:

var rect = this.add.rectangle(0, 0, 128, 128, 0xff00ff);
rect.width = 256;
rect.height = 256;
rect.geom.setSize(256, 256);
rect.updateData();

So just better use setSize :smiley:

Hope I could explain as much as i can :slight_smile:

1 Like
3

Yea, I understand, but it does throw you off when you see that width and height are available as attributes and change the fill when set. Seems like it would be nice to defineProperty for width and height to call setSize or not have them as properties to avoid confusion

4

Maybe we can create a PR about it =)

1 Like
5

I think Phaser.GameObjects.Rectangle#setSize is supposed to be private, like Phaser.GameObjects.Shape#setSize. Maybe width and height as well.

6

I certainly hope Phaser.GameObjects.Rectangle#setSize wouldn’t be considered private. It does exactly what I need it to do. However, the underlying confusion I had with width/height actually stemmed from this article: Detect Overlap Between Selection Box and Sprites in Phaser 3 @ Playful Game Developmet Blog by Ourcade

7

Er, read-only I mean, not private.

8

Since Phaser v3.50 rect.setSize(width, height) will update the fill and stroke as desired.