Dynamically adding content to tilemap

[evenflow58]

I'm not sure this is the proper way to handle this idea but here it goes. Advice about any of this would be greatly appreciated.

I'm creating a board game using Phaser 3. I have a tilemap that is pretty much just a grid. This tilemap was created with Tiled. That displays fine. However, if I try and add an image to the tilemap I do not see the new image. As you can see in my code I'm adding the images to the tilemap and trying to put a tile on the map but nothing shows. I'm not getting any errors either.

preload() {
        this.load.image('earth', 'assets/Earth.png');
        this.load.image('tile', 'assets/Tile.png');
        this.load.tilemapTiledJSON('map', 'assets/Map.json');
    }

create() {
         var map = this.make.tilemap({ key: 'map' });
        var tile = map.addTilesetImage('tileset', 'tile');
        var earthTile = map.addTilesetImage('earthTile', 'earth');

        map.createDynamicLayer(0, tile, 0, 0);

        map.putTileAt(earthTile, 5, 5);
}

 

[samme]

Likely you need this.add.tilemap(…) instead.

[evenflow58]

So I need to map the earth tile to a tilemap in Tiled first?

[samme]

I was wrong about add/make.

I think you need something like this. The TILE_INDEX you want you have to find in the map file, or in the exported map.

var map = this.make.tilemap({ key: 'map' });

var tileset1 = map.addTilesetImage('tileset', 'tile');
var tileset2 = map.addTilesetImage('earthTile', 'earth');

var layer = map.createDynamicLayer(0, tileset1, 0, 0);

layer.putTileAt(TILE_INDEX, 5, 5);

 

[evenflow58]

I really appreciate the help but I'm still not getting the earth tile to show. If anybody would like to look at my code, I've attached it. Maybe I'm doing something wrong with the way I'm exporting the tiles from Tiled or importing them into my project but I'm not sure what the issue is. (Just run npm i and npm run dev to run the application.)

Phaser.zip

[samme]

As written, the base layer is filled with the grid tile [1], so using putTile(1) on that layer will make no difference, and putTile() with any other tile index will fail because there are no other tiles in that tileset.

It will work this way: 

var EARTH_TILE_INDEX = 2;

var map = this.make.tilemap({ key: 'map' });
        
var gridTileset = map.addTilesetImage('tileset', 'tile');
var earthTileset = map.addTilesetImage('earthTile', 'earth');

var gridLayer = map.createStaticLayer(0, gridTileset, 0, 0);
var earthLayer = map.createBlankDynamicLayer('blank', earthTileset);

earthLayer.putTileAt(EARTH_TILE_INDEX, 1, 1);

But probably you should use just one tileset with all the tiles instead.

[evenflow58]

Ok, so my problem was that I was trying to put a tile where a tile already existed. I guess I need to really use a single dynamic layer and remove and add tiles as needed so I can place my tokens on the board. Thanks for the help.