adding Sprites through iteration

[grosjardin]

I have an issue adding Sprites inside my Pixi app when the amount becomes to big. It works well with couple hundreds, but when it is 4000+, only a portion of the Sprite Textures will be drawn on the app.

Is looping through an array of objects to create Sprites and add them one by one a bad idea? Should I try to create all of them in firsthand and then add them to my container all at once by passing them as a an array of argument to addChild() ? What would be the best practice. 

 

Here is the code I am using. Array of 4000+ objects would be elements.

               this.container = new PIXI.ParticleContainer();
                this.viewport.addChild(this.container);
             
                    this.elements.forEach((f) => {
                        const sprite = new PIXI.Sprite(PIXI.Texture.WHITE);
                        tile.x = f.position.x;
                        tile.y = f.position.y;
                        tile.width = tile.height = this.tileSize;
                        tile.tint = 0xC1DBE3;
                        this.container.addChild(sprite);
                    });
                

[ivan.popelyshev]

addChild() does not have any tax, its just adding them to array. Object creation can be slow if devTools are opened at that moment.

The best practice is to not use sprites for tiles. Consider dividing your map to separate parts and use Graphics beginTextureFill() or pixi-tilemap for each. For more details please search "pixi-tilemap" in this subforum. I explained it so many times that it hurts that no one made it into an article. Low-level / high-level algorithms and all that.

Edited August 31, 2020 by ivan.popelyshev

[ivan.popelyshev]

here's one of such topics: https://github.com/pixijs/pixi-tilemap/issues/75#issuecomment-589615977