Jump to content

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


apocalexxnow
 Share

Recommended Posts

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();

 

Link to comment
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...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...