Search the Community

Showing results for tags 'pixi.container'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 1 result

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