Memory leak

[Snowfrogdev]

Main.ts

let app = new PIXI.Application({
  width: 1200,
  height: 600,
  antialias: true,
  transparent: false,
  resolution: 1,
  backgroundColor: colorNumber('gray'),
});
document.body.appendChild(app.view);

const gridBuilder = new GridBuilder(app);

const dataProvider = new FakeDataProvider();
dataProvider.subscribe((data) => {
  app.stage.removeChildren();
  gridBuilder.build(data.grid);
});

Grid.ts

export class Grid extends PIXI.Container {}

const GRID_SQUARE_SIZE = 30;

export class GridBuilder {
  constructor(private app: PIXI.Application) {}

  build(gridData: GridSquareData[][]): Grid {
    const grid = new Grid();
    this.app.stage.addChild(grid);

    const sprites: PIXI.Sprite[][] = [];
    for (let j = 0; j < gridData.length; j++) {
      sprites[j] = [];
      for (let i = 0; i < gridData[j].length; i++) {
        const color = gridData[j][i].color;
        const texture = this.makeRectangleTexture(colorNumber(color), GRID_SQUARE_SIZE, GRID_SQUARE_SIZE);

        sprites[j][i] = PIXI.Sprite.from(texture);

        sprites[j][i].position.x = GRID_SQUARE_SIZE * i;
        sprites[j][i].position.y = GRID_SQUARE_SIZE * j;
        grid.addChild(sprites[j][i]);
      }
    }

    grid.pivot.x = (0.5 * grid.width) / grid.scale.x;
    grid.pivot.y = (0.5 * grid.height) / grid.scale.y;
    grid.x = this.app.screen.width / 2;
    grid.y = this.app.screen.height / 2;

    return grid;
  }

  private makeRectangleTexture(fillColor: number, width: number, length: number) {
    const graphic = new PIXI.Graphics();
    graphic.lineStyle(2, colorNumber('black'), 0.1);
    graphic.beginFill(fillColor);
    graphic.drawRect(0, 0, width, length);
    graphic.endFill();

    return this.app.renderer.generateTexture(graphic, PIXI.SCALE_MODES.NEAREST, 1);
  }
}

I have a memory leak. I was under the impression that since I was doing `app.stage.removeChildren()` before each update that that was enough to release memory for the previous representation of the grid but it looks like it isn't. Does anyone have any idea of what could be the cause of the memory leak?

[ivan.popelyshev]

Its not enough. Generated textures have to be destroyed manually.

Also I hope you know that this particular example - you can just use one texture: black & white, and tint will make white something else.

[Snowfrogdev]

14 hours ago, ivan.popelyshev said:

Its not enough. Generated textures have to be destroyed manually.

Ok, thanks. I suspected that would be the case. Will destroying the sprites also destroy the textures or do I really have to keep a reference to the textures and destroy them separately?

 

14 hours ago, ivan.popelyshev said:

Also I hope you know that this particular example - you can just use one texture: black & white, and tint will make white something else.

Oh, that is a great idea. I will give that a try. So just one white texture and then just apply a tint of whatever color I want the sprite to be. Awesome.

[ivan.popelyshev]

12 minutes ago, Snowfrogdev said:

Ok, thanks. I suspected that would be the case. Will destroying the sprites also destroy the textures or do I really have to keep a reference to the textures and destroy them separately?

I guess its destroy({texture:true}) , please follow the docs and sources.