Hi there, Im having some issues with performance when i render thousands of sprites. Currently having issues with loading around 20k sprites, but eventually plan on having more (maybe even up to 60k) around the map. I did some research and found this is a somewhat common issue but cannot get a clear and concise answer. I ran some chrome profiles on my game to see whats holding me back: here are my results. To be honest, I don't really understand what that information means other than 20k sprites is too much. (I have a fairly decent computer and its slightly choppy at 20k trees, at say 60k its very choppy) Also, when I say choppy, I mean like it looks choppy, my movement is still fine (to make the point that its not like the game loop thats lagging).
Essentially I have 20k trees being placed around a very large map that's being rendered with a tileSprite. However, it's not the map size that is holding me back since the performance I get is very dependent on the number of tree sprites. The tree's have no physics enabled on them and are just rendered and placed in a group then never touched again. Here is a snippet from my create function and how i render the trees.
for(var i = 0; i<20000; i++){
treeX = Math.round(Math.random()*(mapSize-1));
treeY = Math.round(Math.random()*(mapSize-1));
temp = position(treeX, treeY);
createTree = game.add.sprite(temp[0],temp[1], 'tree2');
treeGroup.add(createTree);
}
The position function I called in the loop just gets the pixel location of the tree's based on a tile, as shown below:
var position = function(col, row){
column = (33*col+1);
rowFin = (33*row+1);
return [column, rowFin];
};
Any ideas as to how i can beef up my performance? Any way I could not render the tree's until they are in view? (Kill then revive when seen?) Any tips are greatly appreciated!
Side note (if its useful), right now all I have is the tileSprite background, 20k trees, and movable player sprite.
Edit: Would creating a chunk system be a good idea? If so anyone have any idea where to start with the best way to make one?