Large Tilemaps cut off Horizontally

[Silver-Streak]

Describe the bug

When a tilemap is past a certain size, the map image will cut off horizontally both in the IDE and in previews. The map dimensions still render correctly in the IDE. This was reported by Discord member (78), and I was able to reproduce it.

To Reproduce

Steps to reproduce the behavior:

1. Create a tilemap in Tiled (or in LDTK and export to tiled)
2. Ensure the map has at least one axis around ~8000 pixels large and another axis around ~5000 pixels large.
3. Export as JSON
4. Import as Tilemap object, add to scene.
5. The map will graphically be cut off (horizontally). This will be horizontal regardless of whether the map is larger vertically or horizontally. I'm assuming this is likely just due to how the json data orders data, but it still feels odd.

Attached is a project with both a horizontal and vertical map experiencing this issue.
TileMapCutoff.zip

Some examples:
Veritcal map in Tiled:

Vertical map in Editor (and preview):

Horizontal Map in Tiled:

Horizontal map in Editor (and preview):

Workaround:
You can split any map into ~4000x4000 smaller maps and create multiple tilemap objects, and it'll work fine. Based on how tilemaps work, this really shouldn't be required (Or should, I guess, be automated by the engine to split a larger map into smaller consumable maps).

Other details

• Windows 10 Pro 64 bit
• Tested with both 5.0.135 and 136

[willianholtz]

normal for me..

Linux: Arch

Unfortunately I couldn't open your project, it says it's not a valid GD5 file.

I'd like to be able to test on Linux too, so I did my test and it works.

[Silver-Streak]

Unfortunately I couldn't open your project, it says it's not a valid GD5 file.

I'd like to be able to test on Linux too, so I did my test and it works.

Hmmm.. I've now done a quick test on a linux mint boot disc with the loading the project, downloaded from this github issue, and it opens fine. Still shows the same problem.
Were you opening game.json or one of the tilemap jsons?

What version of GD5?

[willianholtz]

Unfortunately I couldn't open your project, it says it's not a valid GD5 file.
I'd like to be able to test on Linux too, so I did my test and it works.

Hmmm.. I've now done a quick test on a linux mint boot disc with the loading the project, downloaded from this github issue, and it opens fine. Still shows the same problem. Were you opening game.json or one of the tilemap jsons?

What version of GD5?

I managed to open it, for some reason I had more than 10 gdevelop open and maybe that's why I couldn't load. Now with the tests in hand, yes, the same problem happens with your project.

[Bouh]

HUmm ~8000 pixels isn't within reason.
2048px is the maximum correctly supported by PixiJS (the rendering engine).
I'm not sure this issue is a real concern.
Split the sprite is the best workaround for now, and it will help to optimize your game.

[Silver-Streak]

HUmm ~8000 pixels isn't within reason. 2048px is the maximum correctly supported by PixiJS (the rendering engine). I'm not sure this issue is a real concern. Split the sprite is the best workaround for now, and it will help to optimize your game.

Unless something has changed, tilemap objects aren't rendering a 2048px image (or shouldn't be). It is rendering dozens of smaller tiles. It was also implemented partially to help avoid the image limit.

Also, this appears to be horizontal only, I can go thousands of pixels wide without issue, so I don't think it'd be related to the PixiJS/Electron image limit.

Edit: Yeah, specifically PixiTilemap was updated in 2019 to avoid any PixiJS rendering limits: pixijs/tilemap#70, and since this was implemented in late 2020 into GDevelop, i'd think this wouldn't be related to the render limit.

[Silver-Streak]

I've done more testing, it seems like this occurs if the rendered map size exceeds about 4million pixels total (even though the rendered map should actually be made up of smaller units)

Looking at the issue I linked above, I'm wondering if somehow the maximum textures is set to 1 for this implementation, and the buffer is set too large?

@blurymind Does this ring any bells?

[D8H]

Actually the limit seems to be 2^14 = 16,384 tiles. I tried with 64x64 tiles and the limit is the same as for 16x16 tiles.

The good news is that big tiles can be used without reaching the limit too fast.

This is very probably a limitation from PIXI or its tile map extension.

[Silver-Streak]

This is very probably a limitation from PIXI or its tile map extension.

This doesn't seem to match up with what I'm finding. There are numerous threads from Pixi V5 with 500k tiles or more using pixi-tilemap:
https://www.html5gamedevs.com/topic/42741-fast-pixi-tilemap-renderer-trying-to-fix/

The tiles were limited to 16384 when it was in 16 bit indices. But looking at the implementation of 32 bit in 2020 should have resolved this, and looking at the extension it looks like we have 32 bit mode enabled?

[Silver-Streak]

From what I can see, it looks like the compositing function may not be working correctly?

https://github.com/pixijs/tilemap/blob/master/src/CompositeTilemap.ts
Line 304 on

            // If no tileset contains the base-texture, attempt to add it.
            if (!tilemap)
            {
                // Probe the tilemaps to find one below capacity. If so, add the texture into that tilemap.
                for (let i = children.length - 1; i >= 0; i--)
                {
                    const child = children[i] as Tilemap;

                    if (child.getTileset().length < this.texturesPerTilemap)
                    {
                        tilemap = child;
                        child.getTileset().push(tileTexture.baseTexture);
                        break;
                    }
                }

                // Otherwise, create a new tilemap initialized with that tile texture.
                if (!tilemap)
                {
                    tilemap = new Tilemap(tileTexture.baseTexture);
                    tilemap.compositeParent = true;
                    tilemap.offsetX = settings.TEXTILE_DIMEN;
                    tilemap.offsetY = settings.TEXTILE_DIMEN;

                    this.addChild(tilemap);
                }
            }