Make TileEngine compatible with layer chunks

[snowfrogdev]

It looks like kontra's TileEngine is not compatible with layer chunks, which Tiled Map Editor uses as is evidenced by this output:

"layers":[
        {
         "chunks":[
                {
                 "data":[18, 18, 18, 18, 18, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 19, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 18, 19, 19, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 18, 18, 19, 19, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 18, 18, 18, 19, 19, 19, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 19, 19, 19, 18, 18,
                    18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 19, 18,
                    18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 18,
                    18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 19,
                    18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 18,
                    18, 18, 18, 18, 18, 18, 19, 19, 18, 18, 18, 18, 18, 18, 19, 18,
                    18, 18, 18, 18, 18, 19, 19, 19, 19, 19, 19, 18, 18, 19, 19, 18,
                    18, 18, 18, 18, 19, 19, 18, 18, 18, 18, 19, 19, 19, 19, 18, 18,
                    18, 18, 18, 18, 19, 18, 18, 18, 18, 18, 18, 18, 19, 19, 18, 18],
                 "height":16,
                 "width":16,
                 "x":-16,
                 "y":0
                }, 
                {
                 "data":[19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    19, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 19, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 19, 19, 19, 19, 19, 19, 19, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 18, 18, 18, 19, 19, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 18, 18, 18, 19, 19, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 18, 18, 19, 19, 19, 19, 18, 18, 18, 18, 18,
                    18, 18, 18, 19, 19, 19, 19, 19, 18, 18, 19, 19, 19, 19, 19, 19,
                    19, 19, 19, 19, 18, 18, 18, 18, 18, 18, 18, 19, 19, 18, 18, 19,
                    18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 19],
                 "height":16,
                 "width":16,
                 "x":0,
                 "y":0
                }, 
                {
                 "data":[18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 19, 19, 19, 19, 19, 19, 19, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 19, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 18, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 18, 19, 19, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 18, 18, 19, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 19, 19, 19, 19, 19, 19, 18, 18, 18, 18, 18, 18, 18, 18,
                    19, 19, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19,
                    19, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 19, 19,
                    18, 19, 19, 19, 19, 19, 18, 18, 18, 18, 18, 19, 19, 19, 18, 18,
                    18, 19, 18, 18, 18, 19, 19, 19, 19, 19, 19, 19, 18, 18, 18, 18,
                    19, 19, 18, 18, 18, 18, 18, 18, 19, 19, 18, 18, 18, 18, 18, 18,
                    19, 18, 18, 18, 18, 18, 18, 18, 18, 19, 19, 18, 18, 18, 18, 18],
                 "height":16,
                 "width":16,
                 "x":16,
                 "y":0
                }, 
                {
                 "data":[18, 18, 18, 18, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 19, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 19, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 18, 19, 19, 19, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 18, 18, 18, 19, 19, 19, 18, 18, 18, 18, 18,
                    19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 19, 18, 18, 18, 18,
                    19, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 18, 18, 18, 18,
                    18, 19, 19, 18, 18, 18, 18, 18, 18, 18, 19, 19, 18, 18, 18, 18,
                    18, 18, 19, 19, 19, 18, 18, 18, 18, 19, 19, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 19, 19, 19, 19, 19, 19, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 19, 19, 18, 18, 18, 19, 19, 19, 18, 18, 18, 18],
                 "height":16,
                 "width":16,
                 "x":32,
                 "y":0
                }, 
                {
                 "data":[18, 18, 18, 18, 19, 18, 18, 18, 18, 18, 18, 18, 18, 19, 19, 18,
                    18, 18, 18, 19, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 18,
                    18, 18, 18, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 18,
                    18, 18, 19, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 19,
                    18, 18, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19,
                    19, 19, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 19,
                    18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 18,
                    18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 19, 18,
                    18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 19, 18,
                    18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 19, 18,
                    18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 18, 18,
                    18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 18, 18],
                 "height":16,
                 "width":16,
                 "x":-16,
                 "y":16
                }, 
                {
                 "data":[18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 19, 18,
                    18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 18, 18,
                    18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 19, 19,
                    18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 19, 18, 18,
                    19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 18, 18, 18,
                    19, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 19, 18, 18, 18,
                    18, 19, 19, 18, 18, 18, 18, 18, 18, 19, 19, 19, 18, 18, 18, 18,
                    18, 18, 19, 19, 19, 18, 19, 19, 19, 19, 18, 18, 18, 18, 18, 18,
                    18, 19, 19, 19, 19, 19, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    19, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 19, 19, 19, 19,
                    18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 19, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 19, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 19, 19, 18, 18,
                    18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 19, 19,
                    18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19,
                    18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19],
                 "height":16,
                 "width":16,
                 "x":0,
                 "y":16
                }, 
                {
                 "data":[18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 19, 19, 18, 18, 18,
                    18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 19, 18, 18,
                    19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 19, 19,
                    19, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19,
                    18, 19, 19, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 19, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    19, 19, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18],
                 "height":16,
                 "width":16,
                 "x":16,
                 "y":16
                }, 
                {
                 "data":[18, 18, 18, 19, 19, 18, 18, 18, 18, 18, 18, 19, 19, 18, 18, 18,
                    18, 18, 18, 19, 18, 18, 18, 18, 18, 18, 18, 18, 19, 18, 18, 18,
                    18, 18, 19, 19, 18, 18, 18, 18, 18, 18, 18, 18, 19, 19, 18, 18,
                    19, 18, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 19, 19,
                    19, 19, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 19, 19, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 19, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 19, 19, 19, 19, 19, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 18, 18, 18, 19, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 18, 18, 18, 19, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 18, 18, 18, 19, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 18, 18, 18, 19, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 18, 18, 18, 18, 19, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 18, 19, 19, 19, 19, 19, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 19, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                    18, 18, 18, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18],
                 "height":16,
                 "width":16,
                 "x":32,
                 "y":16
                }],
         "height":32,
         "id":1,
         "name":"Tile Layer 1",
         "opacity":1,
         "startx":-16,
         "starty":0,
         "type":"tilelayer",
         "visible":true,
         "width":64,
         "x":0,
         "y":0
        }],

Until this is fixed, we might want to remove the "Kontra has been written to work directly with the JSON output of the Tiled Map Editor." mention from the Advance Use section of the TileEngine documentation.

[straker]

Interesting. Hadn't seen this feature before. I'll have to investigate what it'll take to support it.

[snowfrogdev]

I'm still looking into it but it seems to be something that is done automatically when you work with "infinitely sized maps".

See mapeditor/tiled#2121

It seems to have been introduced here: https://doc.mapeditor.org/en/stable/reference/tmx-changelog/#tiled-1-1
Here is the JSON reference for it: https://doc.mapeditor.org/en/stable/reference/json-map-format/#json-chunk

Maybe there's a way to force Tiled to not use chunks. Will report back if I find a way.

[snowfrogdev]

Look like there is no way to turn off chunks while using an "infinitely sized map". But if you check off the infinite map option before exporting from Tiled, it will export it without chunks, so there's that.

Until we make kontra compatible with chunks I would suggest mentioning this in the documentation so that people don't fall into the same trap I did.