Phaser 3: addTilesetImage to map built with images collection

Question

I’ve built a map with Tiled with a tileset built from an images collection. So, I would to know how to load this tileset in my scene?

Here where I am in my code work:

export default class PreloadLevel1 extends Phaser.Scene {

    //...

    preload() {
        for (let i = 1; i < 101; i++) {
            const num = i.toString().padStart(3, '0');
            this.load.image('objects' + num, 'assets/img/tiles/objects' + num + '.png');
            this.load.image('tiles' + num, 'assets/img/tiles/tiles' + num + '.png');
        }
        this.load.tilemapTiledJSON('tileset', 'assets/json/levels/level1.json');
    }

    //...
}


export default class Level1 extends Phaser.Scene {
    
    //...

    create() {
        this.tilemap = this.make.tilemap({ key:'tileset' });

        for (let i = 1; i < 101; i++) {
            const num = i.toString().padStart(3, '0');
            this.tilesets.push(this.tilemap.addTilesetImage('tileset', 'objects' + num));
            this.tilesets.push(this.tilemap.addTilesetImage('tileset', 'tiles' + num));
        }

        //...
    }

    //...
}

But I finish with the warning in my console: No data found for Tileset: tileset

Here an extract of my level1.json file:

"tilesets":[
        {
         "columns":0,
         "firstgid":1,
         "grid":
            {
             "height":1,
             "orientation":"orthogonal",
             "width":1
            },
         "margin":0,
         "name":"tileset", // <----- there
         "spacing":0,
         "tilecount":173,
         "tileheight":64,

As you can see, the name of my tileset is right.

And another extract of this same file to see you how my tiles array is built:

         "tiles":[
                {
                 "id":404,
                 "image":"..\/..\/img\/tiles\/objects001.png",
                 "imageheight":17,
                 "imagewidth":13
                }, 
                {
                 "id":405,
                 "image":"..\/..\/img\/tiles\/objects002.png",
                 "imageheight":19,
                 "imagewidth":20
                }, 
                {
                 "id":406,
                 "image":"..\/..\/img\/tiles\/objects003.png",
                 "imageheight":35,
                 "imagewidth":22
                }, 
                {
                 "id":407,
                 "image":"..\/..\/img\/tiles\/objects004.png",
                 "imageheight":40,
                 "imagewidth":43

Is somebody to help me?

Update

Update thanks to an answer on the phaser discourse group here https://phaser.discourse.group/t/addtilesetimage-to-map-built-with-images-collection/11490/4

Here are the following of my searches after @Samme messages on the group

Firstly, my updated code looks like:

export default class Level1 extends Phaser.Scene {
    
    //...

    async create() {
        this.tilemap = this.make.tilemap({ key:'tileset' });

        for (let i = 1; i < 101; i++) {
            const num = i.toString().padStart(3, '0');
            this.tilesets.push(this.tilemap.addTilesetImage('../../img/tiles/tiles' + num + '.png', 'tiles' + num));
            this.tilesets.push(this.tilemap.addTilesetImage('../../img/tiles/objects' + num + '.png', 'objects' + num));
        }

        this.bckgLayer = this.tilemap.createLayer('background', this.tilemap.tilesets, 0, 0);
        this.groundLayer = this.tilemap.createLayer('ground', this.tilemap.tilesets, 0, 0);
        this.dorsLayer = this.tilemap.createLayer('doors', this.tilemap.tilesets, 0, 0);
        this.ceilingLayer = this.tilemap.createLayer('ceiling', this.tilemap.tilesets, 0, 0);
    }

    //...
}

But I ended with a white scene and warnings like Image tile area not tile size multiple in: ../../img/tiles/objects090.png

According to answers on the web, I've added the size of each image in the addTilesetImage method. But it became a little tricky, because I had to search for each image size by using the json from Tiled.

It begins in the Preload scene:

export default class PreloadLevel1 extends Phaser.Scene {
    //...

    preload() {
        this.load.json('level1', '../../assets/json/levels/level1.json'); // <--- here we put the json in Phaser cache
        for (let i = 1; i < 101; i++) {
            const num = i.toString().padStart(3, '0');
            this.load.image('objects' + num, 'assets/img/tiles/objects' + num + '.png');
            this.load.image('tiles' + num, 'assets/img/tiles/tiles' + num + '.png');
        }
        //...
    }

    //...
}

And the tricky part is in the level scene:

export default class Level1 extends Phaser.Scene {
    
    //...

    async create() {
        this.tilemap = this.make.tilemap({ key:'tileset' });
        // get back the json
        const json = this.cache.json.get('level1');

        // function used below in order to find each image size
        const findTileByName = (name) => json.tilesets[0].tiles.find((tile) => tile.image === name);

        for (let i = 1; i < 101; i++) {
            const num = i.toString().padStart(3, '0');
            const tile = findTileByName('../../img/tiles/tiles' + num + '.png');
            if (tile) {
                const { id: tileId, imageheight: tileHeight, imagewidth: tileWidth } = tile;
                this.tilesets.push(this.tilemap.addTilesetImage('../../img/tiles/tiles' + num + '.png', 'tiles' + num, tileWidth, tileHeight));
            }
            const object = findTileByName('../../img/tiles/objects' + num + '.png');
            if (object) {
                const { id: objectId, imageheight: objectHeight, imagewidth: objectWidth } = object;
                this.tilesets.push(this.tilemap.addTilesetImage('../../img/tiles/objects' + num + '.png', 'objects' + num, objectWidth, objectHeight));
            }
        }

        this.bckgLayer = this.tilemap.createLayer('background', this.tilemap.tilesets, 0, 0);
        this.groundLayer = this.tilemap.createLayer('ground', this.tilemap.tilesets, 0, 0);
        this.dorsLayer = this.tilemap.createLayer('doors', this.tilemap.tilesets, 0, 0);
        this.ceilingLayer = this.tilemap.createLayer('ceiling', this.tilemap.tilesets, 0, 0);
    }

    //...
}

Current result is awfull, tiles appear but are very deformed.

I will continue to dig for a viable solution but maybe I will ended by create real tileset and make it as usual.

Answer 1

This question was asked in may places, but there is no real answer/solution availiable, or I could not find one.
It seems this is not implemented or just buggy, here a older post (there are a few, but this seems to be the most recent), discussing this on the phaser discourse forum:
https://phaser.discourse.group/t/can-not-load-tiled-1-2-map-with-collection-of-images/3864