How are huge tilemaps being painted?

[BobDylan]

I'm trying to understand how Phaser tilemaps work (with a map size much larger than the screen).

 

When the camera moves, are the tiles that were off-screen painted instantly or were they already painted on a big bitmap (as large as the whole map), which is simply moved when the camera moves?

 

If it's the second option, wouldn't this become very slow with a map of 10000x10000 tiles ?

[MorpheusZ]

I remember seeing huge FPS drops (game would run at 5fps or so on a desktop) when creating a tilemap with a size smaller than yours (1000x1000 or so), but perhaps we both screwed up something in our setup.

10000^2 would require hundreds of MBs to keep in memory anyway, so rendering them efficiently is not your only problem, I'd say. You'll need to manually manage loading the relevant chunks of your map as the player moves around it or something.

[alex_h]

Regarding the question of rendering off-screen objects, it actually only takes a few very minor tweaks to apply view frustum culling to Pixi.js, which Phaser uses for it's rendering. This basically does a bounds check against the stage rect on each object to determine whether or not to render it. I tested with a side scrolling game and got quite a big reduction in rendering time using it. I've submitted a pull request to Pixi on github for this which details the changes required, so if you wanted to you could copy over the relevant lines. I imagine you should see a significant improvement on a level with a large map. Here's the link to the modified code:

 

https://github.com/GoodBoyDigital/pixi.js/pull/956/files

[lewster32]

TileMaps aren't rendered beyond the bounds of the screen - each layer is generated on the fly. The functions within the TileMap work out which tiles are visible on screen, and render them flat to each layer. This makes the rendering performance much more predictable regardless of the size of the TileMap. With that said, there are other things happening such as collision detection and so on which will all degrade the performance significantly if a very large TileMap is used.

[markusT]

Does Phaser take the camera position in account and only checks the tiles near the camera, or does it check all the tiles and its position accordingly to the camera? Checking each possible tile if it's in camera view could be a bottleneck, instead of checking just the few tiles around the camera. Place some of an objectPool if necessarily remove those which are out of bounds.

I'm curious about how tiles really work in phaser/pixi for a while now. Unfortunately I never found the time to investigate the Tiles code base.  

[lewster32]

It checks tile tiles adjacent to any tiles of interest for collision. It has to do this regardless of the camera position otherwise things would not collide off-camera. It leaves it up to you to manage this if you wish, as it's implementation specific - i.e. you could disable the physics on all objects not visible on camera so they pause in place which will speed things up for larger worlds.

 

I'd recommend taking a look at the code, there's not a huge amount and it's all well laid out and easy to read.