memory was exhausted

[KenChuang]

HI all, 

Im trying draw a lot of sprite but Google chrome tried to show this page when the memory was exhausted. I want to use on the Wafer.

var circle = new PIXI.Graphics();

circle.beginFill(0xff0000);

circle.drawCircle(3, 3, 1);

var texture = circle.generateCanvasTexture();

for (var i = 0; i < 4000000; i++) {

  var sprite = new PIXI.Sprite(texture);

  sprite.x = Math.random() * 900;

  sprite.y = Math.random() * 400;

  app.stage.addChild(sprite);

}

Is there any way to solve this problem?
thanks

 

[ivan.popelyshev]

Dont make more than 100k sprites, 4kk is too much.

If they're static, you can create renderTexture, then after you spawn every 4k of them, draw them to renderTexture, then change their position, draw them again, and then you'll have texture with 4kk circles on it

[KenChuang]

On 2017/6/30 at 8:47 PM, ivan.popelyshev said:

Dont make more than 100k sprites, 4kk is too much.

If they're static, you can create renderTexture, then after you spawn every 4k of them, draw them to renderTexture, then change their position, draw them again, and then you'll have texture with 4kk circles on it

HI,
This is what I want to draw things, but this is inside each piece is not the same, each of which has 8k information, according to this real information to draw a bit.

How can I do to reduce the use of memory, so that all The information is drawn out?
 

let defect = new PIXI.Graphics();    
let _strlength = this.str.length;
defect.beginFill(0x0000FF);           
defect.drawRect(0, 0, 1, 1);
let def_texture = defect.generateCanvasTexture();
for (let o = 0; o < 1127; o++) {  //1127chip
   this.chipPostion(this.chip_xy[o].Chipx, this.chip_xy[o].Chipy);   
      for (let j = Number(this._height) - 1; j >= 0; j--) {  
        let y = _h * j;
        for (let i = 0; i < _strlength; i++) {     
          let x = _w * i;
          if (this.arr[o][Number(this._height) - 1 - j][i] === '1') {
            this.sprite = new PIXI.Sprite(def_texture);
            this.sprite.x = init_x + x + this.chipx * (_strlength * _w);
            this.sprite.y = init_y + y + this.chipy * (Number(this._height) * _h);
            this.sprite.width = _w;
            this.sprite.height = _h;
            container.addChild(this.sprite);
          }
        }
     }
}

 

 

[JeremyG]

Is there a lot of change on each frame ?
If not , may be you shoud generate a canvas per square then  draw and update it when need
(May be you can generate a full canvas too ?)

[KenChuang]

1 hour ago, JeremyG said:

Is there a lot of change on each frame ?
If not , may be you shoud generate a canvas per square then  draw and update it when need
(May be you can generate a full canvas too ?)

No, refers to rendering once.

I think it does not work because addChild (this.sprite) will take up memory, if each can generate a canvas per square will cause such a problem.

[ivan.popelyshev]

You are using only one texture here, so your problem is with amount of sprites. For that case, I think its better to use simple canvas2d api than pixi renderer.

[JeremyG]

Yes, build one big canvas and draw in it, then use it if you want with Pixi, this will work perfectly

[KenChuang]

HI,all

I solved the problem.
thanks