Tiled collision editor, object layer in use in Phaser

Question

I have added tree collision this way in Tiled. How can I use this collision to collide with the player in Phaser?

Answer 1

Finally, I got a solution, and this is working for me.

 
  
  addCollisionFromTiled(layerName: string, group: number) {
    const graphics = this.scene.add.graphics().lineStyle(2, 0x00ff00, 1)
    const objectLayer = this.map.getObjectLayer(layerName)

    objectLayer.objects.forEach((object: Phaser.Types.Tilemaps.TiledObject) => {
      if (object.rectangle) {
        const rect2 = this.scene.add.rectangle(0, 0, object.width, object.height)
        const polygon = new Phaser.Geom.Polygon(rect2.pathData)
        const body2 = this.scene.matter.add.fromVertices(
          object.x! + object.width! / 2,
          object.y! + object.height! / 2,
          polygon.points.slice(0, -1)
        )
        const collision = this.scene.matter.add.gameObject(
          rect2,
          body2
        ) as Phaser.Physics.Matter.Sprite
        collision.setStatic(true)
        collision.setCollisionGroup(group)

        graphics.strokeRect(object.x!, object.y!, object.width!, object.height!)
      } else if (object.ellipse) {
        const elps2 = this.scene.add.ellipse(0, 0, object.width, object.height)
        const polygon = new Phaser.Geom.Polygon(elps2.pathData)
        const body2 = this.scene.matter.add.fromVertices(
          object.x! + object.width! / 2,
          object.y! + object.height! / 2,
          polygon.points.slice(0, -1)
        )
        const collision = this.scene.matter.add.gameObject(
          elps2,
          body2
        ) as Phaser.Physics.Matter.Sprite
        collision.setStatic(true)
        collision.setCollisionGroup(group)

        graphics.strokeEllipse(
          object.x! + object.width! / 2,
          object.y! + object.height! / 2,
          object.width!,
          object.height!
        )
      } else if (object.polygon || object.polyline) {
        const objPol = object.polygon ? object.polygon : object.polyline
        const polygon = new Phaser.Geom.Polygon(objPol)
        const points: { x: number; y: number }[] = []
        for (let point of polygon.points) {
          points.push({
            x: object.x! + point.x,
            y: object.y! + point.y,
          })
        }
        const sliceCentre = this.scene.matter.vertices.centre(points)
        const body2 = this.scene.matter.add.fromVertices(sliceCentre.x, sliceCentre.y, points)
        const poly2 = this.scene.add.polygon(sliceCentre.x, sliceCentre.y, points)
        const collision = this.scene.matter.add.gameObject(
          poly2,
          body2
        ) as Phaser.Physics.Matter.Sprite
        collision.setStatic(true)
        collision.setCollisionGroup(group)

        graphics.strokePoints(points)
      }
    })
  }