These are chat archives for pixijs/pixi.js

Oct 2016
Luv Agarwal
Oct 29 2016 12:15

Hey, I am facing an unexpected issue in PIXI.Container

import PIXI from 'pixi.js';

let stage = new PIXI.Container();
stage.width = 100; stage.height = 200;
console.log(stage.width, stage.height);

It outputs "0 0"
I am using pixi v3.0.11

Ivan Popelyshev
Oct 29 2016 16:16
@luviiit hey
its 0 0 in v4 too
but actually Container is not a DIV like in html
it doesnt have width height at all
its not a UI Container
its a group of objects
if you dont have children, width=0 height=0, obviously
because there's nothing inside
Luv Agarwal
Oct 29 2016 16:31

@ivanpopelyshev, that makes sense. Thanks!

But, since I am changing the value of stage's attributes, it should show me the change in console.log. How is PIXI Container managing to avoid these changes? Is this functionality provided by javascript?

It is also not marked as readonly in docs

Chad Engler
Oct 29 2016 16:37
width/height are getters, for container it is defined as the size of its children. When you set it, it gets the current width/height and determines how much it should set the scale to meet the size you want. Since that container is empty, it has width/height 0 and there is no scale that would make it be the size you want so it does nothing

Here is an excerpt from a comment I made a while back:

In pixi, a Sprite's bounds are defined by the texture. That is, the size of the end-result of the rendered object. Similarly, since a Container is not drawn, and therefore the bounds of it are defined by the children it contains. Particularly, by the bounds of those children. For a Graphics object, the bounds are defined by the geometry that you draw in it. If you draw another rectangle in a Graphics object outside of the current bounds, the bounds expand to include the newly drawn geometry.

Hopefully that makes sense, and gives you a quick concept of how bounds are structured in Pixi.