PIXI 精灵在创建新精灵后不显示

Question

所以我是 PIXI 的新手，有一个如下所示的 class 来创建一个矩形并将其向下移动到屏幕。我的意图是，当在游戏循环中调用 game.moveDown() 时，当矩形到达底部 (this.shape.y == ROW * WIDTH) 时，实例应该从顶部创建一个新矩形并再次向下移动，同时将旧矩形保留在屏幕上。

但我遇到的问题是，随着新矩形的创建（或旧矩形到达底部），旧矩形消失了。我怎样才能将旧矩形保留在屏幕上？我以为我已经将旧矩形添加到容器（已添加到舞台）。我怀疑这与 PIXI 渲染对象的方式有关。如有任何帮助，我们将不胜感激！

And here's the fiddle link

class Game {
constructor() {
    this.shape = new PIXI.Graphics();
    this.holder = new PIXI.Container();
    this.buildCurrShape();
    app.stage.addChild(this.holder);
}

buildCurrShape() {
    this.shape.beginFill(0xFFFFFF);
    this.shape.drawRect(0, 0, WIDTH, WIDTH);
    this.shape.endFill();
    this.shape.x = WIDTH;
    this.shape.y = WIDTH;
    this.holder.addChild(this.shape);
}

moveDown() {
    this.shape.y += WIDTH;
    if (this.shape.y == ROW * WIDTH) {
        this.shape = new PIXI.Graphics();
        this.buildCurrShape();
    }
}

Answer 1

But the problem I am having is that as the new rectangle is created (or the old rectangle hits the bottom), the old rectangle is gone. How could I keep the old rectangles on the screen?

那个矩形并没有消失 - 只是绘制在渲染器视图之外。

要看到它，请放大视图:

let app = new PIXI.Application({width: WIDTH * COL, height: WIDTH * ROW, antialias: true});

//replace with:

let app = new PIXI.Application({width: WIDTH * COL, height: WIDTH * (ROW+1), antialias: true});

澄清一下：

    moveDown() {
        this.shape.y += WIDTH;
        if (this.shape.y == WIDTH * ROW) {
            this.shape = new PIXI.Graphics();

this.shape = new PIXI.Graphics(); <---- 在这里你用新的 Graphics 对象替换“this.shape”变量 - 但以前的 Graphics 对象（“旧矩形”）仍然存在于内存中 - 因为是仍在“this.holder”容器中。您可以观察到 this.holder 容器内的对象数量正在增长 - 请参阅控制台：console.log(this.holder.children.length)

此外，请避免像这样在每一帧打印大对象到控制台：

console.log(this.holder.children)

它冻结了我的浏览器:)

PIXI 精灵在创建新精灵后不显示

PIXI sprite not showing after new one created

javascript

pixi.js