PIXI.Container, setting width bugs?

[ansien123]

Could someone please explain me how the hell this is possible?

https://jsfiddle.net/f1vgvgws/2/

On line 6 (before even setting the width, it's already 500? And getting the width after setting it returns 0? I'm so confused...

[ivan.popelyshev]

"width" property is actually setting the scale. If there's nothing in container, its width is 0 always.

[ansien123]

1 minute ago, ivan.popelyshev said:

"width" property is actually setting the scale. If there's nothing in container, its width is 0 always.

Ah okay.., but how on earth is _width 500 before even setting it?

[xerver]

If you take a look at the code it may make a bit more sense:

https://github.com/pixijs/pixi.js/blob/master/src/core/display/Container.js#L35-L63

First, `_width` is not actually used, it is something that was left over from an old iteration and should always be `undefined` in v4. The reason you see it showing up is because of two things. One, it is actually set by the setter here, which adds the property. That line should not be there since it is a useless (and potentially harmful) operation. Two, when you log an object to the console the properties you inspect are not the values of that object at the time you logged it. Instead they are the properties at the time you clicked the "exapand" arrow to view them. Only at that interaction does Chrome evaluate the property values and display them, which is how you get 500, because before you click it your code sets it.

Second, you can see that changing the width modifies the scale of a container here. A container's "size" is just the size of its children added together, and their size acocunts for the parent's scale. When a container has no children, or no children of any particular size then it is of height/width 0. When at height/width 0, there is no scale to change.

Hopefully that helps clear it up.

[ansien123]

1 minute ago, xerver said:

If you take a look at the code it may make a bit more sense:

https://github.com/pixijs/pixi.js/blob/master/src/core/display/Container.js#L35-L63

First, `_width` is not actually used, it is something that was left over from an old iteration and should always be `undefined` in v4. The reason you see it showing up is because of two things. One, it is actually set by the setter here, which adds the property. That line should not be there since it is a useless (and potentially harmful) operation. Two, when you log an object to the console the properties you inspect are not the values of that object at the time you logged it. Instead they are the properties at the time you clicked the "exapand" arrow to view them. Only at that interaction does Chrome evaluate the property values and display them, which is how you get 500, because before you click it your code sets it.

Second, you can see that changing the width modifies the scale of a container here. A container's "size" is just the size of its children added together, and their size acocunts for the parent's scale. When a container has no children, or no children of any particular size then it is of height/width 0. When at height/width 0, there is no scale to change.

Hopefully that helps clear it up.

 

Ah okay... That explains so much. Thanks so much for the quick help guys, you're awesome!

[xerver]

No problem, good luck with your project!