Bad performances with tilemap and multi-layers (Tiled)

[Bastountan]

Hi everyone!

 

First things first, a disclaimer: I'm French, I read a lot in english but I rarely have the opportunity to write or speak in English, so forgive me for that    .

 

I'm a beginner in the world of gamedev and Phaser in particular. I've already tried EaselJS (CreateJS) a couple years ago for a little game prototype I made using hand-made tilemap (based on a simple two dimentional array).

I wanted to try something more robust this time, I searched across the Web for a good gamedev framework and stumble upon Phaser.

It seemed to me the best tool to go, so here I am!

 

It's my first time using Tiled for creating my tilemaps. I've use the excellent roguelike tileset from KenneyNL (kudos to him! ).

I've set up a simple sample map (to try a few Tiled features), followed several tilemaps examples provided on phaser's website. You can check the layers I'm using :

Note that the collision layer contains only a tile (a red/brown dot) that I'm currently using as a visual marker (there's no collision implemented yet).

My tileset is 16x16. The map is 200x200 tiles. I'm exporting it as JSON, layers data as CSV.

 

I'm also using states (which is really a cool feature that I was missing with EaselJS).

I've set up a jsfiddle hosting a stripped version of my source code with a few comments to explain the logic. There's also a fiddle with the JSON file of the tilemap if it can help.

 

I'm using a deadzone for my camera, and added a visual representation of this deadzone.

Everything is correctly loading, the map and all the layers are displayed accordingly, with the visual deadzone and my character (I'm on Ubuntu 14.04 x64 with a GTX 660 and using the latest Google Chrome version).

Everything looks fine, I can move my character within the camera's deadzone while the camera is not moving (which is what I was looking for).

I haven't set up a FPS debug but I feel that the framerate is stable and should be around 60fps. It all feel smooth, not shattered at all. So far so good.

 

But the issue is coming when the deadzone is reached and that the camera begin moving to follow the player (e.g. when I'm moving far right), as follows :

 

At this point, I feel a huge framerate drop! Any movement feels shattered, jerky. But as soon as the character gets back in the deadzone and the camera is moving no more, everything goes back normal.

 

I've tried with another map of 100x100 and 50x500 tiles, with just one layer and a tileset of 4 sprites, and the results were the same...

 

I think I'm missing something, or I must have done something wrong. I cannot believe that the problem would come from Phaser not correctly supporting tilemaps!

 

My goal is to build a very simple stripped-down version of a Harvest Moon-like prototype, just for fun, for my pleasure. So I really need to work with tilemaps. I'm sad that a cannot acheive this with Phaser .

 

Sam Vieten (SamTheMighty on these forums) gave me some advice on Twitter, about using a plugin (englercj/phaser-tiled) to optimize tilemaps implementation of Phaser.

Is it really necessary to use this plugin? It's a bit of a shame if Phaser cannot handle tilemaps alone  ...

 

Anyway, thanks for you help!

[Kobaltic]

I am not sure if it is your problem but you want to use velocity with movement when using physics. I use maps over 1,000 X 1,000 with 4 layers and about 500 sprites on the sheet. I have a ton of collisions and I don't have a single issue, so I doubt it is Phaser's tilemaps.

[Skeptron]

Potential issues I see with your JSFiddle : 

• Why use P2? It's much more expensive than Arcade, and looking at the size of your assets (like the character), it doesn't look like you'll need that accurate hitboxes
• You have a lot of layers : I would try to reduce that amount. I'm pretty sure some of these layers could be merged together
• Game scaling might cause some perf issues : try to remove it and look at FPS impact
• Scaling the layers might not be that performant as well : did you try increasing the tiles size and remove the code scaling?

Also, try to force Canvas and see if it performs better. And try on a windows machine. I've had really bad experience on Ubuntu regarding performances (sadly ).

 

You can also install the Phaser inspector plugin and see if you don't have objects leaking or some kind of issues : http://phaser.io/news/2015/09/phaser-inspector-plugin

 

Do not hesitate to use the JS inspectors as well to see memory / CPU behavior.

 

EDIT : also, you can try to downgrade to Phaser 2.3, version 2.4 has some performance issues.

[Bastountan]

Thanks guys for your comments! I'll try what you suggests Skeptron.

 

About the physics system, I've never used one before this project so I just picked the one that seemed more advanced without having real objectives ^^'...

Sure some layers can be combined. As I said, I was just trying some Tiled features.

And as you obviously spotted, scaling all tiles seems really not good at all for performances. I'll try all that tonight or tomorrow and will keep you posted!

[Skeptron]

Arcade is the most basic one, it only handles square / rect hitboxes, with no rotation (you can rotate the images though). It's really fast.

P2 enables polygons and more complicated shapes, and rotations. Thus it's slower. 

 

So from what your game looks like, I would strongly advise Arcade.

[nobody]

Some tipps: 

- Use canvas (WebGL is very slow on FF)

- Try removing all debug calls, especially text

- make sure that your update() loop does not do a lot of computation

- press F12 in chrome, click profiles, and record a bit while moving, and check if something "out of the ordinary" appears

[BrenX]

Bonjour Bastontan,

 

Est-ce que vous avez résolu votre problème? Je souffre du même malaise avec une carte bien plus petite, en plus. Je suis passé de Phaser 2.2.2 à 2.4.4 et tout est presque figé lorsque le point de vue bouge dans ma carte.

 

 

Hello Bastontan,

 

Did you ever resolve your issue? I'm suffering from the same probem, with a much smaller map on top of it. I upgraded from Phaser 2.2.2 to 2.4.4 and everything is nearly frozen now when the point of view scrolls around the map.