Texture cache overflow: 16 texture units available.

[Growler]

Using MelonJS 5.1 (I cannot upgrade at this point), I'm creating a fairly large adventure game. My TMX map loaded fine until I added water tile layer:

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

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

At which point I started getting error: Texture cache overflow: 16 texture units available.

Error name is me.video.Error

Digging into the code, I see there is a max size for the Texture Cache:

        validate : function () {
            if (this.length >= this.max_size) {
                // TODO: Merge textures instead of throwing an exception
                throw new me.video.Error(
                    "Texture cache overflow: " + this.max_size +
                    " texture units available."
                );
            }
        },

How can I fix this?

Btw this seems to have been fixed in 2015: https://github.com/melonjs/melonJS/issues/595

@obiot @Parasyte

[Growler]

@obiot Any thoughts here?

[obiot]

the issue is that WebGL has a limited amount of texture, and as of today the limit is 16 for ~70% of devices :

https://webglstats.com/webgl/parameter/MAX_TEXTURE_IMAGE_UNITS

in my opinion the only way to fix that is either to pack/merge your tilesets directly, or to use TexturePacker (that was the fix back in 2015) when possible (https://github.com/melonjs/melonJS/wiki/How-to-use-Texture-Atlas-with-TexturePacker)

 

 

[Growler]

@obiot I am using texture packer.

[obiot]

so how many png or jpg are you loading totally ? 

how does your asset list looks like ?

[Growler]

@obiot This bug is happening again, but only on Mandarin version, even though I'm loading I think fewer overall assets than the working Spanish version.

Question: what are texture units (i.e., what does "16 texture units" mean?) and how do I compare it to overall loaded texture size?

If I print out game.map_texture, how do I compare it to see if it's below 16 units?

        game.map_texture = new me.video.renderer.Texture(
            me.loader.getJSON(`${country}_map_items`),
            me.loader.getImage(`${country}_map_items`)
        );

Mandarin Version: Printing out length for my three texture atlases: 

console.log('Game Texture: ', Object.keys(game.texture.atlas).length, game.texture);

> length of game.texture.atlas is 1236

console.log('Game Map Texture: ', Object.keys(game.map_texture.atlas).length, game.map_texture);

> length of game.map_texture.atlas is 354

console.log('Game Player Texture: ', Object.keys(game.player_texture.atlas).length, game.player_texture);

> length of game.player_texture.atlas is 107

Working Spanish Version: Printing out length for my three texture atlases: 

> length of game.texture.atlas is 1215

> length of game.map_texture.atlas is 358

> length of game.player_texture.atlas is 107

---

Mind checking the game out?

Spanish: https://spywatchlex.com/spanish/login.html

Mandarin: https://spywatchlex.com/mandarin/login.html

Use promo code "LEEROY" for free full game access. You're able to see the asset list loaded.

Images of my packed assets on disk:

Spanish: 

- https://imgur.com/gWqzXJs - map items

- https://imgur.com/m7Ol433 - texture

Mandarin:

- https://imgur.com/lR0vSeB - map items

- https://imgur.com/j10okXE - texture