what is the best way to add bunch of images

[garry]

Hello, So I need to add like 500 images and this is How I'm doing it:

class CreateP extends PIXI.Container {
    constructor(id, x, y, width, height)  {
        super()

        this.id = id

        this.bla = PIXI.Sprite.fromImage(`blabla.png`) //images/textures are not same
        this.bla.anchor.x = 0.5;
        this.bla.anchor.y = 0.5;
        this.bla.x = x
        this.bla.y = y
        this.bla.width = width
        this.bla.height = height

        this.addChild(this.bla)
    }
}

module.exports = CreateP 

 

this.blas = new PIXI.Container();
this.stage.addChild(this.blas);
.
.
.
this.blas.addChild(new CreateP(id, x, y, width, height))  

now it kinda effects on performance pretty a lot, well I know this is a big number but I was wondering if there are some ways to improve the performance? maybe there is a better way to add these images?
 

this doesn't seems normal to me. is this updateTransform and GC normal here? I mean I'm not changing anything about those sprites. they are already added
BTW the sprites never move or change or any thing. they just get destroyed after a while.

Could RenderTexture help here? I read the docs but honestly couldn't understand what is the purpose of it

Thanks

[ivan.popelyshev]

Put it in atlas. https://github.com/kittykatattack/learningPixi#using-a-texture-atlas

[garry]

8 minutes ago, ivan.popelyshev said:

Put it in atlas. https://github.com/kittykatattack/learningPixi#using-a-texture-atlas

what if i just had one image, even then would atlas be helpful? I'm trying to understand if atlas helps only if there are some different images or it's effective even for like 1 image.

[ivan.popelyshev]

Then it shouldn't be that slow.

[ivan.popelyshev]

Actually, how many seconds did you record that thing? 100% is all the time program consumed on CPU. If you record 5 seconds and it spent 0.1s in pixi, then its fine.