Multiple tilesets in a single Tiled layer?

[mattasaurus]

In Tiled (1.1.3) you can make a layer that includes multiple different embedded tilesets.

The resulting JSON has an array in the tilesets property. See complete example https://pastebin.com/jYP4buQc .

I can't get this to load in Phaser. I've tried several things, but anything after the first tileset throws an error one way or another. Here's the latest attempt:

        function preload() {
            this.load.tilemapTiledJSON('map', '/maps/phaserTest.json');
            this.load.image('phaserTestImg', '/maps/phaserTest.png');
            this.load.image('Door0', '/maps/Door0.png');
            this.load.image('Floor', '/maps/Floor.png');
            this.load.image('Wall', '/maps/Wall.png');
        }

        function create() {
            var map = this.add.tilemap('map');
            var tileset = map.addTilesetImage('Wall', undefined, 16, 16, 0, 0, 1);
            var tileset2 = map.addTilesetImage('Door0', undefined, 16, 16, 0, 0, 2);
            var tileset3 = map.addTilesetImage('Floor', undefined, 16, 16, 0, 0, 3);
            var layer = map.createStaticLayer(0, tileset);
            var layer2 = map.createStaticLayer(1, tileset2);
            var layer3 = map.createStaticLayer(2, tileset3);

            //debugger;
            var graphics = this.add.graphics();

            //[...]

(I've also tried using map.createStaticLayer with the string name of the layer from Tiled JSON, this is just the latest failed experiment.)

My guess is this isn't supported and I have to create my maps differently in Tiled, but I am brand new to Phaser and I might just be missing something obvious.

Back in 2013, Rich seemed to say it wasn't supported

but 2013 is quite a long time ago and I know a lot has changed with tileset handling since then.

So my questions:

1) Can you make a map in Tiled that has multiple (embedded) tilesets in a single layer, and use that JSON from Phaser successfully? If so, can I get a hint on how to do this correctly?

2) If this isn't supported, what is the best alternate approach in Phaser 3? Two things that occur to me are making a Tiled map that has a separate layer for each tileset, or combining lots of little tilesets together into a mechagodzilla tileset so I can lay out a whole bunch of features in a single layer. Or something different. Opinions?

 

[elleniaw]

I have this same question. In the end I merged my tilesets and redid the level in Tiled.

Another question is if rotated/mirrored tiles are supported?

[PixelPicoSean]

@mattasaurus Multi-tileset is currently not supported, you need to create layers for different tilesets.

@elleniaw Objects in an object layer have rotation and flipping support if that's what you mean.

[mattasaurus]

Thanks PixelPicoSean. I too am merging my tilesets.

[elleniaw]

@PixelPicoSean Not really what I meant. In Tiled (tile editor) you can flip and rotate individual tiles. When I now import that into Phaser 3 the rotation and flipping of those tiles is not applied. Don't spend any time figuring this out though. I can read the code  myself and find out what's wrong.

[mattasaurus]

@elleniaw If you end up having to write your own, I thought Niklas's https://github.com/nkholski/phaser-animated-tiles/blob/master/src/main.js was very readable, shows a way to dig into Tiled properties and do extra stuff with them.

[MajorQuazar]

Is this still the case that each Tileset requires its own layer?

 

I tried using an array of tilesets as an argument because intellisense seemed to offer this as an option.

map = map.createStaticLayer("Layer", [tileset1, tileset2], 0,0);

and tileset 1 did load into the map sucessfully.

tileset 2 was not present on this load.

 

Could this work in theory or is it still not supported (Aug 2019)?

[Adam M]

It is possible to do it. I've found that the Tilemap class has the `createDynamicLayer` method which allows to make a layer from multiple image tilesets. I've successfully implemented it in one of the projects.