Jump to content

FPS drop with camera movement & tilemaps


Recommended Posts

So it looks like there's an performance issue when the camera moves along a tilemap.

FPS is fine untill the camera starts to move. It even happens in phaser examples like this one: http://phaser.io/examples/v2/tilemaps/sci-fly

On my high end PC i dont notice it, but when i tried to run it on my laptop i came across this problem.

It happens in my game aswell. Code: http://pastebin.com/UHvXu6nz

Has anyone an idea why this happens, and how to fix it?



Link to comment
Share on other sites


I tried this and it really doesn't change much when there's 2 or more layers. After digging around it seems that moving camera along tiles has been a perfomance issue for a long time.

My tiles are 4*4, i have 3 layers (object, collision and background) on a 96*36 map size. And even with that small a size, it still occurs except if i strip everything down.

Link to comment
Share on other sites

Has anyone else encountered this before?

I've tried some approaches, like stripping everything down to one layer and using tilesprites as background/foreground layers. It helps, but not close to what I want. I also tried phaser-tiled, it helps, but it doesn't support arcade physics yet. There probably are some rendering techniques I'm overlooking, but I'm not that experienced with Pixi. Any input is appreciated! Thanks!

Link to comment
Share on other sites


Afaik canvas has to render for every layer, which means that it has to render twice as much as with one. And then ofcourse its better to use as few layers as possible.

I think its abit missleading to not adress this with the tilemap examples.

The best solution is probably to not use tilemaps at all, and rather use another third party program that stores sprites properties. Like overlap2d, or mighteditor.

Link to comment
Share on other sites

In the other thread the issue was narrowed down to Tilemap plugin tanking performance in post-render. Seems like it needs to grind though all of your tiles to determine which ones should be rendered, and it does it in not so stellar fashion.

Try using a spritebatch directly in place of the tilemap. In most other engines, just rendering your entire map in a sprite batch without bothering with any culling winds up just as fast (often much faster) than using sophisticated algorithms.

Link to comment
Share on other sites


Thanks for your suggestion. I tried using spritebatch but they didn't render with the camera. Instead it resultet with black parts where it should've rendered. (I might have done this wrong)

Anyways, I tried something else which worked. I added the tilelayers inside a spritebatch that isn't put to stage. Then i export an image from Tiles and then handling them as a sprite overlay. It might be a strange way to do it, but it improves the performance significantly,

Link to comment
Share on other sites


Yes. There isn't much difference between forcing to webgl or canvas when using tilemaps. Canvas might perform abit better on phones.

This is how i fixed it:

function tilemaps() {
    map = game.add.tilemap('level_1');
    spriteBatch = new Phaser.SpriteBatch(game.world);
    blockedLayer = map.createLayer('blockedLayer');

    background = game.add.tileSprite(0, 0, 768, 288, 'background');
    foreground = game.add.sprite(0, 0, 'foreground');
    map.setCollisionBetween(0, 12, true, 'blockedLayer');


Link to comment
Share on other sites

I have developed a TiledChunk system which handles my Tiled map (12880x3072) but it should be able to handle FPS-wise a lot bigger maps. My map atm uses about 15MB of cached data. There is 0 lagging and i get 40FPS at 1920x1080. I will be releasing it on Github this month, but if you need it ASAP (work project or something) you can check out the source at https://github.com/SimonTamas/TiledChunks . Keep in mind that its a work in progress.

Link to comment
Share on other sites

  • 1 year later...

I know this thread is a year old, but since I came here from Google, I want to add that it actually seemed to help me a lot to just set the collisionLayer to visible = false and position the graphics as large sprites instead of individual tiles.

        this.collisionLayer = this.map.createLayer('collision layer')
        this.collisionLayer.visible = false
        this.map.setCollision([1], true, this.collisionLayer)


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...