Container changes x&y when children removed, but doesn't know it.

[apocalexxnow]

Hi

Here is my problem.

I am creating a container with a number of sprites in it, ordered in rows and columns. Let's say it's 21 sprites in 3 rows and 7 columns, each with the same width of 80 pixels. The container's coordinates are {x: 0, y: 0} and its width becomes 560 pixels. I can animate it to move from screen end to screen end by setting limits for x to move between (x > 0) and (x < screenWidth - containerWidth) in the ticker.

Then I destroy elements 0, 7 and 14 - that means the whole first column is now gone, only 6 columns remain. If I get the width of the container now - it has become 480 pixels, which is great. However, if I try to get the coordinates - they haven't changed - they are {x: 0, y: 0} again. Even though the container has now visibly moved 80 pixels to the right. And, if I apply the same animation, the border has also moved 80 pixels to the right, but Pixi doesn't know it. So Pixi thinks the animation is still within the same pixels set in the ticker, but actually the left limit is now 80 pixels to the right and the right limit is 80 pixels off the screen.

At the same time, if I destroy elements 6, 13 and 20, or the whole last column, the animation behaves exactly the way I want it - coordinates haven't changed, only the width has changed, so the limits of the animation remain the same.

In other words, when the container's width is changed because of elements being destroyed or removed from the left side, its coordinates get messed up. How can I deal with this?

Here's some code:

// 'this' here is for the container class

const numberOfElements = 21;
const numberOfColumns = 7;

for (let i = 0; i < numberOfElements; i++) {
            const element = new PIXI.Sprite(Texture);
            element.x = (i % numberOfColumns) * 80;
            element.y = Math.floor(i / numberOfColumns) * 80 + 100;
            this.addChild(element);
        }

this._ticker.add(() => {
            if (this.x < this._screenWidth - this.width && this._direction == 'right') this.x += this._movingSpeed;
            else if (this.x >= this._screenWidth - this.width && this._direction == 'right') this._direction = 'left';
            else if (this.x > 0 && this._direction == 'left') this.x -= this._movingSpeed;
            else if (this.x <= 0 && this._direction == 'left') this._direction = 'right';
        });

this.children[14].destroy();
this.children[7].destroy();
this.children[0].destroy();

 

[ivan.popelyshev]

"container.x" is "container.position.x" , aka "container.transform.position.x". Its the first-class citizen field, its not modified by anything except you.

What you mean is "container.getBounds().x" . My advice is to use "container.getBounds()" and get x,y,width,height from it.

[apocalexxnow]

OMG, thank you I've been fighting with this for 3 days