Speeding up performance of many graphics with polygons

[Ianmh]

I'm building a tile based game, and I'm generating a lot of tiles with drawShape and polygon data and then adding them all to a container. Every tile is generated. Right now if I go larger than about 150 x 150 the app crashes with a webGL failure. Do I need to convert these to sprites or something else? Any suggestions? Also, even though there are many tiles there are a much smaller amount of variations, is there a way to copy and reuse already generated tiles? I might want to change the colour so they can't be of the same instance.

[lloydevans]

cacheAsBitmap may be of use to you if your generated tiles do not need to change much.

http://pixijs.download/dev/docs/PIXI.Graphics.html#cacheAsBitmap

Also generateTexture.

http://pixijs.download/dev/docs/PIXI.SystemRenderer.html#generateTexture

It sounds like you are running into problems with Pixi needing to render a lot of graphics objects on the fly. Baking things into textures where possible may help with that.

[OSUblake]

Generate a white texture of the polygon...

http://pixijs.download/dev/docs/PIXI.Graphics.html#generateCanvasTexture

Then you can color a sprite with that texture using tint.

[ivan.popelyshev]

either generate textures (better in one atlas), either use one Graphics object per many tiles. Call it a chunk. Every time something updates in chunk, you have to refill it. The downside is that triangulation will be called each update. If chunk is too small => too many chunks lead too many drawcalls. If chunk is too big => update cost is high.