Workaround for poor multi-layered tilemap performance in WebGL

[Cudabear]

Hi all,

Just wanted to share a workaround I made today while trying to increase the performance of tilemaps in my game.  My game has maps that could be 2048px X 2048px (64x64 32px X 32px tiles) or maybe even bigger down the road, and contain up to 8 layers for applying detail.

The problem I ran into was, when scrolling the camera, I was seeing huge performance drops, even on powerful computers.  Turns out, Phaser was redrawing the tilemap every frame you move the camera.  My tilemap, after being loaded, never really changes.  So I wanted to find an easy way to force Phaser to draw the entire tilemap once and then use it for a static sprite after that.  I tried using https://photonstorm.github.io/phaser-ce/Phaser.TilemapLayer.html#cacheAsBitmap, but it didn't seem to work.  Not sure if I was missing something there.

So my solution was to resize the layer before getting the texture:

 

myLayer.resize(game.world.width, game.world.height);
myLayerTexture = myLayer.generateTexture(1, PIXI.scaleModes.DEFAULT, game.renderer);
myLayer.visible = false;

game.add.sprite(0, 0, myLayerTexture);

this way, instead of the tilemap being added as a dynamic thing that gets redrawn constantly, it functions as a static image.  But because each layer is still treated as a separate image, I preserve rendering order.  In the background, I keep the actual layers hidden to preserve collision data.

Unfortunately, if the tilemap were to change ever beyond initial creation, the texture would need to be updated, which would be expensive.  But since I'm not really planning on doing that, it seemed like a reasonable solution to me.

Hope this helps someone else who has this problem.