collision-detectiongame-physicsphaser-frameworktiled

Tiled collision editor, object layer in use in Phaser


Tiled collision editor

Tiled map editor with layer and sprite selection

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


Solution

  • 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)
          }
        })
      }