Adding tileset dynamically

Hello, everyone.
I’m new to TiledMap topic and I’m wondering if its possible to add tileset dynamically.
For example, I have a building tileset(only one grid) and tmx asset with 2 buildings in it at first. Now what I want is to add more building on mouse click(for now). What I thought at first is:

  1. get the TiledMap component and get the bottom layer.
  2. get the TileSet of the TiledMap and place it in a Map.
    editor version: Cocos Creator 3.2

Thank you.

I would recommend you try looking through the api and see which one fits your needs.

https://docs.cocos.com/creator/3.2/api/en/classes/tiledmap.tiledlayer-1.html#_updatetileforgid

You should get the layer on which you want to change the tile
Then on the layer you can call updateTileForGID

Thank you for your reply.
I got one of the layer like this:
var tile1 = this.tilemap.getLayer("bottom");
But it doesn’t have updateTileForGID function. There was another function _updateTileForGID but it didn’t work. I can’t figure out why this is happening.
I also want to know how to get the GID. I used tiledLayer.getTileGIDAt(0, 0); it returns 0.

Thank you.

Here is how you handle this,
Open the Tileset file (.tsx) in Tiled editor and check the tile ID for it.

Once you have checked that, you should be able to update the TileGID in the layer using the following api.
layer.setTileGIDAt(tile_id_from_tileset+1, row, col)

I hope this is what you are looking for… i’ve attached the script that i used to achieve this.
2021-07-12-10-45-17

  _touchStartEvent(event: Event.EventTouch) {
    if(this.stageCam && this.tileMapRef){
      let eloc = event.getLocation()
      let worldLocation = v3()
      
      const inVec:Vec3 = v3(eloc.x, eloc.y, 0)
      this.stageCam.screenToWorld(inVec, worldLocation)

      let ut = this.node.getComponent(UITransform)??undefined
      if(ut){
        let nodePos:Vec3 = ut.convertToNodeSpaceAR(worldLocation)
        log(ut.convertToNodeSpaceAR(worldLocation))


        let ts = this.tileMapRef.getTileSize()
        let ms = this.tileMapRef.getMapSize()
        
        //shift origin to top left 
        nodePos.x += (ts.width * ms.width) * 0.5
        nodePos.y += (ts.height * ms.height) * 0.5
        nodePos.y = (ts.height * ms.height) - nodePos.y
        nodePos.x = Math.floor(nodePos.x/ts.width)
        nodePos.y = Math.floor(nodePos.y/ts.height)

        let layer = this.tileMapRef.getLayer("floor")
        layer?.setTileGIDAt(21, nodePos.x, nodePos.y)
      }
    }

Hey, I tried this but didn’t work. Can you please share project link?

Here you go, ive’ created a sample project for the same.
https://we.tl/t-5gK0lof6i1