Increase optimization of my Tiled Map rendering

[visgotti]

Here's my current logic

split up the tileset image into an array of 64 x 64 textures (the index correlates to the tile id)

split up the map into sections max size of each section is 640 x 640 and create a container for that section. 

create a sprite for each tile in that section, and add it to the section's container

check if the section container is visible to the player based on the current screen size, if it is then set that section's container visible to true, otherwise set it to false.

I'm getting terrible performance doing it this way, if I make the screen small my fps is fine, but once I maximize the screen or make it a little larger the fps drops significantly.

 

Does anyone see the flaw in my system as to why I'd be getting terrible performance doing it this way?

 

[ivan.popelyshev]

It depends, whether CPU or GPU is the problem. You have to use "Profiles" tab in chrome dev tools. If "idle" is small, then its CPU problem. If its big, its GPU (fillrate).

You can use https://github.com/pixijs/pixi-tilemap to show a single section, it'll have better performance on CPU.

[visgotti]

That library does not support TiledMaps. 

I don't actually think that's the problem actually. I think my computer is just lacking a GPU so my FPS sucks. I'm still getting pretty shitty FPS with canvas as well though so I'm not sure. 

[ivan.popelyshev]

I thought you already have Tiled parser, the only thing you have to do is to fill the Tilemap, instead of creating many sprites.