Phaser: tilemap with BlankDynamicLayer eats my RAM

[lc-thomas]

Version

• Phaser Version: Phaser v3.17.0-FB (WebGL | Web Audio)
• Operating system: Linux Fedora
• Browser: Firefox (not sure if specific)

Description

I've been using static layers, and tilemapTiledJSON, and it worked nicely.
Now I'm moving the map to a database, it's quite a big map so I thought I'd load it dynamically when the character moves.
I found out about dynamic layers, and am trying to use them, that's where I'm having the problem : whenever I refresh the page, the RAM isn't freed, so at some point my system freezes.

Example Test Code

  preload () {
    // load the tileset
    this.load.image('tileset_terrain', tileset_terrain)

    // character atlas (group of tilesets)
    this.load.atlas("atlas", "https://www.mikewesthad.com/phaser-3-tilemap-blog-posts/post-1/assets/atlas/atlas.png", "https://www.mikewesthad.com/phaser-3-tilemap-blog-posts/post-1/assets/atlas/atlas.json");
  }

  create () {
    this.map = this.make.tilemap({key: 'map', height: 2048, width: 2048});
    // tilesetTerrain has been extruded so we use margin and padding parameters
    // see : https://github.com/sporadic-labs/tile-extruder (docker built in assets/__TOOLS__)
    const tilesetTerrain = this.map.addTilesetImage("tileset_terrain", "tileset_terrain", 32, 32, 0, 0);

    // Parameters: layer name (or index) from Tiled, tileset, x, y
    this.layerTerrain = this.map.createBlankDynamicLayer("layerterrain", tilesetTerrain);  

    this.layerTerrain.putTileAt(0, 50,50)
    this.layerTerrain.putTileAt(0, 51,50)
    this.layerTerrain.putTileAt(0, 52,50)
    this.layerTerrain.putTileAt(0, 53,50)
    this.layerTerrain.putTileAt(0, 54,50)
  }

Additional Information

https://i.imgur.com/MuHn0ka.png

At ~50 I load the page for the first time.
At ~30 I reload the page (ctrl + F5)
At ~15 I close the browser tab.

I think that making a 2048 x 2048 tiles map is quite huge for the browser, so it takes a lot of space in RAM.
What I don't understand is that the RAM isn't freed when the page is reloaded.

Also I think I'm doing this wrong. The map shouldn't be much bigger than the camera view actually (just a little bit), I'd love to be able to create an open world, with all data being server side.
Are there better ways than what I am doing ? any link to resources would be much welcome !

__Thank you for this amazing work, I love phaser :)__

[photonstorm]

You're doing nothing wrong, the bug is with Firefox. There is absolutely _no way_ it should hold _anything_ in memory if you refresh the page and have the cache disabled in its dev tools. If you use Chrome, or Edge (although not on Linux), or Safari, you won't see this happen. It's a FF exclusive issue, and I've honestly no idea what causes it.

For an immediate solution: use Chrome.

For a longer-term solution perhaps this needs raising as a FF issue, but it could well be 'by design' too. Maybe something their dev tools does on purpose to keep instrumentation going post refresh? I honestly don't know. It doesn't _seem_ logical, but there's a reason to be found somewhere.

[photonstorm]

Just to add that FF also does something similar when using WebGL - if you refresh the page too many times it will run out of GL contexts to use and start throwing errors. Which is insane. You've _refreshed_ the page. It should start from a completely blank slate, but for some reason, it doesn't.

So, again, whatever is holding onto those gl contexts is likely the same reason this issue is happening too.

[lc-thomas]

You are right indeed, I'm now using chromium and the memory is freed when I refresh the page.
I wonder why firefox does keep those resources allocated, they aren't linked to anything anymore so that's just a memory waste.

I think this should be closed then.

I've just a little question, if you just have a few seconds; I'm trying to build a top-down openworld, the idea is to have chunks of the map, and load / unload them given the position of the character.

At start, load the purple area, that is around the character, and when the character moves east, I'd unload the green area, and load the blue area. So that resources are freed and the map can be very big.
I'm now trying by using dynamic layers for each chunk, and I convert them to static layers when they are drawn, but my FPS are getting very low.

What would you recommend as en efficient way to do this ? Maybe I shouldn't use layers at all, right ?

[photonstorm]

Closing this as the root issue was a FF one. If you still want suggestions on the dynamic map question, please come and chat with us in the Phaser Discord, or on our forum.