Tiled, physics.add.overlay for tiles with certain properties

Phaser 3
1

I am following:

In this we setup a tiled map and put the collides property on some tiles.

I am looking for a way that instead of setting a collision I simply want to detect when the player runs over a particular tile. Essentially like a runFunctionOnOverlap.

For example I made an encounter property on certain tiles and would like to be able to detect when the player runs over these tiles.

Overall i’m a little more curious how in general you can looking into a staticTilemapLayer 's properties that you have setup in tiled.

I would prefer not to have an overall Object property like he does for spawn in his post because it seems to be more hard coded as opposed to put on direct tiles.

From what I can understand I really want to setup an arcade physics overlap:

this.physics.add.overlap

But I still would need to get the specific tiles on the map layer with the property of encounter.

I may have gotten a lot of help on discord with an example: http://labs.phaser.io/view.html?src=src\game objects\tilemap\static\tile properties.js&v=dev

I have been able to check the tile’s property on mouse click over it however my real goal would be to create a physics.add.overlap on all the tiles with the “encounter” property is there a way to search a staticTileMap layer for all tiles with that property then add that physics overlap for all of them?

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

  // Parameters are the name you gave the tileset in Tiled and then the key of the tileset image in
  // Phaser's cache (i.e. the name you used in preload)
  const tileset = map.addTilesetImage("tuxmon-sample-32px-extruded", "tiles");

  // Parameters: layer name (or index) from Tiled, tileset, x, y
  const belowLayer = map.createStaticLayer("Below Player", tileset, 0, 0);
  const worldLayer = map.createStaticLayer("World", tileset, 0, 0);
  const aboveLayer = map.createStaticLayer("Above Player", tileset, 0, 0);

  worldLayer.setCollisionByProperty({ collides: true });

I actually have worldLayer not as a const here but a variable defined just in the general class above so I can find it later in the update.

To check tile’s properties I put this in the create function:

  // Put a marker around the tile the mouse pointer is on
  marker = this.add.graphics();
  marker.lineStyle(3, 0xffffff, 1);
  marker.strokeRect(0, 0, map.tileWidth, map.tileHeight);

Then in my update function:

  var worldPoint = this.input.activePointer.positionToCamera(this.cameras.main);

  // Rounds down to nearest tile
  var pointerTileX = map.worldToTileX(worldPoint.x);
  var pointerTileY = map.worldToTileY(worldPoint.y);

  // Snap to tile coordinates, but in world space
  marker.x = map.tileToWorldX(pointerTileX);
  marker.y = map.tileToWorldY(pointerTileY);

  if (this.input.manager.activePointer.isDown)
  {
      console.log('pointer down');
      var tile = worldLayer.getTileAt(pointerTileX, pointerTileY);
      console.log('tile: ', tile);

      if (tile)
      {
          // Note: JSON.stringify will convert the object tile properties to a string
          console.log(JSON.stringify(tile.properties));
          // propertiesText.setText('Properties: ' + JSON.stringify(tile.properties));
          tile.properties.viewed = true;
      }
  }

This allows me to check the properties when I click on the specific tile to see what properties it has for the worldLayer.

However var tile = worldLayer.getTileAt() is fine for the pointer in the update but I assume I really would prefer to make my physics.add.overlay in the create function.

Otherwise I will have to check that worldLayer every time the player moves. I am essentially asking for a worldLayer.getTileByProperties() kind of function.

worldLayer: StaticTilemapLayer {_events: Events, _eventsCount: 0, scene: Scene, type: "StaticTilemapLayer", parentContainer: null, …}

When I just console log out the world layer I see how I can get down into the world layer object and find the tileProperties under gidMap > [1…100] > tileProperties . I assume the best way is really not to loop over all the arrays in gidMap then loop through all of the tile properties of each then add them to a physics overlay however.

It kind of seems like: https://photonstorm.github.io/phaser3-docs/Phaser.Tilemaps.StaticTilemapLayer.html#filterTiles__anchor

That filter tiles should be what I want but i’m unsure how to implement it.