平铺碰撞编辑器，Phaser 中使用的对象层

Question

我在 Tiled 中以这种方式添加了树碰撞。 我如何使用此碰撞与 Phaser 中的玩家发生碰撞？

Answer 1

好吧，有很多方法可以做到这一点，这是一种方法：

1. 获取对象层，名称来自 Tiled （文档链接）：

   // let map = this.make.tilemap( {...} );
   let objectLayer = map.getObjectLayer( 'Trees' );
   

2. 遍历该层的所有对象（文档链接）：

   for( let obj in objectLayer.objects ){
       // ...
   }
   

3. 对于来自

   object

   的每个

   layer

   ：
   根据您的对象类型（点，矩形，椭圆，...）您为碰撞创建physics-body（对于这个例子我将使用椭圆）：

   let ellipse = this.add.ellipse( obj.x, obj.y, obj.width, obj.height );
   // you might need to set the "origin" 
   this.physics.add.existing( ellipse, true );
   ellipse.body.setCircle(obj.width / 2);
   

   信息/提示： 如果您使用的是街机物理，“碰撞框”将是一个矩形，无论您使用哪个

   gameObject

   。如果你想要带拱廊的圆形物理身体，你可以在

   setCircle

   （

   文档链接）上使用body方法。对于复杂的形状，我建议使用 matter.js 引擎。

4. Setup collision with: player, ai, ...

   this.physics.add.collider( player, ellipse );
   

更新运行演示：

document.body.style = 'margin:0;';

let json_map = {"compressionlevel":-1,"height":5,"infinite":false,"layers":[{"compression":"","data":"AQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAA==","encoding":"base64","height":5,"id":1,"name":"TileLayer1","opacity":1,"type":"tilelayer","visible":true,"width":8,"x":0,"y":0},{"draworder":"topdown","id":2,"name":"ObjectLayer1","objects":[{"class":"","ellipse":true,"height":10,"id":1,"name":"","rotation":0,"visible":true,"width":10,"x":8,"y":8},{"class":"","height":5,"id":2,"name":"","rotation":0,"visible":true,"width":15,"x":19.2,"y":25.6},{"class":"","height":0,"id":3,"name":"","point":true,"rotation":0,"visible":true,"width":0,"x":48,"y":4.8}],"opacity":1,"type":"objectgroup","visible":true,"x":0,"y":0}],"nextlayerid":3,"nextobjectid":4,"orientation":"orthogonal","renderorder":"right-down","tiledversion":"1.9.2","tileheight":8,"tilesets":[{"columns":1,"firstgid":1,"image":"tiles.png","imageheight":8,"imagewidth":8,"margin":0,"name":"tiles","spacing":0,"tilecount":1,"tileheight":8,"tilewidth":8}],"tilewidth":8,"type":"map","version":"1.9","width":8};

let config = {
    type: Phaser.AUTO,
    width: 8 * 8,
    height: 5 * 8,
    zoom: 4,
    physics: {
        default: 'arcade',
        arcade: { debug: true }
    },
    scene: { preload, create },
}; 

function preload () {
    this.load.tilemapTiledJSON('map', json_map);
}

function create () {
    let graphics = this.make.graphics();
    graphics.fillStyle(0x933AFF);
    graphics.fillRect(0, 0, 10, 10);
    graphics.generateTexture('tiles', 10, 10);

    let player = this.add.rectangle(50, 10, 5, 5, 0xffffff);

    this.physics.add.existing(player);

    player.setDepth(100);
    player.body.setVelocityX(-10);

    let map = this.make.tilemap({ key: 'map', tileWidth: 8, tileHeight: 8 });
    let tiles = map.addTilesetImage('tiles', 'tiles');
    let layer = map.createLayer(0, tiles, 0, 0);
    let objectLayer = map.getObjectLayer( 'ObjectLayer1' );

    for( let obj of objectLayer.objects ){
        
        // since you are not displaying the object the shape doesn't matter, only the collision body
        let gameObject = this.add.rectangle( obj.x, obj.y, obj.width, obj.height )
                .setOrigin(0);
        
        this.physics.add.existing( gameObject, true );
        
        if(obj.ellipse){
           // For the ellipse version you would need to change the body
            gameObject.body.setCircle( obj.width / 2 );
        } else if(obj.point){
            // For the point we need no set an width and height
            gameObject.body.setSize( 4, 4 );
        }
        
        this.physics.add.collider( player, gameObject );
    }
}

new Phaser.Game(config);

<script src="//cdn.jsdelivr.net/npm/phaser/dist/phaser.min.js"></script>

顺便说一句： 即使在我的 Tiled 版本中，当我创建 circle-object

width

和

height

时，我必须手动设置属性。因此，请检查它们是否已设置。

Answer 2

最后，我找到了解决方案，这对我有用。

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(
          object.x! + object.width! / 2,
          object.y! + object.height! / 2,
          object.width,
          object.height
        )

        const points: { x: number; y: number }[] = []

        const polygon = new Phaser.Geom.Polygon(rect2.pathData)

        for (let point of polygon.points) {
          points.push({
            x: object.x! + point.x,
            y: object.y! + point.y,
          })
        }

        const body2 = this.scene.matter.add.fromVertices(
          object.x! + object.width! / 2,
          object.y! + object.height! / 2,
          polygon.points
        )

        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(
          object.x! + object.width! / 2,
          object.y! + object.height! / 2,
          object.width,
          object.height
        )

        const points: { x: number; y: number }[] = []

        const polygon = new Phaser.Geom.Polygon(elps2.pathData)

        for (let point of polygon.points) {
          points.push({
            x: object.x! + point.x,
            y: object.y! + point.y,
          })
        }

        let body2 = this.scene.matter.add.fromVertices(
          object.x! + object.width! / 2,
          object.y! + object.height! / 2,
          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 points: { x: number; y: number }[] = []

        const objPol = object.polygon ? object.polygon : object.polyline

        const polygon = new Phaser.Geom.Polygon(objPol)

        for (let point of polygon.points) {
          points.push({
            x: object.x! + point.x,
            y: object.y! + point.y,
          })
        }

        let sliceCentre = this.scene.matter.vertices.centre(points)
        let 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)
      }
    })
  }