Sign in to follow this  
Cudabear

Workaround for poor multi-layered tilemap performance in WebGL

Recommended Posts

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this