CODEWITHSUNDEEP
javascriptpixi.js
codeedoc
codeedoc

Reputation: 494

PIXI sprite not showing after new one created

So I am new to PIXI and have a class as below to create a rectangle and move it down the screen. My intention is that when game.moveDown() is called in the game loop, as the rectangle hits the bottom (this.shape.y == ROW * WIDTH), the instance should create a NEW rectangle from the top and move down again, while keeping the OLD rectangle on the screen.

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? I thought I have added the old rectangle to the container (which has been added to stage). I suspect it has to do with the way PIXI renders objects. Any help would be appreciated!

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

Upvotes: 0

Views: 800

Answers (1)

domis86
domis86

Reputation: 1357

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?

That rectangle is not gone - is just drawn outside of renderers view.

To see it make the view bigger :

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

Just for clarification:

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

this.shape = new PIXI.Graphics(); <---- here you are replacing "this.shape" variable with new Graphics object - but previous Graphics object ("old rectangle") is still living in memory - because is still in "this.holder" container. You can observe that number of objects inside this.holder container is growing - see in console: console.log(this.holder.children.length)

Also, please avoid printing big objects to console on every frame like this:

console.log(this.holder.children)

it was freezing my browser :)

Upvotes: 1

Related Questions