Draw a lot of tiles to make one object

[verybigelephants]

Hello!

i've been trying to build my level scene from a lot of small rectangular tiles (it's important for the game to be this way from an aesthetic point of view). however, when i use this classic object approach

 

Quote

    var tile = new PIXI.Sprite(use_texture);
        tile.x = x * tile_size;
        tile.y = y * tile_size;
    gfx_container.addChild(test);

and add a lot of them (my level has a lot of them) the cpu/gpu/i don't know what goes crazy this is probably because they are all sprite objects

so i wanted to draw these tiles one by one, once at the start and then handle the big thing as one object. how would i go about doing that?

i have found a method beginTextureFill, but they told me here https://github.com/pixijs/pixi.js/issues/5332 it's only in dev build yet and i don't believe there wasn't a way how to draw a lot of graphics into one container and consider them a single object before

could somebody help me out?

[Exca]

You could draw the container into a single rendertexture and then use that as a sprite.

var rt = new PIXI.RenderTexture( new PIXI.BaseRenderTexture(width, height), new Rectangle(0,0, width,height));
renderer.render(gfx_container, rt);

var bgSprite = new Sprite(rt);
maincontainer.addChild(bgSprite);

You could also use cacheAsBitmap to that container to make the same effect.

If you have same texture for each sprite, then you could use TilingSprite.

 

How many tiles in total and do you have different textures  for those?

[ivan.popelyshev]

you can use pixi-tilemap for v4. 

Here's the lib: https://github.com/pixijs/pixi-tilemap

Here's tutorial: https://github.com/Alan01252/pixi-tilemap-tutorial