FPS drop with camera movement & tilemaps

[veggis]

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?

 

 

[Jazz]

Try using phaser 2.3.0 or before

 

[veggis]

@Jazz

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.

[veggis]

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!

[nobody]

I also have 3 layers, 64x64 tileset size. Sometimes it laggs and its unplayable, then it works alright again (high end pc, ubuntu). 

That demo you references is really unbearable slow.

[veggis]

@nobody

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.

[rcoaxil]

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.

[veggis]

@rcoaxil

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,

[jilonor]

have you tried switching the initialization to Phaser.CANVAS?

I also added game.camera.roundPx = false;

[veggis]

@jilonor

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');
    spriteBatch.add(blockedLayer);

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

 

[stamas47]

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.

[Garrin]

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.collisionLayer.resizeWorld()
        this.map.setCollision([1], true, this.collisionLayer)